isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

quickSettings: Add QuickToggle

Browse Source 
Most quick settings items are just buttons with icon, label, and
a particular style. While that's easy enough, a dedicated class
with corresponding properties is more convenient.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2392>
This commit is contained in:
Florian Müllner 2022-07-24 19:29:50 +02:00 committed by Marge Bot
parent 47cb354e6c
commit e5d4984c1b
2 changed files with 79 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
data/theme/gnome-shell-sass/widgets/_quick-settings.scss
View File

@ -6,3 +6,17 @@
spacing-rows: 3 * $base_padding;
spacing-columns: 2 * $base_padding;
}
.quick-toggle {
border-radius: 99px;
min-width: 11.5em;
max-width: 11.5em;
min-height: 48px;
&:checked { @include button(default); }
& > StBoxLayout { spacing: $base_padding; }
.quick-toggle-label { font-weight: bold; }
.quick-toggle-icon { icon-size: $base_icon_size; }
}

67
js/ui/quickSettings.js
View File

@ -1,9 +1,72 @@
/* exported QuickSettingsMenu */
const {Clutter, GLib, GObject, St} = imports.gi;
/* exported QuickToggle, QuickSettingsMenu */
const {Atk, Clutter, Gio, GLib, GObject, Pango, St} = imports.gi;
const Main = imports.ui.main;
const PopupMenu = imports.ui.popupMenu;
var QuickToggle = GObject.registerClass({
Properties: {
'icon-name': GObject.ParamSpec.override('icon-name', St.Button),
'gicon': GObject.ParamSpec.object('gicon', '', '',
GObject.ParamFlags.READWRITE,
Gio.Icon),
'label': GObject.ParamSpec.string('label', '', '',
GObject.ParamFlags.READWRITE,
''),
},
}, class QuickToggle extends St.Button {
_init(params) {
super._init({
style_class: 'quick-toggle button',
accessible_role: Atk.Role.TOGGLE_BUTTON,
can_focus: true,
...params,
});
this._box = new St.BoxLayout();
this.set_child(this._box);
const iconProps = {};
if (this.gicon)
iconProps['gicon'] = this.gicon;
if (this.iconName)
iconProps['icon-name'] = this.iconName;
this._icon = new St.Icon({
style_class: 'quick-toggle-icon',
x_expand: false,
...iconProps,
});
this._box.add_child(this._icon);
// bindings are in the "wrong" direction, so we
// pick up StIcon's linking of the two properties
this._icon.bind_property('icon-name',
this, 'icon-name',
GObject.BindingFlags.SYNC_CREATE |
GObject.BindingFlags.BIDIRECTIONAL);
this._icon.bind_property('gicon',
this, 'gicon',
GObject.BindingFlags.SYNC_CREATE |
GObject.BindingFlags.BIDIRECTIONAL);
this._label = new St.Label({
style_class: 'quick-toggle-label',
y_align: Clutter.ActorAlign.CENTER,
x_align: Clutter.ActorAlign.START,
x_expand: true,
});
this.label_actor = this._label;
this._box.add_child(this._label);
this._label.clutter_text.ellipsize = Pango.EllipsizeMode.END;
this.bind_property('label',
this._label, 'text',
GObject.BindingFlags.SYNC_CREATE);
}
});
const QuickSettingsLayoutMeta = GObject.registerClass({
Properties: {
'column-span': GObject.ParamSpec.int(