From 672ca4a1c500ab5705f277f2f937176101bb5864 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Wed, 10 Jan 2024 19:45:59 +0100 Subject: [PATCH] popupMenu/switch: Use icons for state indicators The indicators are currently part of the background image in the high contrast theme. Using symbolic icons instead allows separating the switch shapes from the high-contrast setting in the future. Part-of: --- data/gnome-shell-icons.gresource.xml | 2 + data/gnome-shell-theme.gresource.xml | 2 - .../scalable/status/switch-off-symbolic.svg | 1 + .../scalable/status/switch-on-symbolic.svg | 64 +++++++++++++++++++ .../gnome-shell-sass/widgets/_switches.scss | 6 +- data/theme/toggle-off-hc.svg | 1 - data/theme/toggle-on-hc.svg | 1 - js/ui/popupMenu.js | 39 +++++++++++ 8 files changed, 107 insertions(+), 9 deletions(-) create mode 100644 data/icons/scalable/status/switch-off-symbolic.svg create mode 100644 data/icons/scalable/status/switch-on-symbolic.svg delete mode 100644 data/theme/toggle-off-hc.svg delete mode 100644 data/theme/toggle-on-hc.svg diff --git a/data/gnome-shell-icons.gresource.xml b/data/gnome-shell-icons.gresource.xml index f2d858db1..46d4b3577 100644 --- a/data/gnome-shell-icons.gresource.xml +++ b/data/gnome-shell-icons.gresource.xml @@ -45,5 +45,7 @@ scalable/status/no-notifications-symbolic.svg scalable/status/screen-privacy-disabled-symbolic.svg scalable/status/screen-privacy-symbolic.svg + scalable/status/switch-on-symbolic.svg + scalable/status/switch-off-symbolic.svg diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml index 0ce8cca93..4501c3195 100644 --- a/data/gnome-shell-theme.gresource.xml +++ b/data/gnome-shell-theme.gresource.xml @@ -17,10 +17,8 @@ process-working-light.svg process-working-dark.svg toggle-off.svg - toggle-off-hc.svg toggle-off-light.svg toggle-on.svg - toggle-on-hc.svg toggle-on-light.svg workspace-placeholder.svg diff --git a/data/icons/scalable/status/switch-off-symbolic.svg b/data/icons/scalable/status/switch-off-symbolic.svg new file mode 100644 index 000000000..28e36aa61 --- /dev/null +++ b/data/icons/scalable/status/switch-off-symbolic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data/icons/scalable/status/switch-on-symbolic.svg b/data/icons/scalable/status/switch-on-symbolic.svg new file mode 100644 index 000000000..0f0e18fb6 --- /dev/null +++ b/data/icons/scalable/status/switch-on-symbolic.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/data/theme/gnome-shell-sass/widgets/_switches.scss b/data/theme/gnome-shell-sass/widgets/_switches.scss index d8a68a7df..0364d4c0c 100644 --- a/data/theme/gnome-shell-sass/widgets/_switches.scss +++ b/data/theme/gnome-shell-sass/widgets/_switches.scss @@ -14,9 +14,5 @@ $switch_width: 48px; background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg")); } - @if $contrast == 'high' { - background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg"); - &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); } - } - + & StIcon {icon-size: $base_icon_size;} } diff --git a/data/theme/toggle-off-hc.svg b/data/theme/toggle-off-hc.svg deleted file mode 100644 index 26528005f..000000000 --- a/data/theme/toggle-off-hc.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/data/theme/toggle-on-hc.svg b/data/theme/toggle-on-hc.svg deleted file mode 100644 index 2d553c649..000000000 --- a/data/theme/toggle-on-hc.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js index 1204978e7..9886649ab 100644 --- a/js/ui/popupMenu.js +++ b/js/ui/popupMenu.js @@ -340,11 +340,50 @@ export const Switch = GObject.registerClass({ _init(state) { this._state = false; + const box = new St.BoxLayout({ + x_expand: true, + y_expand: true, + }); + super._init({ style_class: 'toggle-switch', + child: box, accessible_role: Atk.Role.CHECK_BOX, state, }); + + this._onIcon = new St.Icon({ + icon_name: 'switch-on-symbolic', + x_expand: true, + x_align: Clutter.ActorAlign.CENTER, + y_align: Clutter.ActorAlign.CENTER, + }); + box.add_child(this._onIcon); + + this._offIcon = new St.Icon({ + icon_name: 'switch-off-symbolic', + x_expand: true, + x_align: Clutter.ActorAlign.CENTER, + y_align: Clutter.ActorAlign.CENTER, + }); + box.add_child(this._offIcon); + + St.Settings.get().connectObject('notify::high-contrast', + () => this._updateIconOpacity(), + this); + this.connect('notify::state', + () => this._updateIconOpacity()); + this._updateIconOpacity(); + } + + _updateIconOpacity() { + const activeOpacity = St.Settings.get().high_contrast + ? 255. : 0.; + + this._onIcon.opacity = this.state + ? activeOpacity : 0.; + this._offIcon.opacity = this.state + ? 0. : activeOpacity; } get state() {