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

quickSettings: Add header to QuickToggleMenu

Browse Source 
All menus in the mockups spot a header, and as we are using a
custom menu type anyway, just add some API there.

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

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

@ -24,6 +24,27 @@
.quick-toggle-menu {
@include card();
padding: 1.5 * $base_padding;
& .header {
spacing-rows: 0.5 * $base_padding;
spacing-columns: $base_padding;
padding-bottom: 2 * $base_padding;
& .icon {
icon-size: $large_icon_size;
border-radius: 999px;
padding: 1.5 * $base_padding;
background-color: lighten($bg_color, 10%);
}
& .title {
@extend %title_3;
}
& .subtitle {
@extend %caption_heading;
}
}
}
.quick-toggle-menu-container {

61
js/ui/quickSettings.js
View File

@ -118,6 +118,67 @@ class QuickToggleMenu extends PopupMenu.PopupMenuBase {
this.actor.add_child(this.box);
global.focus_manager.add_group(this.actor);
const headerLayout = new Clutter.GridLayout();
this._header = new St.Widget({
style_class: 'header',
layout_manager: headerLayout,
visible: false,
});
headerLayout.hookup_style(this._header);
this.box.add_child(this._header);
this._headerIcon = new St.Icon({
style_class: 'icon',
y_align: Clutter.ActorAlign.CENTER,
});
this._headerTitle = new St.Label({
style_class: 'title',
y_align: Clutter.ActorAlign.CENTER,
y_expand: true,
});
this._headerSubtitle = new St.Label({
style_class: 'subtitle',
y_align: Clutter.ActorAlign.CENTER,
});
this._headerSpacer = new Clutter.Actor({x_expand: true});
const side = this.actor.text_direction === Clutter.TextDirection.RTL
? Clutter.GridPosition.LEFT
: Clutter.GridPosition.RIGHT;
headerLayout.attach(this._headerIcon, 0, 0, 1, 2);
headerLayout.attach_next_to(this._headerTitle,
this._headerIcon, side, 1, 1);
headerLayout.attach_next_to(this._headerSpacer,
this._headerTitle, side, 1, 1);
headerLayout.attach_next_to(this._headerSubtitle,
this._headerTitle, Clutter.GridPosition.BOTTOM, 1, 1);
}
setHeader(icon, title, subtitle = '') {
if (icon instanceof Gio.Icon)
this._headerIcon.gicon = icon;
else
this._headerIcon.icon_name = icon;
this._headerTitle.text = title;
this._headerSubtitle.set({
text: subtitle,
visible: !!subtitle,
});
this._header.show();
}
addHeaderSuffix(actor) {
const {layoutManager: headerLayout} = this._header;
const side = this.actor.text_direction === Clutter.TextDirection.RTL
? Clutter.GridPosition.LEFT
: Clutter.GridPosition.RIGHT;
this._header.remove_child(this._headerSpacer);
headerLayout.attach_next_to(actor, this._headerTitle, side, 1, 1);
headerLayout.attach_next_to(this._headerSpacer, actor, side, 1, 1);
}
open(animate) {