From 463722131d0b84f08c39b9314dd514b7826366fe Mon Sep 17 00:00:00 2001 From: Simon Schneegans Date: Mon, 7 Nov 2022 05:25:50 +0100 Subject: [PATCH] :wrench: Tweak button layout --- prefs.js | 88 ++++++++++++++----- ...-symbolic.svg => bmw-preview-symbolic.svg} | 0 .../actions/bmw-window-close-symbolic.svg | 50 +++++++++++ .../actions/bmw-window-open-symbolic.svg | 49 +++++++++++ resources/ui/gtk3/effectPage.ui | 2 +- resources/ui/gtk4/prefs.ui | 5 +- 6 files changed, 165 insertions(+), 29 deletions(-) rename resources/img/scalable/actions/{eye-open-symbolic.svg => bmw-preview-symbolic.svg} (100%) create mode 100644 resources/img/scalable/actions/bmw-window-close-symbolic.svg create mode 100644 resources/img/scalable/actions/bmw-window-open-symbolic.svg diff --git a/prefs.js b/prefs.js index 638ebe7..0903c0b 100644 --- a/prefs.js +++ b/prefs.js @@ -116,23 +116,25 @@ var PreferencesDialog = class PreferencesDialog { const generalPrefs = this._builder.get_object('general-prefs'); this.gtkBoxAppend(this._widget, generalPrefs); - // Then add a preferences group with expander rows. - const group = new Adw.PreferencesGroup({title: _('Effect Options')}); + // Then add a preferences group for the effect expander rows. + const group = new Adw.PreferencesGroup({title: _('Effects')}); this.gtkBoxAppend(this._widget, group); // This stores all expander rows for the effects. We use this to implement the // accordion-functionality of the effect settings. this._effectRows = []; + // Now add all the rows. this._ALL_EFFECTS.forEach(effect => { const [minMajor, minMinor] = effect.getMinShellVersion(); if (utils.shellVersionIsAtLeast(minMajor, minMinor)) { const row = effect.getPreferences(this); - row.set_title(effect.getLabel()); + row.set_title('' + effect.getLabel() + ''); + row.set_use_markup(true); // Un-expand any previously expanded effect row. This way we ensure that there // is only one expanded row at any time. - row.connect('notify::expanded', (currentRow) => { + row.connect('notify::expanded', currentRow => { if (currentRow.get_expanded()) { this._effectRows.forEach(row => { if (row != currentRow) { @@ -142,17 +144,53 @@ var PreferencesDialog = class PreferencesDialog { } }); - // Show a preview of the effect with a button in the effect row. - const previewButton = Gtk.Button.new_from_icon_name('eye-open-symbolic'); + // Add three buttons on the right. + const box = new Gtk.Box(); + box.set_spacing(8); + + // The preview button. + const previewButton = Gtk.Button.new_from_icon_name('bmw-preview-symbolic'); previewButton.add_css_class('circular'); - previewButton.set_tooltip_text(_('Preview this Effect')); + previewButton.add_css_class('flat'); + previewButton.set_tooltip_text(_('Preview this effect')); previewButton.set_valign(Gtk.Align.CENTER); - row.add_prefix(previewButton); + box.append(previewButton); previewButton.connect('clicked', () => { this._previewEffect(effect); }); + // Now add the two toggle buttons for enabling and disabling the effect. + const addToggle = (action, tooltip) => { + const button = Gtk.ToggleButton.new(); + button.set_action_name( + `${action}-effects.${effect.getNick()}-${action}-effect`); + button.set_child( + Gtk.Image.new_from_icon_name(`bmw-window-${action}-symbolic`)); + button.set_tooltip_text(tooltip); + button.set_valign(Gtk.Align.CENTER); + + // We switch some class when the button is enabled in order to make it more + // apparent which effects are currently in use. + button.add_css_class('circular'); + button.add_css_class('flat'); + button.connect('toggled', button => { + if (button.active) { + button.add_css_class('suggested-action'); + button.remove_css_class('flat'); + } else { + button.remove_css_class('suggested-action'); + button.add_css_class('flat'); + } + }); + + box.append(button); + }; + + addToggle('open', _('Use this effect when opening windows')); + addToggle('close', _('Use this effect when closing windows')); + + row.add_action(box); group.add(row); this._effectRows.push(row); @@ -294,44 +332,46 @@ var PreferencesDialog = class PreferencesDialog { // Populate the open-effects drop-down menu. { - const menu = this._builder.get_object('open-effect-menu'); const group = Gio.SimpleActionGroup.new(); window.insert_action_group('open-effects', group); this._ALL_EFFECTS.forEach(effect => { const [minMajor, minMinor] = effect.getMinShellVersion(); if (utils.shellVersionIsAtLeast(minMajor, minMinor)) { - const nick = effect.getNick(); - const label = effect.getLabel(); - const actionName = nick + '-open-effect'; - const fullName = 'open-effects.' + actionName; - - const action = this._settings.create_action(actionName); + const actionName = effect.getNick() + '-open-effect'; + const action = this._settings.create_action(actionName); group.add_action(action); - menu.append_item(Gio.MenuItem.new(label, fullName)); + // The menu only exists on GTK3. On GTK4, individual ToggleButtons are used + // for triggering the above actions. + if (!utils.isGTK4()) { + const menu = this._builder.get_object('open-effect-menu'); + const label = effect.getLabel(); + menu.append_item(Gio.MenuItem.new(label, 'open-effects.' + actionName)); + } } }); } // Populate the close-effects drop-down menu. { - const menu = this._builder.get_object('close-effect-menu'); const group = Gio.SimpleActionGroup.new(); window.insert_action_group('close-effects', group); this._ALL_EFFECTS.forEach(effect => { const [minMajor, minMinor] = effect.getMinShellVersion(); if (utils.shellVersionIsAtLeast(minMajor, minMinor)) { - const nick = effect.getNick(); - const label = effect.getLabel(); - const actionName = nick + '-close-effect'; - const fullName = 'close-effects.' + actionName; - - const action = this._settings.create_action(actionName); + const actionName = effect.getNick() + '-close-effect'; + const action = this._settings.create_action(actionName); group.add_action(action); - menu.append_item(Gio.MenuItem.new(label, fullName)); + // The menu only exists on GTK3. On GTK4, individual ToggleButtons are used + // for triggering the above actions. + if (!utils.isGTK4()) { + const menu = this._builder.get_object('close-effect-menu'); + const label = effect.getLabel(); + menu.append_item(Gio.MenuItem.new(label, 'close-effects.' + actionName)); + } } }); } diff --git a/resources/img/scalable/actions/eye-open-symbolic.svg b/resources/img/scalable/actions/bmw-preview-symbolic.svg similarity index 100% rename from resources/img/scalable/actions/eye-open-symbolic.svg rename to resources/img/scalable/actions/bmw-preview-symbolic.svg diff --git a/resources/img/scalable/actions/bmw-window-close-symbolic.svg b/resources/img/scalable/actions/bmw-window-close-symbolic.svg new file mode 100644 index 0000000..4103cc8 --- /dev/null +++ b/resources/img/scalable/actions/bmw-window-close-symbolic.svg @@ -0,0 +1,50 @@ + + + + + + + + + diff --git a/resources/img/scalable/actions/bmw-window-open-symbolic.svg b/resources/img/scalable/actions/bmw-window-open-symbolic.svg new file mode 100644 index 0000000..f40dbe5 --- /dev/null +++ b/resources/img/scalable/actions/bmw-window-open-symbolic.svg @@ -0,0 +1,49 @@ + + + + + + + + + diff --git a/resources/ui/gtk3/effectPage.ui b/resources/ui/gtk3/effectPage.ui index 26dabd3..927a8d2 100644 --- a/resources/ui/gtk3/effectPage.ui +++ b/resources/ui/gtk3/effectPage.ui @@ -40,7 +40,7 @@ SPDX-License-Identifier: GPL-3.0-or-later start - Preview this Effect + Preview this effect diff --git a/resources/ui/gtk4/prefs.ui b/resources/ui/gtk4/prefs.ui index b32f334..ba9e1af 100644 --- a/resources/ui/gtk4/prefs.ui +++ b/resources/ui/gtk4/prefs.ui @@ -8,9 +8,6 @@ SPDX-License-Identifier: GPL-3.0-or-later - - - main-menu open-menu-symbolic @@ -19,7 +16,7 @@ SPDX-License-Identifier: GPL-3.0-or-later vertical 60 - 60 + 20