diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss index 4f8a62f27..f1f2eb235 100644 --- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss +++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss @@ -17,8 +17,26 @@ & > StBoxLayout { spacing: $base_padding; } + /* Move padding into the box; this is to allow menu arrows + to extend to the border */ + &.button { padding: 0; } + & > StBoxLayout { padding: 0 2 * $base_padding; } + .quick-toggle-label { font-weight: bold; } - .quick-toggle-icon { icon-size: $base_icon_size; } + .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; } +} + +.quick-menu-toggle { + &:ltr > StBoxLayout { padding-right: 0; } + &:rtl > StBoxLayout { padding-left: 0; } + + & .quick-toggle-arrow { + background-color: transparentize($fg_color, 0.9); + padding: 8px; + + &:ltr { border-radius: 0 99px 99px 0; } + &:rtl { border-radius: 99px 0 0 99px; } + } } .quick-toggle-menu { diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js index 634a0703f..ecffc9879 100644 --- a/js/ui/quickSettings.js +++ b/js/ui/quickSettings.js @@ -1,4 +1,4 @@ -/* exported QuickToggle, QuickSettingsMenu, SystemIndicator */ +/* exported QuickToggle, QuickMenuToggle, QuickSettingsMenu, SystemIndicator */ const {Atk, Clutter, Gio, GLib, GObject, Graphene, Pango, St} = imports.gi; const Main = imports.ui.main; @@ -94,6 +94,43 @@ var QuickToggle = GObject.registerClass({ } }); +var QuickMenuToggle = GObject.registerClass({ + Properties: { + 'menu-enabled': GObject.ParamSpec.boolean( + 'menu-enabled', '', '', + GObject.ParamFlags.READWRITE, + true), + }, +}, class QuickMenuToggle extends QuickToggle { + _init(params) { + super._init({ + ...params, + hasMenu: true, + }); + + this.add_style_class_name('quick-menu-toggle'); + + this._menuButton = new St.Button({ + child: new St.Icon({ + style_class: 'quick-toggle-arrow', + icon_name: 'go-next-symbolic', + }), + x_expand: false, + y_expand: true, + }); + this._box.add_child(this._menuButton); + + this.bind_property('menu-enabled', + this._menuButton, 'visible', + GObject.BindingFlags.DEFAULT); + this._menuButton.connect('clicked', () => this.menu.open()); + this.connect('popup-menu', () => { + if (this.menuEnabled) + this.menu.open(); + }); + } +}); + class QuickToggleMenu extends PopupMenu.PopupMenuBase { constructor(sourceActor) { super(sourceActor, 'quick-toggle-menu');