diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss b/data/theme/gnome-shell-sass/widgets/_dialogs.scss index 53ee468e8..429105ba7 100644 --- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss +++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss @@ -32,19 +32,28 @@ .message-dialog-description { text-align: center; } } -/* Run Dialog */ -.run-dialog { - .run-dialog-entry { width: 20em; margin-bottom: 6px; } - .run-dialog-error-box { - padding-top: 16px; - spacing: 6px; +/* Dialog List */ +.dialog-list { + spacing: 18px; + + .dialog-list-title { + text-align: center; + font-weight: bold; } - .run-dialog-label { - @include fontsize($base_font_size + 1.1); - font-weight: normal; - color: $fg_color; - padding-bottom: .4em; + .dialog-list-scrollview { max-height: 200px; } + .dialog-list-box { + spacing: 1em; + + .dialog-list-item { + spacing: 1em; + + .dialog-list-item-title { font-weight: bold; } + .dialog-list-item-description { + color: darken($fg_color,5%); + @include fontsize($base_font_size - 1); + } + } } } diff --git a/js/ui/dialog.js b/js/ui/dialog.js index 642873be6..2aa7fc37b 100644 --- a/js/ui/dialog.js +++ b/js/ui/dialog.js @@ -1,5 +1,5 @@ // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*- -/* exported Dialog, MessageDialogContent */ +/* exported Dialog, MessageDialogContent, ListSection, ListSectionItem */ const { Clutter, GObject, Pango, St } = imports.gi; @@ -201,3 +201,122 @@ var MessageDialogContent = GObject.registerClass({ this.notify('description'); } }); + +var ListSection = GObject.registerClass({ + Properties: { + 'title': GObject.ParamSpec.string( + 'title', 'title', 'title', + GObject.ParamFlags.READWRITE | + GObject.ParamFlags.CONSTRUCT, + null), + }, +}, class ListSection extends St.BoxLayout { + _init(params) { + this._title = new St.Label({ style_class: 'dialog-list-title' }); + + this._listScrollView = new St.ScrollView({ + style_class: 'dialog-list-scrollview', + hscrollbar_policy: St.PolicyType.NEVER, + }); + + this.list = new St.BoxLayout({ + style_class: 'dialog-list-box', + vertical: true, + }); + this._listScrollView.add_actor(this.list); + + let defaultParams = { + style_class: 'dialog-list', + x_expand: true, + vertical: true, + }; + super._init(Object.assign(defaultParams, params)); + + this.label_actor = this._title; + this.add_child(this._title); + this.add_child(this._listScrollView); + } + + get title() { + return this._title.text; + } + + set title(title) { + _setLabel(this._title, title); + this.notify('title'); + } +}); + +var ListSectionItem = GObject.registerClass({ + Properties: { + 'icon-actor': GObject.ParamSpec.object( + 'icon-actor', 'icon-actor', 'Icon actor', + GObject.ParamFlags.READWRITE, + Clutter.Actor.$gtype), + 'title': GObject.ParamSpec.string( + 'title', 'title', 'title', + GObject.ParamFlags.READWRITE | + GObject.ParamFlags.CONSTRUCT, + null), + 'description': GObject.ParamSpec.string( + 'description', 'description', 'description', + GObject.ParamFlags.READWRITE | + GObject.ParamFlags.CONSTRUCT, + null), + }, +}, class ListSectionItem extends St.BoxLayout { + _init(params) { + this._iconActorBin = new St.Bin(); + + let textLayout = new St.BoxLayout({ + vertical: true, + y_expand: true, + y_align: Clutter.ActorAlign.CENTER, + }); + + this._title = new St.Label({ style_class: 'dialog-list-item-title' }); + + this._description = new St.Label({ + style_class: 'dialog-list-item-title-description', + }); + + textLayout.add_child(this._title); + textLayout.add_child(this._description); + + let defaultParams = { style_class: 'dialog-list-item' }; + super._init(Object.assign(defaultParams, params)); + + this.label_actor = this._title; + this.add_child(this._iconActorBin); + this.add_child(textLayout); + } + + // eslint-disable-next-line camelcase + get icon_actor() { + return this._iconActorBin.get_child(); + } + + // eslint-disable-next-line camelcase + set icon_actor(actor) { + this._iconActorBin.set_child(actor); + this.notify('icon-actor'); + } + + get title() { + return this._title.text; + } + + set title(title) { + _setLabel(this._title, title); + this.notify('title'); + } + + get description() { + return this._description.text; + } + + set description(description) { + _setLabel(this._description, description); + this.notify('description'); + } +});