Changeset 287870 in webkit

Timestamp:

Jan 10, 2022, 11:27:23 PM (5 years ago)

Author:

Nikita Vasilyev

Message:

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.

Location:

trunk/Source/WebInspectorUI

Files:

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

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+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-10  Alex Christensen  <achristensen@webkit.org>
 

trunk/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>

trunk/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);
 }