diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml
index b23b960e9..db1f4e91d 100644
--- a/data/gnome-shell-theme.gresource.xml
+++ b/data/gnome-shell-theme.gresource.xml
@@ -10,10 +10,6 @@
pad-osd.css
process-working-light.svg
process-working-dark.svg
- toggle-off.svg
- toggle-off-light.svg
- toggle-on.svg
- toggle-on-light.svg
workspace-placeholder.svg
diff --git a/data/theme/gnome-shell-sass/widgets/_switches.scss b/data/theme/gnome-shell-sass/widgets/_switches.scss
index ef8a7b636..31e4de05a 100644
--- a/data/theme/gnome-shell-sass/widgets/_switches.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switches.scss
@@ -1,18 +1,40 @@
/* Switches */
-// these are equal to the size of the SVG assets
-$switch_height: 26px;
$switch_width: 46px;
+$switch_handle_size: 20px;
.toggle-switch {
- color: $fg_color;
- height: $switch_height;
width: $switch_width;
- background-size: contain;
- background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off-light.svg"),url("resource:///org/gnome/shell/theme/toggle-off.svg"));
- &:checked {
- background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg"));
+ border-radius: $forced_circular_radius;
+ transition-duration: 100ms;
+ color: $fg_color;
+
+ @if $contrast == 'high' {
+ background: transparentize(if($variant == 'light', black, white), .7);
+ } @else {
+ background: transparentize(if($variant == 'light', black, white), .85);
}
- & StIcon {icon-size: $base_icon_size;}
+ StIcon {
+ icon-size: $base_icon_size;
+ }
+
+ .handle {
+ margin: 3px;
+ width: $switch_handle_size;
+ height: $switch_handle_size;
+ border-radius: $forced_circular_radius;
+ background: if($variant == 'light', white, mix(white, $bg_color, 80%));
+ box-shadow: 0 2px 4px transparentize(black, .8);
+ transition-duration: 100ms;
+ }
+
+ &:checked {
+ background: $selected_bg_color;
+ color: $selected_fg_color;
+
+ .handle {
+ background: white;
+ }
+ }
}
diff --git a/data/theme/toggle-off-light.svg b/data/theme/toggle-off-light.svg
deleted file mode 100644
index aa2385bcf..000000000
--- a/data/theme/toggle-off-light.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/data/theme/toggle-off.svg b/data/theme/toggle-off.svg
deleted file mode 100644
index 43cb59fc4..000000000
--- a/data/theme/toggle-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/data/theme/toggle-on-light.svg b/data/theme/toggle-on-light.svg
deleted file mode 100644
index 778f922c8..000000000
--- a/data/theme/toggle-on-light.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/data/theme/toggle-on.svg b/data/theme/toggle-on.svg
deleted file mode 100644
index 43c221ed7..000000000
--- a/data/theme/toggle-on.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 84455ddc0..a37484bbd 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -336,21 +336,24 @@ export const Switch = GObject.registerClass({
GObject.ParamFlags.READWRITE,
false),
},
-}, class Switch extends St.Bin {
+}, class Switch extends St.Widget {
_init(state) {
this._state = false;
+ super._init({
+ style_class: 'toggle-switch',
+ accessible_role: Atk.Role.CHECK_BOX,
+ });
+
const box = new St.BoxLayout({
x_expand: true,
y_expand: true,
+ constraints: new Clutter.BindConstraint({
+ source: this,
+ coordinate: Clutter.BindCoordinate.SIZE,
+ }),
});
-
- super._init({
- style_class: 'toggle-switch',
- child: box,
- accessible_role: Atk.Role.CHECK_BOX,
- state,
- });
+ this.add_child(box);
this._onIcon = new St.Icon({
icon_name: 'switch-on-symbolic',
@@ -368,6 +371,20 @@ export const Switch = GObject.registerClass({
});
box.add_child(this._offIcon);
+ this._handle = new St.Widget({
+ style_class: 'handle',
+ y_align: Clutter.ActorAlign.CENTER,
+ x_align: Clutter.ActorAlign.START,
+ x_expand: true,
+ constraints: new Clutter.BindConstraint({
+ source: this,
+ coordinate: Clutter.BindCoordinate.SIZE,
+ }),
+ });
+ this.add_child(this._handle);
+
+ this.state = state;
+
this._a11ySettings = new Gio.Settings({
schema_id: 'org.gnome.desktop.a11y.interface',
});
@@ -375,8 +392,6 @@ export const Switch = GObject.registerClass({
this._a11ySettings.connectObject('changed::show-status-shapes',
() => this._updateIconOpacity(),
this);
- this.connect('notify::state',
- () => this._updateIconOpacity());
this._updateIconOpacity();
}
@@ -384,10 +399,8 @@ export const Switch = GObject.registerClass({
const activeOpacity = this._a11ySettings.get_boolean('show-status-shapes')
? 255. : 0.;
- this._onIcon.opacity = this.state
- ? activeOpacity : 0.;
- this._offIcon.opacity = this.state
- ? 0. : activeOpacity;
+ this._onIcon.opacity = activeOpacity;
+ this._offIcon.opacity = activeOpacity;
}
get state() {
@@ -398,10 +411,13 @@ export const Switch = GObject.registerClass({
if (this._state === state)
return;
- if (state)
+ if (state) {
this.add_style_pseudo_class('checked');
- else
+ this._handle.x_align = Clutter.ActorAlign.END;
+ } else {
this.remove_style_pseudo_class('checked');
+ this._handle.x_align = Clutter.ActorAlign.START;
+ }
this._state = state;
this.notify('state');