diff options
author | Sam Hewitt <sam@snwh.org> | 2022-05-27 11:10:03 -0230 |
---|---|---|
committer | Sam Hewitt <sam@snwh.org> | 2022-05-27 16:07:11 -0230 |
commit | 5b3de55907bc0721cfdb6fb590cac43d9413da55 (patch) | |
tree | 0e2af6304975b001da31a600917a163e9933d8db | |
parent | 9a0935305d76e7e7c5c9d659b71609d873cfecbb (diff) | |
download | gnome-shell-wip/snwh/menu-ornament-rework.tar.gz |
popovers: Convert menu ornament to icons and cleanup stylesheetswip/snwh/menu-ornament-rework
- 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
-rw-r--r-- | data/gnome-shell-icons.gresource.xml | 10 | ||||
-rw-r--r-- | data/icons/scalable/actions/ornament-check-symbolic.svg | 4 | ||||
-rw-r--r-- | data/icons/scalable/actions/ornament-dot-symbolic.svg | 4 | ||||
-rw-r--r-- | data/org.gnome.Shell-symbolic.Source.svg | 51 | ||||
-rw-r--r-- | data/theme/gnome-shell-sass/widgets/_popovers.scss | 112 | ||||
-rw-r--r-- | js/ui/padOsd.js | 4 | ||||
-rw-r--r-- | js/ui/popupMenu.js | 17 |
7 files changed, 105 insertions, 97 deletions
diff --git a/data/gnome-shell-icons.gresource.xml b/data/gnome-shell-icons.gresource.xml index c110026c8..472687fb7 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 000000000..1f01c191b --- /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 000000000..1218d82e5 --- /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/org.gnome.Shell-symbolic.Source.svg b/data/org.gnome.Shell-symbolic.Source.svg index b017734e3..860e9ab21 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 08ad32461..29b361c3a 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 b273b0ce8..73bcc23d0 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 83471030e..e5425d661 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; } }); |