🔧 Tweak button layout
This commit is contained in:
Simon Schneegans
@@ -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('<b>' + effect.getLabel() + '</b>');
|
||||
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));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,50 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
version="1.1"
|
||||
id="svg1805"
|
||||
sodipodi:docname="bmw-window-close-symbolic.svg"
|
||||
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1809" />
|
||||
<sodipodi:namedview
|
||||
id="namedview1807"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
showgrid="true"
|
||||
inkscape:zoom="48.753581"
|
||||
inkscape:cx="8.4096386"
|
||||
inkscape:cy="9.3736703"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1131"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg1805">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid1893" />
|
||||
</sodipodi:namedview>
|
||||
<path
|
||||
d="M 2.994,1.008 C 1.994,1.008 0.988,2 0.988,3 V 15.02 L 7,15 V 13 L 2.988,13.02 V 5 H 13 v 2 h 2 V 3 C 15,2 13.994,1.008 12.994,1.008 Z"
|
||||
font-family="sans-serif"
|
||||
font-weight="400"
|
||||
overflow="visible"
|
||||
style="text-indent:0;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;isolation:auto;mix-blend-mode:normal;fill:#2e3436"
|
||||
id="path1799"
|
||||
sodipodi:nodetypes="ssccccccccsss" />
|
||||
<path
|
||||
d="m 8,8 h 1 0.03125 c 0.253906,0.011719 0.511719,0.128906 0.6875,0.3125 L 12,10.59375 14.3125,8.3125 C 14.578125,8.082031 14.757812,8.007812 15,8 h 1 v 1 c 0,0.285156 -0.03516,0.550781 -0.25,0.75 l -2.28125,2.28125 2.25,2.25 C 15.90625,14.46875 16,14.734375 16,15 v 1 h -1 c -0.265625,0 -0.53125,-0.09375 -0.71875,-0.28125 L 12,13.4375 9.71875,15.71875 C 9.53125,15.90625 9.265625,16 9,16 H 8 v -1 c 0,-0.265625 0.09375,-0.53125 0.28125,-0.71875 l 2.28125,-2.25 L 8.28125,9.75 C 8.070312,9.554688 7.976562,9.28125 8,9 Z m 0,0"
|
||||
fill="#222222"
|
||||
id="path3029"
|
||||
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#2e3436;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1,49 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
version="1.1"
|
||||
id="svg1805"
|
||||
sodipodi:docname="window-new-symbolic.svg"
|
||||
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1809" />
|
||||
<sodipodi:namedview
|
||||
id="namedview1807"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
showgrid="true"
|
||||
inkscape:zoom="56.75"
|
||||
inkscape:cx="8"
|
||||
inkscape:cy="7.5770925"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1131"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg1805">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid1893" />
|
||||
</sodipodi:namedview>
|
||||
<path
|
||||
d="M 2.994,1.008 C 1.994,1.008 0.988,2 0.988,3 V 15.02 H 6 v -2 H 2.988 V 5 H 13 v 1 h 2 V 3 C 15,2 13.994,1.008 12.994,1.008 Z"
|
||||
font-family="sans-serif"
|
||||
font-weight="400"
|
||||
overflow="visible"
|
||||
style="text-indent:0;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;isolation:auto;mix-blend-mode:normal;fill:#2e3436"
|
||||
id="path1799"
|
||||
sodipodi:nodetypes="ssccccccccsss" />
|
||||
<path
|
||||
d="m 10,7 v 3 H 7 v 3 h 3 v 3 h 3 v -3 h 3 V 10 H 13 V 7 Z"
|
||||
id="path1801"
|
||||
style="fill:#2e3436;stroke-width:1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -40,7 +40,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
|
||||
<child>
|
||||
<object class="GtkLabel">
|
||||
<property name="halign">start</property>
|
||||
<property name="label" translatable="yes">Preview this Effect</property>
|
||||
<property name="label" translatable="yes">Preview this effect</property>
|
||||
</object>
|
||||
</child>
|
||||
</object>
|
||||
|
||||
@@ -8,9 +8,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
|
||||
<interface domain="burn-my-windows">
|
||||
<requires lib="gtk" version="4.0" />
|
||||
|
||||
<menu id="close-effect-menu"></menu>
|
||||
<menu id="open-effect-menu"></menu>
|
||||
|
||||
<object class="GtkMenuButton" id="menu-button">
|
||||
<property name="menu-model">main-menu</property>
|
||||
<property name="icon-name">open-menu-symbolic</property>
|
||||
@@ -19,7 +16,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
|
||||
<object class="GtkBox" id="general-prefs">
|
||||
<property name="orientation">vertical</property>
|
||||
<property name="margin-top">60</property>
|
||||
<property name="margin-bottom">60</property>
|
||||
<property name="margin-bottom">20</property>
|
||||
|
||||
<child>
|
||||
<object class="GtkImage">
|
||||
|
||||
Reference in New Issue
Block a user