[gnome-shell/wip/snwh/menu-ornament-rework] popovers: Convert menu ornament to icons and cleanup stylesheets

From: Sam Hewitt <snwh src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-shell/wip/snwh/menu-ornament-rework] popovers: Convert menu ornament to icons and cleanup stylesheets
Date: Fri, 27 May 2022 15:17:25 +0000 (UTC)

commit 5c2fa4f27576f5a06eb98a387ecf1088661bdcc6
Author: Sam Hewitt <sam snwh org>
Date:   Fri May 27 11:10:03 2022 -0230

    popovers: Convert menu ornament to icons and cleanup stylesheets
    
    - convert ornaments to icons
    - add check and radio icon assets for ornaments
    - cleanup a lot of stylesheet hacks because the ornaments used to be labels

 data/gnome-shell-icons.gresource.xml               |  10 +-
 .../scalable/actions/ornament-check-symbolic.svg   |   4 +
 .../scalable/actions/ornament-dot-symbolic.svg     |   4 +
 data/icons/scalable/status/no-events-symbolic.svg  |   4 +-
 data/org.gnome.Shell-symbolic.Source.svg           |  51 ++++++++--
 data/theme/gnome-shell-sass/widgets/_popovers.scss | 112 +++++++--------------
 js/ui/padOsd.js                                    |   4 +-
 js/ui/popupMenu.js                                 |  17 ++--
 8 files changed, 107 insertions(+), 99 deletions(-)
---
diff --git a/data/gnome-shell-icons.gresource.xml b/data/gnome-shell-icons.gresource.xml
index c110026c86..472687fb73 100644
--- a/data/gnome-shell-icons.gresource.xml
+++ b/data/gnome-shell-icons.gresource.xml
@@ -1,21 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/org/gnome/shell/icons">
-    <file>scalable/actions/color-pick.svg</file>
     <file>scalable/actions/carousel-arrow-next-symbolic.svg</file>
     <file>scalable/actions/carousel-arrow-previous-symbolic.svg</file>
+    <file>scalable/actions/color-pick.svg</file>
+    <file>scalable/actions/ornament-check-symbolic.svg</file>
+    <file>scalable/actions/ornament-dot-symbolic.svg</file>
     <file>scalable/actions/pointer-double-click-symbolic.svg</file>
     <file>scalable/actions/pointer-drag-symbolic.svg</file>
     <file>scalable/actions/pointer-primary-click-symbolic.svg</file>
     <file>scalable/actions/pointer-secondary-click-symbolic.svg</file>
     <file>scalable/actions/preview-close-symbolic.svg</file>
+    <file>scalable/actions/record-screen-symbolic.svg</file>
+    <file>scalable/actions/screencast-recorded-symbolic.svg</file>
+    <file>scalable/actions/screenshot-recorded-symbolic.svg</file>
     <file>scalable/actions/screenshot-ui-area-symbolic.svg</file>
     <file>scalable/actions/screenshot-ui-display-symbolic.svg</file>
     <file>scalable/actions/screenshot-ui-show-pointer-symbolic.svg</file>
     <file>scalable/actions/screenshot-ui-window-symbolic.svg</file>
-    <file>scalable/actions/record-screen-symbolic.svg</file>
-    <file>scalable/actions/screencast-recorded-symbolic.svg</file>
-    <file>scalable/actions/screenshot-recorded-symbolic.svg</file>
     <file>scalable/status/keyboard-caps-lock-symbolic.svg</file>
     <file>scalable/status/keyboard-enter-symbolic.svg</file>
     <file>scalable/status/keyboard-hide-symbolic.svg</file>
diff --git a/data/icons/scalable/actions/ornament-check-symbolic.svg 
b/data/icons/scalable/actions/ornament-check-symbolic.svg
new file mode 100644
index 0000000000..1f01c191be
--- /dev/null
+++ b/data/icons/scalable/actions/ornament-check-symbolic.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg";>
+    <path d="m 13.753906 4.660156 c 0.175782 -0.199218 0.261719 -0.460937 0.246094 -0.726562 c -0.019531 
-0.265625 -0.140625 -0.511719 -0.339844 -0.6875 c -0.199218 -0.175782 -0.460937 -0.261719 -0.726562 -0.246094 
c -0.265625 0.019531 -0.511719 0.140625 -0.6875 0.339844 l -6.296875 7.195312 l -2.242188 -2.242187 c 
-0.390625 -0.390625 -1.023437 -0.390625 -1.414062 0 c -0.1875 0.1875 -0.292969 0.441406 -0.292969 0.707031 s 
0.105469 0.519531 0.292969 0.707031 l 3 3 c 0.195312 0.195313 0.464843 0.304688 0.738281 0.292969 c 0.277344 
-0.007812 0.539062 -0.132812 0.722656 -0.339844 z m 0 0" fill="#241f31"/>
+</svg>
diff --git a/data/icons/scalable/actions/ornament-dot-symbolic.svg 
b/data/icons/scalable/actions/ornament-dot-symbolic.svg
new file mode 100644
index 0000000000..1218d82e5c
--- /dev/null
+++ b/data/icons/scalable/actions/ornament-dot-symbolic.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg";>
+    <path d="m 11 8 c 0 1.65625 -1.34375 3 -3 3 s -3 -1.34375 -3 -3 s 1.34375 -3 3 -3 s 3 1.34375 3 3 z m 0 
0" fill="#241f31"/>
+</svg>
diff --git a/data/icons/scalable/status/no-events-symbolic.svg 
b/data/icons/scalable/status/no-events-symbolic.svg
index 9c7c889a05..874b8b253c 100644
--- a/data/icons/scalable/status/no-events-symbolic.svg
+++ b/data/icons/scalable/status/no-events-symbolic.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg height="64px" viewBox="0 0 64 64" width="64px" xmlns="http://www.w3.org/2000/svg";>
     <g fill="#241f31">
-        <path d="m 12 4 c -4.210938 0 -8 3.378906 -8 7.75 v 40.5 c 0 4.371094 3.789062 7.75 8 7.75 h 40 c 
4.210938 0 8 -3.378906 8 -7.75 v -40.5 c 0 -4.371094 -3.789062 -7.75 -8 -7.75 z m -2 18 h 12 v 8 h -12 z m 
16.125 0 h 11.875 v 8 h -11.875 z m 15.875 0 h 12 v 8 h -12 z m -32 12 h 12 v 8 h -12 z m 16.125 0 h 11.875 v 
8 h -11.875 z m 15.875 0 h 12 v 8 h -12 z m -32 12 h 12 v 8 h -12 z m 16.125 0 h 11.875 v 8 h -11.875 z m 
15.875 0 h 12 v 8 h -12 z m 0 0" fill-opacity="0.35"/>
-        <path d="m 42 34 h 12 v 8 h -12 z m 0 0" fill-opacity="0.1"/>
+        <path d="m 12 4 c -4.210938 0 -8 3.378906 -8 7.75 v 40.5 c 0 4.371094 3.789062 7.75 8 7.75 h 40 c 
4.210938 0 8 -3.378906 8 -7.75 v -40.5 c 0 -4.371094 -3.789062 -7.75 -8 -7.75 z m -2 18 h 12 v 8 h -12 z m 
16.125 0 h 11.875 v 8 h -11.875 z m 15.875 0 h 12 v 8 h -12 z m -32 12 h 12 v 8 h -12 z m 16.125 0 h 11.875 v 
8 h -11.875 z m 15.875 0 h 12 v 8 h -12 z m -32 12 h 12 v 8 h -12 z m 16.125 0 h 11.875 v 8 h -11.875 z m 
15.875 0 h 12 v 8 h -12 z m 0 0" fill-opacity="0.34902"/>
+        <path d="m 42 34 h 12 v 8 h -12 z m 0 0" fill-opacity="0.101961"/>
     </g>
 </svg>
diff --git a/data/org.gnome.Shell-symbolic.Source.svg b/data/org.gnome.Shell-symbolic.Source.svg
index b017734e3d..860e9ab218 100644
--- a/data/org.gnome.Shell-symbolic.Source.svg
+++ b/data/org.gnome.Shell-symbolic.Source.svg
@@ -7,7 +7,7 @@
    viewBox="0 0 64 64"
    id="svg2"
    version="1.1"
-   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
    sodipodi:docname="org.gnome.Shell-symbolic.Source.svg"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
@@ -22,9 +22,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
-     inkscape:zoom="1"
-     inkscape:cx="51.5"
-     inkscape:cy="258"
+     inkscape:zoom="4"
+     inkscape:cx="34.75"
+     inkscape:cy="369.25"
      inkscape:document-units="px"
      inkscape:current-layer="layer2"
      showgrid="false"
@@ -32,7 +32,7 @@
      inkscape:window-width="1920"
      inkscape:window-height="1011"
      inkscape:window-x="0"
-     inkscape:window-y="32"
+     inkscape:window-y="0"
      inkscape:window-maximized="1"
      inkscape:snap-bbox="true"
      inkscape:bbox-paths="true"
@@ -47,7 +47,10 @@
      inkscape:pagecheckerboard="false"
      showborder="false"
      inkscape:snap-nodes="true"
-     inkscape:snap-others="false">
+     inkscape:snap-others="false"
+     inkscape:showpageshadow="2"
+     inkscape:deskcolor="#d1d1d1"
+     showguides="false">
     <inkscape:grid
        type="xygrid"
        id="grid4514"
@@ -274,6 +277,42 @@
      inkscape:groupmode="layer"
      id="layer2"
      inkscape:label="actions">
+    <g
+       id="g398"
+       inkscape:label="menu list ornament selected dot">
+      <title
+         id="title3016">ornament-dot</title>
+      <rect
+         transform="scale(-1,1)"
+         y="360"
+         x="-16"
+         height="16"
+         width="16"
+         id="rect384"
+         style="fill:none" />
+      <path
+         d="M 11,368 A 3,3 0 0 1 8.0000002,370.99999 3,3 0 0 1 5.0000001,368 3,3 0 0 1 8.0000002,365.00001 
3,3 0 0 1 11,368 Z"
+         id="path386"
+         style="fill:#241f31;fill-opacity:1;stroke-width:3.77953" />
+    </g>
+    <g
+       inkscape:label="menu list ornament selected checked"
+       id="g1662"
+       transform="rotate(90,17.06949,213.93368)">
+      <title
+         id="title1652">ornament-check</title>
+      <path
+         style="fill:#241f31;fill-opacity:1"
+         d="m 167.79479,197.25019 a 1,1 0 0 0 -1.41211,0.0937 1,1 0 0 0 0.0937,1.41211 l 7.19532,6.29687 
-2.24415,2.24414 a 1,1 0 0 0 0,1.41407 1,1 0 0 0 1.41602,0 l 3,-3 a 1.0001,1.0001 0 0 0 -0.0488,-1.46094 z"
+         id="path8923-6-6-3" />
+      <rect
+         y="195.00317"
+         x="163.1358"
+         height="16"
+         width="16"
+         id="rect1660"
+         style="fill:none;fill-opacity:1" />
+    </g>
     <text
        xml:space="preserve"
        
style="font-style:normal;font-weight:normal;font-size:16px;line-height:1.25;font-family:sans-serif;fill:#241f31;fill-opacity:1;stroke:none"
diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss 
b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index 08ad324612..29b361c3a6 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -27,15 +27,12 @@
 
 // menu items
 .popup-menu-item {
-  padding: $base_padding*1.5 $base_padding*2;
+  padding:$base_padding*1.5;
   border-radius: $base_border_radius;
   spacing: $base_padding;
   transition: 0.2s all ease;
   background-color: transparent;
 
-  &:ltr {padding-left: $base_padding;}
-  &:rtl {padding-right: $base_padding;}
-
   &:focus, &:hover {
    background-color: $hover_bg_color !important;
    &:active { background-color: $active_bg_color !important;}
@@ -58,6 +55,22 @@
 
   &:insensitive {color: transparentize($fg_color,0.5);}
 
+  // submenu specific styles
+  .popup-sub-menu & {
+    border-radius: 0;
+
+    &:last-child {
+      border-radius: 0 0 $base_border_radius $base_border_radius;
+    }
+
+    &:focus,&:hover { background-color: lighten($hover_bg_color, 10%) !important;}
+    &:checked {
+      background-color: lighten($checked_bg_color, 10%) !important;
+      &:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;}
+    }
+    &:active { background-color: lighten($active_bg_color, 10%) !important;}
+  }
+
   // add margin to switches in menu items
   .toggle-switch {
     &:ltr { margin-left: $base_margin;}
@@ -65,7 +78,6 @@
   }
 }
 
-
 // all other graphical elements (sliders)
 .popup-inactive-menu-item {
   color: $fg_color;
@@ -73,39 +85,23 @@
 }
 
 // symbolic icons in popover
-.popup-menu-arrow,
 .popup-menu-icon {
-  icon-size: 16px !important; // for some reason the variable doesn't work here
-}
+  icon-size: $base_icon_size !important;
+  -st-icon-style: symbolic;
 
-.popup-menu-arrow {
+  &:ltr { margin-right: $base_padding;}
+  &:rtl { margin-left: $base_padding;}
 }
 
-
 // popover submenus
 .popup-sub-menu {
   background-color: $checked_bg_color;
   border-radius: 0 0 $base_border_radius $base_border_radius;
 
   .popup-menu-ornament {
-    min-width: $base_icon_size !important;
-  }
-
-  // submenu specific styles
-  .popup-menu-item {
-    border-radius: 0;
-    margin: 0;
-
-    &:last-child {
-      border-radius: 0 0 $base_border_radius $base_border_radius;
-    }
-
-    &:focus,&:hover { background-color: lighten($hover_bg_color, 10%) !important;}
-    &:checked {
-      background-color: lighten($checked_bg_color, 10%) !important;
-      &:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;}
-    }
-    &:active { background-color: lighten($active_bg_color, 10%) !important;}
+    width: $base_icon_size !important;
+    &:ltr { margin-right: $base_padding;}
+    &:rtl { margin-left: $base_padding;}
   }
 
   .popup-menu-section {
@@ -120,38 +116,28 @@
 
 // container for radio and check boxes
 .popup-menu-ornament {
-  @extend %heading;
-  width: 1.2em;
-  text-align: center !important;
-
-  &:ltr { text-align: right;}
-  &:rtl { text-align: left;}
+  icon-size: $base_icon_size;
 }
 
 // separator
 .popup-separator-menu-item {
-  margin: 6px 0;
-  padding:0 !important;
-  &:ltr { margin-right: $base_margin;}
-  &:rtl { margin-left: $base_margin;}
+  padding: $base_padding !important;
+  @extend %caption_heading;
 
-  .popup-separator-menu-item-separator {
-    height: 1px; //not really the whole box
-    background-color: $borders_color;
-  }
+  &:ltr { margin-right: $base_margin*2;}
+  &:rtl { margin-left: $base_margin*2;}
 
   .popup-menu-ornament {
     width: 0 !important;
   }
 
+  .popup-separator-menu-item-separator {
+    height: 1px; //not really the whole box
+    background-color: $borders_color;
+  }
+
   // separators in submenus
   .popup-sub-menu & {
-    background-color: transparent;
-
-    // account for ornament
-    &:ltr { margin-right: 2.5em;}
-    &:rtl { margin-left: 2.5em;}
-
     .popup-separator-menu-item-separator {
       background-color: lighten($borders_color, 7%);
     }
@@ -168,37 +154,13 @@
 .aggregate-menu {
   min-width: 22em;
 
-  // this is unneeded at the top-level in this menu, hide it
-  .popup-menu-ornament { width: 0 !important; }
-
-  // lock screen, shutdown, etc. buttons
-  .popup-menu-icon {
-    -st-icon-style: symbolic;
-    &:ltr {margin-right: $base_margin*2;}
-    &:rtl {margin-left: $base_margin*2;}
-  }
-
-  // account for ornaments in submenus with padding
-  .popup-sub-menu .popup-menu-item > :first-child {
-    // this value is hardcoded for visual effect
-    &:ltr { margin-left: 1em;}
-    &:rtl { margin-right: 1em;}
+  // specific styles for submenus since this menu has icons in menuitems
+  .popup-sub-menu .popup-menu-item {
+    padding: $base_padding*1.5 $base_padding*2.5;
   }
 }
 
 // right-click (and panel) app menu
 .app-menu {
   max-width: 27.25em;
-
-  // this is unneeded at the top-level in this menu, hide it
-  .popup-menu-ornament { width: 0 !important; }
-
-  .popup-inactive-menu-item:first-child {
-    // "Open Windows" label
-    > StLabel {
-      @extend %caption_heading;
-      &:ltr {margin-right: $base_margin*2;}
-      &:rtl {margin-left: $base_margin*2;}
-    }
-  }
 }
diff --git a/js/ui/padOsd.js b/js/ui/padOsd.js
index b273b0ce87..73bcc23d02 100644
--- a/js/ui/padOsd.js
+++ b/js/ui/padOsd.js
@@ -36,7 +36,7 @@ var PadChooser = GObject.registerClass({
         this._padChooserMenu = null;
 
         let arrow = new St.Icon({
-            style_class: 'popup-menu-arrow',
+            style_class: 'popup-menu-icon',
             icon_name: 'pan-down-symbolic',
             accessible_role: Atk.Role.ARROW,
             x_align: Clutter.ActorAlign.CENTER,
@@ -132,7 +132,7 @@ var ActionComboBox = GObject.registerClass({
         box.add_child(this._label);
 
         const arrow = new St.Icon({
-            style_class: 'popup-menu-arrow',
+            style_class: 'popup-menu-icon',
             icon_name: 'pan-down-symbolic',
             accessible_role: Atk.Role.ARROW,
             y_expand: true,
diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 83471030ef..e5425d6616 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -48,7 +48,7 @@ function arrowIcon(side) {
     }
 
     const arrow = new St.Icon({
-        style_class: 'popup-menu-arrow',
+        style_class: 'popup-menu-icon',
         icon_name: iconName,
         accessible_role: Atk.Role.ARROW,
         y_expand: true,
@@ -89,8 +89,8 @@ var PopupBaseMenuItem = GObject.registerClass({
         this._delegate = this;
 
         this._ornament = Ornament.NONE;
-        this._ornamentLabel = new St.Label({ style_class: 'popup-menu-ornament' });
-        this.add(this._ornamentLabel);
+        this._ornamentIcon = new St.Icon({ style_class: 'popup-menu-ornament' });
+        this.add(this._ornamentIcon);
 
         this._parent = null;
         this._active = false;
@@ -258,18 +258,15 @@ var PopupBaseMenuItem = GObject.registerClass({
 
         this._ornament = ornament;
 
-        if (ornament == Ornament.DOT) {
-            this._ornamentLabel.text = '\u2022';
-            this.add_accessible_state(Atk.StateType.CHECKED);
-        } else if (ornament == Ornament.CHECK) {
-            this._ornamentLabel.text = '\u2713';
+        if (ornament == Ornament.DOT || ornament == Ornament.CHECK) {
+            this._ornamentIcon.icon_name = 'ornament-check-symbolic';
             this.add_accessible_state(Atk.StateType.CHECKED);
         } else if (ornament == Ornament.NONE || ornament == Ornament.HIDDEN) {
-            this._ornamentLabel.text = '';
+            this._ornamentIcon.icon_name = '';
             this.remove_accessible_state(Atk.StateType.CHECKED);
         }
 
-        this._ornamentLabel.visible = ornament != Ornament.HIDDEN;
+        this._ornamentIcon.visible = ornament != Ornament.HIDDEN;
     }
 });
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]