diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-27 15:07:22 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-27 15:07:22 +0000 |
commit | f9d480cfe50ca1d7a0f0b5a2b8bb9932962bfbe7 (patch) | |
tree | ce9e8db2d4e8799780fa72ae8f1953039373e2ee /js/ui/dialog.js | |
parent | Initial commit. (diff) | |
download | gnome-shell-upstream.tar.xz gnome-shell-upstream.zip |
Adding upstream version 3.38.6.upstream/3.38.6upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | js/ui/dialog.js | 368 |
1 files changed, 368 insertions, 0 deletions
diff --git a/js/ui/dialog.js b/js/ui/dialog.js new file mode 100644 index 0000000..f2b6fee --- /dev/null +++ b/js/ui/dialog.js @@ -0,0 +1,368 @@ +// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*- +/* exported Dialog, MessageDialogContent, ListSection, ListSectionItem */ + +const { Clutter, GLib, GObject, Meta, Pango, St } = imports.gi; + +function _setLabel(label, value) { + label.set({ + text: value || '', + visible: value !== null, + }); +} + +var Dialog = GObject.registerClass( +class Dialog extends St.Widget { + _init(parentActor, styleClass) { + super._init({ layout_manager: new Clutter.BinLayout() }); + this.connect('destroy', this._onDestroy.bind(this)); + + this._initialKeyFocus = null; + this._initialKeyFocusDestroyId = 0; + this._pressedKey = null; + this._buttonKeys = {}; + this._createDialog(); + this.add_child(this._dialog); + + if (styleClass != null) + this._dialog.add_style_class_name(styleClass); + + this._parentActor = parentActor; + this._eventId = this._parentActor.connect('event', this._modalEventHandler.bind(this)); + this._parentActor.add_child(this); + } + + _createDialog() { + this._dialog = new St.BoxLayout({ + style_class: 'modal-dialog', + x_align: Clutter.ActorAlign.CENTER, + y_align: Clutter.ActorAlign.CENTER, + vertical: true, + }); + + // modal dialogs are fixed width and grow vertically; set the request + // mode accordingly so wrapped labels are handled correctly during + // size requests. + this._dialog.request_mode = Clutter.RequestMode.HEIGHT_FOR_WIDTH; + this._dialog.set_offscreen_redirect(Clutter.OffscreenRedirect.ALWAYS); + + this.contentLayout = new St.BoxLayout({ + vertical: true, + style_class: 'modal-dialog-content-box', + y_expand: true, + }); + this._dialog.add_child(this.contentLayout); + + this.buttonLayout = new St.Widget({ + layout_manager: new Clutter.BoxLayout({ homogeneous: true }), + }); + this._dialog.add_child(this.buttonLayout); + } + + makeInactive() { + if (this._eventId != 0) + this._parentActor.disconnect(this._eventId); + this._eventId = 0; + + this.buttonLayout.get_children().forEach(c => c.set_reactive(false)); + } + + _onDestroy() { + this.makeInactive(); + } + + _modalEventHandler(actor, event) { + if (event.type() == Clutter.EventType.KEY_PRESS) { + this._pressedKey = event.get_key_symbol(); + } else if (event.type() == Clutter.EventType.KEY_RELEASE) { + let pressedKey = this._pressedKey; + this._pressedKey = null; + + let symbol = event.get_key_symbol(); + if (symbol != pressedKey) + return Clutter.EVENT_PROPAGATE; + + let buttonInfo = this._buttonKeys[symbol]; + if (!buttonInfo) + return Clutter.EVENT_PROPAGATE; + + let { button, action } = buttonInfo; + + if (action && button.reactive) { + action(); + return Clutter.EVENT_STOP; + } + } + + return Clutter.EVENT_PROPAGATE; + } + + _setInitialKeyFocus(actor) { + if (this._initialKeyFocus) + this._initialKeyFocus.disconnect(this._initialKeyFocusDestroyId); + + this._initialKeyFocus = actor; + + this._initialKeyFocusDestroyId = actor.connect('destroy', () => { + this._initialKeyFocus = null; + this._initialKeyFocusDestroyId = 0; + }); + } + + get initialKeyFocus() { + return this._initialKeyFocus || this; + } + + addButton(buttonInfo) { + let { label, action, key } = buttonInfo; + let isDefault = buttonInfo['default']; + let keys; + + if (key) + keys = [key]; + else if (isDefault) + keys = [Clutter.KEY_Return, Clutter.KEY_KP_Enter, Clutter.KEY_ISO_Enter]; + else + keys = []; + + let button = new St.Button({ + style_class: 'modal-dialog-linked-button', + button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE, + reactive: true, + can_focus: true, + x_expand: true, + y_expand: true, + label, + }); + button.connect('clicked', () => action()); + + buttonInfo['button'] = button; + + if (isDefault) + button.add_style_pseudo_class('default'); + + if (this._initialKeyFocus == null || isDefault) + this._setInitialKeyFocus(button); + + for (let i in keys) + this._buttonKeys[keys[i]] = buttonInfo; + + this.buttonLayout.add_actor(button); + + return button; + } + + clearButtons() { + this.buttonLayout.destroy_all_children(); + this._buttonKeys = {}; + } +}); + +var MessageDialogContent = GObject.registerClass({ + Properties: { + '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 MessageDialogContent extends St.BoxLayout { + _init(params) { + this._title = new St.Label({ style_class: 'message-dialog-title' }); + this._description = new St.Label({ style_class: 'message-dialog-description' }); + + this._description.clutter_text.ellipsize = Pango.EllipsizeMode.NONE; + this._description.clutter_text.line_wrap = true; + + let defaultParams = { + style_class: 'message-dialog-content', + x_expand: true, + vertical: true, + }; + super._init(Object.assign(defaultParams, params)); + + this.connect('notify::size', this._updateTitleStyle.bind(this)); + this.connect('destroy', this._onDestroy.bind(this)); + + this.add_child(this._title); + this.add_child(this._description); + } + + _onDestroy() { + if (this._updateTitleStyleLater) { + Meta.later_remove(this._updateTitleStyleLater); + delete this._updateTitleStyleLater; + } + } + + get title() { + return this._title.text; + } + + get description() { + return this._description.text; + } + + _updateTitleStyle() { + if (!this._title.mapped) + return; + + this._title.ensure_style(); + const [, titleNatWidth] = this._title.get_preferred_width(-1); + + if (titleNatWidth > this.width) { + if (this._updateTitleStyleLater) + return; + + this._updateTitleStyleLater = Meta.later_add(Meta.LaterType.BEFORE_REDRAW, () => { + this._updateTitleStyleLater = 0; + this._title.add_style_class_name('lightweight'); + return GLib.SOURCE_REMOVE; + }); + } + + } + + set title(title) { + if (this._title.text === title) + return; + + _setLabel(this._title, title); + + this._title.remove_style_class_name('lightweight'); + this._updateTitleStyle(); + + this.notify('title'); + } + + set description(description) { + if (this._description.text === description) + return; + + _setLabel(this._description, description); + 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'); + } +}); |