From cf89a6d01ef9e3ea8636fe9cfd6429e590008eed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Tue, 23 Aug 2022 01:29:10 +0200 Subject: [PATCH] quickSettings: Split menu toggle Menu toggles are currently regular toggles with an additional arrow button. This allows for a simpler implementation, but has downsides with regards to keyboard navigation and hover feedback. To make it more obvious that the two parts of the menu toggle perform different actions, change the overall structure of the toggle to *contain* a regular toggle and the menu button. That way each element uses its own hover effect, and shows up in the keynav focus chain. https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/5964 Part-of: --- .../widgets/_quick-settings.scss | 22 +++++-- js/ui/quickSettings.js | 58 +++++++++++++++++-- po/POTFILES.in | 1 + 3 files changed, 71 insertions(+), 10 deletions(-) diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss index 494289d42..87028565e 100644 --- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss +++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss @@ -12,13 +12,15 @@ spacing-columns: $base_padding*2; } -.quick-toggle { +.quick-toggle, .quick-menu-toggle { border-radius: 99px; min-width: 12em; max-width: 12em; min-height: 48px; border:none; +} +.quick-toggle { &:checked { @include button(default, $c:$selected_bg_color); } & > StBoxLayout { spacing: $base_padding*1.5; } @@ -37,16 +39,26 @@ font-size: 12px; } - .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; } + .quick-toggle-icon { icon-size: $base_icon_size; } } .quick-menu-toggle { - &:ltr > StBoxLayout { padding-right: 0; } - &:rtl > StBoxLayout { padding-left: 0; } + & .quick-toggle { + min-width: auto; + max-width: auto; + + &:ltr { border-radius: 99px 0 0 99px; } + &:rtl { border-radius: 0 99px 99px 0; } + + &:ltr:last-child { border-radius: 99px; } + &:rtl:last-child { border-radius: 99px; } + } & .quick-toggle-arrow { - background-color: transparentize($fg_color, 0.9); padding: $base_padding $base_padding*1.75; + border: none; + + &:checked { @include button(default, $c:$selected_bg_color); } &:ltr { border-radius: 0 99px 99px 0; } &:rtl { border-radius: 99px 0 0 99px; } diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js index fd584e2b4..fe42e504f 100644 --- a/js/ui/quickSettings.js +++ b/js/ui/quickSettings.js @@ -10,6 +10,8 @@ const {PopupAnimation} = imports.ui.boxpointer; const DIM_BRIGHTNESS = -0.4; const POPUP_ANIMATION_TIME = 400; +const MENU_BUTTON_BRIGHTNESS = 0.1; + var QuickSettingsItem = GObject.registerClass({ Properties: { 'has-menu': GObject.ParamSpec.boolean( @@ -130,12 +132,22 @@ var QuickToggle = GObject.registerClass({ var QuickMenuToggle = GObject.registerClass({ Properties: { + 'title': GObject.ParamSpec.string('title', '', '', + GObject.ParamFlags.READWRITE, + null), + 'subtitle': GObject.ParamSpec.string('subtitle', '', '', + GObject.ParamFlags.READWRITE, + null), + 'icon-name': GObject.ParamSpec.override('icon-name', St.Button), + 'gicon': GObject.ParamSpec.object('gicon', '', '', + GObject.ParamFlags.READWRITE, + Gio.Icon), 'menu-enabled': GObject.ParamSpec.boolean( 'menu-enabled', '', '', GObject.ParamFlags.READWRITE, true), }, -}, class QuickMenuToggle extends QuickToggle { +}, class QuickMenuToggle extends QuickSettingsItem { _init(params) { super._init({ ...params, @@ -144,23 +156,59 @@ var QuickMenuToggle = GObject.registerClass({ this.add_style_class_name('quick-menu-toggle'); + this._box = new St.BoxLayout(); + this.set_child(this._box); + + const contents = new QuickToggle({ + x_expand: true, + }); + this._box.add_child(contents); + + // Use an effect to lighten the menu button a bit, so we don't + // have to define two full sets of button styles (normal/default) + // with slightly different colors + const menuHighlight = new Clutter.BrightnessContrastEffect(); + menuHighlight.set_brightness(MENU_BUTTON_BRIGHTNESS); + this._menuButton = new St.Button({ - child: new St.Icon({ - style_class: 'quick-toggle-arrow', - icon_name: 'go-next-symbolic', - }), + style_class: 'quick-toggle-arrow icon-button', + child: new St.Icon({icon_name: 'go-next-symbolic'}), + accessible_name: _('Open menu'), + effect: menuHighlight, + can_focus: true, x_expand: false, y_expand: true, }); this._box.add_child(this._menuButton); + this.bind_property('checked', + contents, 'checked', + GObject.BindingFlags.SYNC_CREATE); + this.bind_property('title', + contents, 'title', + GObject.BindingFlags.SYNC_CREATE); + this.bind_property('subtitle', + contents, 'subtitle', + GObject.BindingFlags.SYNC_CREATE); + this.bind_property('icon-name', + contents, 'icon-name', + GObject.BindingFlags.SYNC_CREATE); + this.bind_property('gicon', + contents, 'gicon', + GObject.BindingFlags.SYNC_CREATE); + this.bind_property('menu-enabled', this._menuButton, 'visible', GObject.BindingFlags.SYNC_CREATE); this.bind_property('reactive', this._menuButton, 'reactive', GObject.BindingFlags.SYNC_CREATE); + this.bind_property('checked', + this._menuButton, 'checked', + GObject.BindingFlags.SYNC_CREATE); this._menuButton.connect('clicked', () => this.menu.open()); + this._menuButton.connect('popup-menu', () => this.emit('popup-menu')); + contents.connect('popup-menu', () => this.emit('popup-menu')); this.connect('popup-menu', () => { if (this.menuEnabled) this.menu.open(); diff --git a/po/POTFILES.in b/po/POTFILES.in index ac35c70ea..5ceecebcb 100644 --- a/po/POTFILES.in +++ b/po/POTFILES.in @@ -48,6 +48,7 @@ js/ui/overview.js js/ui/padOsd.js js/ui/panel.js js/ui/popupMenu.js +js/ui/quickSettings.js js/ui/runDialog.js js/ui/screenShield.js js/ui/screenshot.js