quickSettings: Add 'subtitle' property

Add a subtitle label to QuickToggle, with a less prominent font.
Make the subtitle invisible when no text is present.

This new property will be used by next commits to implement quick
settings with a static title, and a changing subtitle.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2619>
This commit is contained in:
Georges Basile Stavracas Neto 2023-01-30 17:57:42 -03:00
parent 2d2172da32
commit 1619b8f95d
2 changed files with 35 additions and 1 deletions

View File

@ -31,6 +31,12 @@
&:rtl > StBoxLayout { padding-right: $base_padding*2.5; } &:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
.quick-toggle-title { font-weight: bold; } .quick-toggle-title { font-weight: bold; }
& StBoxLayout > .quick-toggle-subtitle {
font-weight: normal;
font-size: 12px;
}
.quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; } .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
} }

View File

@ -37,6 +37,9 @@ var QuickToggle = GObject.registerClass({
'title': GObject.ParamSpec.string('title', '', '', 'title': GObject.ParamSpec.string('title', '', '',
GObject.ParamFlags.READWRITE, GObject.ParamFlags.READWRITE,
null), null),
'subtitle': GObject.ParamSpec.string('subtitle', '', '',
GObject.ParamFlags.READWRITE,
null),
'icon-name': GObject.ParamSpec.override('icon-name', St.Button), 'icon-name': GObject.ParamSpec.override('icon-name', St.Button),
'gicon': GObject.ParamSpec.object('gicon', '', '', 'gicon': GObject.ParamSpec.object('gicon', '', '',
GObject.ParamFlags.READWRITE, GObject.ParamFlags.READWRITE,
@ -85,13 +88,38 @@ var QuickToggle = GObject.registerClass({
x_expand: true, x_expand: true,
}); });
this.label_actor = this._title; this.label_actor = this._title;
this._box.add_child(this._title);
this._subtitle = new St.Label({
style_class: 'quick-toggle-subtitle',
y_align: Clutter.ActorAlign.CENTER,
x_align: Clutter.ActorAlign.START,
x_expand: true,
});
const titleBox = new St.BoxLayout({
y_align: Clutter.ActorAlign.CENTER,
x_align: Clutter.ActorAlign.START,
x_expand: true,
vertical: true,
});
titleBox.add_child(this._title);
titleBox.add_child(this._subtitle);
this._box.add_child(titleBox);
this._title.clutter_text.ellipsize = Pango.EllipsizeMode.END; this._title.clutter_text.ellipsize = Pango.EllipsizeMode.END;
this.bind_property('title', this.bind_property('title',
this._title, 'text', this._title, 'text',
GObject.BindingFlags.SYNC_CREATE); GObject.BindingFlags.SYNC_CREATE);
this.bind_property('subtitle',
this._subtitle, 'text',
GObject.BindingFlags.SYNC_CREATE);
this.bind_property_full('subtitle',
this._subtitle, 'visible',
GObject.BindingFlags.SYNC_CREATE,
(bind, source) => [true, source !== null],
null);
} }
set label(label) { set label(label) {