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

quickSettings: Add QuickSlider

Browse Source 
Between input/output volume and brightness, we have enough use
cases for a common slider QuickSettingsItem, in particular as
the items can have a menu.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2393>
This commit is contained in:
Florian Müllner 2022-07-30 00:23:30 +02:00 committed by Marge Bot
parent 4b9dcb3f89
commit c2e8f41bdf
2 changed files with 97 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,6 +39,19 @@
}
}
.quick-slider {
padding: $base_padding;
.slider-bin {
&:focus {@include button(focus);}
min-height: 16px; // slider size
padding: $base_padding;
border-radius: 99px;
}
.quick-toggle-icon { icon-size: $base_icon_size; }
.icon-button { background-color: transparent; }
}
.quick-toggle-menu {
@include card();
padding: 1.5 * $base_padding;

85
js/ui/quickSettings.js
View File

@ -1,8 +1,9 @@
/* exported QuickToggle, QuickMenuToggle, QuickSettingsMenu, SystemIndicator */
/* exported QuickToggle, QuickMenuToggle, QuickSlider, QuickSettingsMenu, SystemIndicator */
const {Atk, Clutter, Gio, GLib, GObject, Graphene, Pango, St} = imports.gi;
const Main = imports.ui.main;
const PopupMenu = imports.ui.popupMenu;
const {Slider} = imports.ui.slider;
const {PopupAnimation} = imports.ui.boxpointer;
@ -131,6 +132,88 @@ var QuickMenuToggle = GObject.registerClass({
}
});
var QuickSlider = GObject.registerClass({
Properties: {
'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,
false),
},
}, class QuickSlider extends QuickSettingsItem {
_init(params) {
super._init({
style_class: 'quick-slider',
...params,
can_focus: false,
reactive: false,
hasMenu: true,
});
const box = new St.BoxLayout();
this.set_child(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',
...iconProps,
});
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.slider = new Slider(0);
// for focus indication
const sliderBin = new St.Bin({
style_class: 'slider-bin',
child: this.slider,
reactive: true,
can_focus: true,
x_expand: true,
y_align: Clutter.ActorAlign.CENTER,
});
box.add_child(sliderBin);
sliderBin.connect('event', (bin, event) => this.slider.event(event, false));
this._menuButton = new St.Button({
child: new St.Icon({icon_name: 'go-next-symbolic'}),
style_class: 'icon-button',
can_focus: true,
x_expand: false,
y_expand: true,
});
box.add_child(this._menuButton);
this.bind_property('menu-enabled',
this._menuButton, 'visible',
GObject.BindingFlags.SYNC_CREATE);
this._menuButton.connect('clicked', () => this.menu.open());
this.slider.connect('popup-menu', () => {
if (this.menuEnabled)
this.menu.open();
});
}
});
class QuickToggleMenu extends PopupMenu.PopupMenuBase {
constructor(sourceActor) {
super(sourceActor, 'quick-toggle-menu');