Changeset 288495 in webkit

Timestamp:

Jan 24, 2022, 5:54:37 PM (5 years ago)

Author:

Russell Epstein

Message:

Cherry-pick r287870. rdar://problem/86543279

Web Inspector: Increase padding around icons in Alignment editor
​https://bugs.webkit.org/show_bug.cgi?id=234036
<rdar://problem/86543279>

Reviewed by Devin Rousso.

Increase margin and padding around the icons, making the icons more visually appealing
and easier to distinguish and from each other.

• UserInterface/Images/AlignContentStretch.svg: The gap between rectangles was only 0.5px. Increase it to 2px.

• UserInterface/Views/AlignmentEditor.css: (.alignment-editor .glyph): (.alignment-editor .glyph:not(:first-child)): (.alignment-editor .glyph.selected): (.alignment-editor .glyph.selected:active): (.alignment-editor .glyph:not(:last-child)): Deleted. (.alignment-editor .glyph.selected + .glyph): Deleted.

git-svn-id: ​https://svn.webkit.org/repository/webkit/trunk@287870 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Location:

branches/safari-613-branch/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Images/AlignContentStretch.svg (modified) (1 diff)
• UserInterface/Views/AlignmentEditor.css (modified) (3 diffs)

branches/safari-613-branch/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2022-01-24  Alan Coon  <alancoon@apple.com>
+
+        Cherry-pick r287870. rdar://problem/86543279
+
+    Web Inspector: Increase padding around icons in Alignment editor
+    https://bugs.webkit.org/show_bug.cgi?id=234036
+    <rdar://problem/86543279>
+    
+    Reviewed by Devin Rousso.
+    
+    Increase margin and padding around the icons, making the icons more visually appealing
+    and easier to distinguish and from each other.
+    
+    * UserInterface/Images/AlignContentStretch.svg:
+    The gap between rectangles was only 0.5px. Increase it to 2px.
+    
+    * UserInterface/Views/AlignmentEditor.css:
+    (.alignment-editor .glyph):
+    (.alignment-editor .glyph:not(:first-child)):
+    (.alignment-editor .glyph.selected):
+    (.alignment-editor .glyph.selected:active):
+    (.alignment-editor .glyph:not(:last-child)): Deleted.
+    (.alignment-editor .glyph.selected + .glyph): Deleted.
+    
+    
+    git-svn-id: https://svn.webkit.org/repository/webkit/trunk@287870 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+    2022-01-10  Nikita Vasilyev  <nvasilyev@apple.com>
+
+            Web Inspector: Increase padding around icons in Alignment editor
+            https://bugs.webkit.org/show_bug.cgi?id=234036
+            <rdar://problem/86543279>
+
+            Reviewed by Devin Rousso.
+
+            Increase margin and padding around the icons, making the icons more visually appealing
+            and easier to distinguish and from each other.
+
+            * UserInterface/Images/AlignContentStretch.svg:
+            The gap between rectangles was only 0.5px. Increase it to 2px.
+
+            * UserInterface/Views/AlignmentEditor.css:
+            (.alignment-editor .glyph):
+            (.alignment-editor .glyph:not(:first-child)):
+            (.alignment-editor .glyph.selected):
+            (.alignment-editor .glyph.selected:active):
+            (.alignment-editor .glyph:not(:last-child)): Deleted.
+            (.alignment-editor .glyph.selected + .glyph): Deleted.
+
 2022-01-07  Alexey Shvayka  <ashvayka@apple.com>
 

branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Images/AlignContentStretch.svg

@@ -1 +1 @@
 <!-- Copyright © 2021 Apple Inc. All rights reserved. -->
 <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="root">
-    <rect x="2" y="1" width="12" height="6.5" fill="currentColor"/>
-    <rect x="2" y="8" width="12" height="6.5" fill="currentColor"/>
+    <rect x="2" y="1" width="12" height="6" fill="currentColor"/>
+    <rect x="2" y="9" width="12" height="6" fill="currentColor"/>
 </svg>

branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css

@@ -28 +28 @@
     width: 16px;
     height: 16px;
+    padding: 2px;
     background-color: var(--background-color-content);
     box-sizing: content-box;
@@ -34 +35 @@
 }
 
-.alignment-editor .glyph:not(:last-child) {
-    border-inline-end-width: 0;
+.alignment-editor .glyph:not(:first-child) {
+    margin-inline-start: 2px;
 }
 
@@ -43 +44 @@
 
 .alignment-editor .glyph.selected {
-    color: var(--glyph-color-active);
+    background-color: var(--glyph-color-active);
     border-color: var(--glyph-color-active);
-}
-
-.alignment-editor .glyph.selected + .glyph {
-    border-inline-start-color: var(--glyph-color-active);
+    color: var(--selected-foreground-color);
 }
 
 .alignment-editor .glyph.selected:active {
-    color: var(--glyph-color-active-pressed);
-    outline-color: var(--glyph-color-active-pressed);
+    background-color: var(--glyph-color-active-pressed);
+    border-color: var(--glyph-color-active-pressed);
 }