diff --git a/data/Makefile.am b/data/Makefile.am
index d282e8328..68dcc1d04 100644
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -43,6 +43,10 @@ dist_theme_DATA = \
theme/separator-white.png \
theme/single-view-active.svg \
theme/single-view.svg \
+ theme/toggle-off-us.svg \
+ theme/toggle-off-intl.svg \
+ theme/toggle-on-us.svg \
+ theme/toggle-on-intl.svg \
theme/ws-switch-arrow-left.svg \
theme/ws-switch-arrow-right.svg
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index e9c7fe55e..cd70ec393 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -149,17 +149,23 @@ StTooltip {
}
/* Switches (to be used in menus) */
-.switch {
- border-radius: 5px;
- padding: 0px 0.2em;
+.toggle-switch {
+ width: 4.5em;
+ height: 1.5em;
}
-.switch-label {
- font-size: 0.8em;
- padding: 2px 0.1em; /* account for border if checked */
+
+.toggle-switch-us {
+ background-image: url("toggle-off-us.svg");
}
-.switch-label:checked {
- border-radius: 4px;
- padding: 0px 0.3em;
+.toggle-switch-us:checked {
+ background-image: url("toggle-on-us.svg");
+}
+
+.toggle-switch-intl {
+ background-image: url("toggle-off-intl.svg");
+}
+.toggle-switch-intl:checked {
+ background-image: url("toggle-on-intl.svg");
}
/* Panel */
diff --git a/data/theme/toggle-off-intl.svg b/data/theme/toggle-off-intl.svg
new file mode 100644
index 000000000..b3d9ada29
--- /dev/null
+++ b/data/theme/toggle-off-intl.svg
@@ -0,0 +1,126 @@
+
+
+
+
diff --git a/data/theme/toggle-off-us.svg b/data/theme/toggle-off-us.svg
new file mode 100644
index 000000000..12167d64e
--- /dev/null
+++ b/data/theme/toggle-off-us.svg
@@ -0,0 +1,138 @@
+
+
+
+
diff --git a/data/theme/toggle-on-intl.svg b/data/theme/toggle-on-intl.svg
new file mode 100644
index 000000000..409fd736a
--- /dev/null
+++ b/data/theme/toggle-on-intl.svg
@@ -0,0 +1,122 @@
+
+
+
+
diff --git a/data/theme/toggle-on-us.svg b/data/theme/toggle-on-us.svg
new file mode 100644
index 000000000..807d85e78
--- /dev/null
+++ b/data/theme/toggle-on-us.svg
@@ -0,0 +1,128 @@
+
+
+
+
diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 491e50107..64232688b 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -23,30 +23,21 @@ function Switch() {
Switch.prototype = {
_init: function(state) {
- this.actor = new St.BoxLayout({ style_class: 'switch' });
- // Translators: the "ON" and "OFF" strings are used in the
- // toggle switches in the status area menus, and must be SHORT.
- // If you don't have suitable short words, consider initials,
- // "0"/"1", "⚪"/"⚫", etc.
- this._on = new St.Label({ style_class: 'switch-label', text: _("ON") });
- this._off = new St.Label({ style_class: 'switch-label', text: _("OFF") });
- this.actor.add(this._on, { fill: true });
- this.actor.add(this._off, { fill: true });
+ this.actor = new St.Bin({ style_class: 'toggle-switch' });
+ // Translators: this MUST be either "toggle-switch-us"
+ // (for toggle switches containing the English words
+ // "ON" and "OFF") or "toggle-switch-intl" (for toggle
+ // switches containing "◯" and "|"). Other values will
+ // simply result in invisible toggle switches.
+ this.actor.add_style_class_name(_("toggle-switch-us"));
this.setToggleState(state);
},
setToggleState: function(state) {
- if (state) {
- this._on.remove_style_pseudo_class('checked');
- this._on.text = _("ON");
- this._off.add_style_pseudo_class('checked');
- this._off.text = ' ';
- } else {
- this._off.remove_style_pseudo_class('checked');
- this._off.text = _("OFF");
- this._on.add_style_pseudo_class('checked');
- this._on.text = ' ';
- }
+ if (state)
+ this.actor.add_style_pseudo_class('checked');
+ else
+ this.actor.remove_style_pseudo_class('checked');
this.state = state;
},
@@ -188,8 +179,8 @@ PopupSwitchMenuItem.prototype = {
this._switch = new Switch(this.active);
this._box = new St.BoxLayout({ style_class: 'popup-switch-menu-item' });
- this._box.add(this.label,{ expand: true });
- this._box.add(this._switch.actor);
+ this._box.add(this.label, { expand: true, y_fill: false });
+ this._box.add(this._switch.actor, { y_fill: false });
this.actor.set_child(this._box);
this.connect('activate', Lang.bind(this,function(from) {