[gnome-shell] quickSettings: Add header to QuickToggleMenu
- From: Marge Bot <marge-bot src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell] quickSettings: Add header to QuickToggleMenu
- Date: Wed, 3 Aug 2022 12:43:41 +0000 (UTC)
commit a0436d4b481fc5b9863887ed7893bec49736c42d
Author: Florian Müllner <fmuellner gnome org>
Date: Fri Jul 29 23:41:33 2022 +0200
quickSettings: Add header to QuickToggleMenu
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>
.../gnome-shell-sass/widgets/_quick-settings.scss | 21 ++++++++
js/ui/quickSettings.js | 61 ++++++++++++++++++++++
2 files changed, 82 insertions(+)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 05d8495144..eeb7420e0c 100644
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -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 {
diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index ae097ca646..a7ae84088c 100644
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -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) {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]