From 4680178692306b7455b4a69dde75c4fed0cf8235 Mon Sep 17 00:00:00 2001 From: l3nn4rt Date: Mon, 9 Sep 2019 18:39:43 +0200 Subject: [PATCH 1/8] Make sections more clear --- net_speed_status_icon.js | 37 ++++++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/net_speed_status_icon.js b/net_speed_status_icon.js index 6aeafd0..0d08a57 100644 --- a/net_speed_status_icon.js +++ b/net_speed_status_icon.js @@ -42,32 +42,39 @@ const NetSpeedStatusIcon = GObject.registerClass(class NetSpeedStatusIcon extend { this._net_speed = net_speed; super._init(0.0); + + // extension button this._box = new St.BoxLayout(); - this._icon_box = new St.BoxLayout(); - this._icon = this._get_icon(this._net_speed.get_device_type(this._net_speed.getDevice())); - this._upicon = new St.Label({ text: "⬆", style_class: 'ns-icon', y_align: Clutter.ActorAlign.CENTER}); - this._downicon = new St.Label({ text: "⬇", style_class: 'ns-icon', y_align: Clutter.ActorAlign.CENTER}); - this._sum = new St.Label({ text: "---", style_class: 'ns-label', y_align: Clutter.ActorAlign.CENTER}); - this._sumunit = new St.Label({ text: "", style_class: 'ns-unit-label', y_align: Clutter.ActorAlign.CENTER}); - this._up = new St.Label({ text: "---", style_class: 'ns-label', y_align: Clutter.ActorAlign.CENTER}); - this._upunit = new St.Label({ text: "", style_class: 'ns-unit-label', y_align: Clutter.ActorAlign.CENTER}); + this.actor.add_actor(this._box); + this.actor.connect('button-release-event', Lang.bind(this, this._toggle_showsum)); + + // download this._down = new St.Label({ text: "---", style_class: 'ns-label', y_align: Clutter.ActorAlign.CENTER}); this._downunit = new St.Label({ text: "", style_class: 'ns-unit-label', y_align: Clutter.ActorAlign.CENTER}); - - this._box.add_actor(this._sum); - this._box.add_actor(this._sumunit); - + this._downicon = new St.Label({ text: "⬇", style_class: 'ns-icon', y_align: Clutter.ActorAlign.CENTER}); this._box.add_actor(this._down); this._box.add_actor(this._downunit); this._box.add_actor(this._downicon); + // upload + this._up = new St.Label({ text: "---", style_class: 'ns-label', y_align: Clutter.ActorAlign.CENTER}); + this._upunit = new St.Label({ text: "", style_class: 'ns-unit-label', y_align: Clutter.ActorAlign.CENTER}); + this._upicon = new St.Label({ text: "⬆", style_class: 'ns-icon', y_align: Clutter.ActorAlign.CENTER}); this._box.add_actor(this._up); this._box.add_actor(this._upunit); this._box.add_actor(this._upicon); - this._box.add_actor(this._icon_box); + + // download + upload + this._sum = new St.Label({ text: "---", style_class: 'ns-label', y_align: Clutter.ActorAlign.CENTER}); + this._sumunit = new St.Label({ text: "", style_class: 'ns-unit-label', y_align: Clutter.ActorAlign.CENTER}); + this._box.add_actor(this._sum); + this._box.add_actor(this._sumunit); + + // interface icon + this._icon_box = new St.BoxLayout(); + this._icon = this._get_icon(this._net_speed.get_device_type(this._net_speed.getDevice())); this._icon_box.add_actor(this._icon); - this.actor.add_actor(this._box); - this.actor.connect('button-release-event', Lang.bind(this, this._toggle_showsum)); + this._box.add_actor(this._icon_box); // Add pref luncher this._pref = new St.Button({ child: this._get_icon("pref")}); From 17575dea8291ea5e21a2697d88525c45a9698e1e Mon Sep 17 00:00:00 2001 From: l3nn4rt Date: Mon, 9 Sep 2019 18:49:58 +0200 Subject: [PATCH 2/8] Add a box for each metric (download, upload and sum) and a superbox The new boxes are: - `this._download_box`: contains all download section items - `this._upload_box`: contains all upload section items - `this._sum_box`: contains all sum (download+upload) section items - `this._metrics_box`: contains all the previous ones The new tree layout is: - box - metrics_box - download_box - down - downunit - downicon - upload_box - up - upunit - upicon - sumbox - sum - sumunit - icon_box - icon --- net_speed_status_icon.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/net_speed_status_icon.js b/net_speed_status_icon.js index 0d08a57..35b8e87 100644 --- a/net_speed_status_icon.js +++ b/net_speed_status_icon.js @@ -49,26 +49,36 @@ const NetSpeedStatusIcon = GObject.registerClass(class NetSpeedStatusIcon extend this.actor.connect('button-release-event', Lang.bind(this, this._toggle_showsum)); // download + this._download_box = new St.BoxLayout(); this._down = new St.Label({ text: "---", style_class: 'ns-label', y_align: Clutter.ActorAlign.CENTER}); this._downunit = new St.Label({ text: "", style_class: 'ns-unit-label', y_align: Clutter.ActorAlign.CENTER}); this._downicon = new St.Label({ text: "⬇", style_class: 'ns-icon', y_align: Clutter.ActorAlign.CENTER}); - this._box.add_actor(this._down); - this._box.add_actor(this._downunit); - this._box.add_actor(this._downicon); + this._download_box.add_actor(this._down); + this._download_box.add_actor(this._downunit); + this._download_box.add_actor(this._downicon); // upload + this._upload_box = new St.BoxLayout(); this._up = new St.Label({ text: "---", style_class: 'ns-label', y_align: Clutter.ActorAlign.CENTER}); this._upunit = new St.Label({ text: "", style_class: 'ns-unit-label', y_align: Clutter.ActorAlign.CENTER}); this._upicon = new St.Label({ text: "⬆", style_class: 'ns-icon', y_align: Clutter.ActorAlign.CENTER}); - this._box.add_actor(this._up); - this._box.add_actor(this._upunit); - this._box.add_actor(this._upicon); + this._upload_box.add_actor(this._up); + this._upload_box.add_actor(this._upunit); + this._upload_box.add_actor(this._upicon); // download + upload + this._sum_box = new St.BoxLayout(); this._sum = new St.Label({ text: "---", style_class: 'ns-label', y_align: Clutter.ActorAlign.CENTER}); this._sumunit = new St.Label({ text: "", style_class: 'ns-unit-label', y_align: Clutter.ActorAlign.CENTER}); - this._box.add_actor(this._sum); - this._box.add_actor(this._sumunit); + this._sum_box.add_actor(this._sum); + this._sum_box.add_actor(this._sumunit); + + // metrics box + this._metrics_box = new St.BoxLayout(); + this._metrics_box.add_actor(this._download_box); + this._metrics_box.add_actor(this._upload_box); + this._metrics_box.add_actor(this._sum_box); + this._box.add_actor(this._metrics_box); // interface icon this._icon_box = new St.BoxLayout(); From 372c33b2c492ef78689efe9259ef27d822ef0251 Mon Sep 17 00:00:00 2001 From: l3nn4rt Date: Mon, 9 Sep 2019 22:45:45 +0200 Subject: [PATCH 3/8] Add style for vertical metrics layout --- net_speed_status_icon.js | 16 ++++++++-------- stylesheet.css | 34 ++++++++++++++++++++++++++++++---- 2 files changed, 38 insertions(+), 12 deletions(-) diff --git a/net_speed_status_icon.js b/net_speed_status_icon.js index 35b8e87..d007a1c 100644 --- a/net_speed_status_icon.js +++ b/net_speed_status_icon.js @@ -50,26 +50,26 @@ const NetSpeedStatusIcon = GObject.registerClass(class NetSpeedStatusIcon extend // download this._download_box = new St.BoxLayout(); - this._down = new St.Label({ text: "---", style_class: 'ns-label', y_align: Clutter.ActorAlign.CENTER}); - this._downunit = new St.Label({ text: "", style_class: 'ns-unit-label', y_align: Clutter.ActorAlign.CENTER}); - this._downicon = new St.Label({ text: "⬇", style_class: 'ns-icon', y_align: Clutter.ActorAlign.CENTER}); + this._down = new St.Label({ text: "---", style_class: 'ns-horizontal-label', y_align: Clutter.ActorAlign.CENTER}); + this._downunit = new St.Label({ text: "", style_class: 'ns-horizontal-unit-label', y_align: Clutter.ActorAlign.CENTER}); + this._downicon = new St.Label({ text: "⬇", style_class: 'ns-horizontal-icon', y_align: Clutter.ActorAlign.CENTER}); this._download_box.add_actor(this._down); this._download_box.add_actor(this._downunit); this._download_box.add_actor(this._downicon); // upload this._upload_box = new St.BoxLayout(); - this._up = new St.Label({ text: "---", style_class: 'ns-label', y_align: Clutter.ActorAlign.CENTER}); - this._upunit = new St.Label({ text: "", style_class: 'ns-unit-label', y_align: Clutter.ActorAlign.CENTER}); - this._upicon = new St.Label({ text: "⬆", style_class: 'ns-icon', y_align: Clutter.ActorAlign.CENTER}); + this._up = new St.Label({ text: "---", style_class: 'ns-horizontal-label', y_align: Clutter.ActorAlign.CENTER}); + this._upunit = new St.Label({ text: "", style_class: 'ns-horizontal-unit-label', y_align: Clutter.ActorAlign.CENTER}); + this._upicon = new St.Label({ text: "⬆", style_class: 'ns-horizontal-icon', y_align: Clutter.ActorAlign.CENTER}); this._upload_box.add_actor(this._up); this._upload_box.add_actor(this._upunit); this._upload_box.add_actor(this._upicon); // download + upload this._sum_box = new St.BoxLayout(); - this._sum = new St.Label({ text: "---", style_class: 'ns-label', y_align: Clutter.ActorAlign.CENTER}); - this._sumunit = new St.Label({ text: "", style_class: 'ns-unit-label', y_align: Clutter.ActorAlign.CENTER}); + this._sum = new St.Label({ text: "---", style_class: 'ns-horizontal-label', y_align: Clutter.ActorAlign.CENTER}); + this._sumunit = new St.Label({ text: "", style_class: 'ns-horizontal-unit-label', y_align: Clutter.ActorAlign.CENTER}); this._sum_box.add_actor(this._sum); this._sum_box.add_actor(this._sumunit); diff --git a/stylesheet.css b/stylesheet.css index af54f45..a59814a 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -1,18 +1,44 @@ -/* Example stylesheet */ -.ns-label { +/** + * horizontal metrics + */ + +.ns-horizontal-label { text-align: right; padding-top: 3px; } -.ns-unit-label { +.ns-horizontal-unit-label { font-size: 65%; padding-top: 3px; } -.ns-icon { +.ns-horizontal-icon { text-align: left; padding-right: 3px; padding-top: 3px; } + +/** + * vertical metrics + */ + +.ns-vertical-label { + font-size: 80%; + text-align: right; +} + +.ns-vertical-unit-label { + font-size: 80%; +} + +.ns-vertical-icon { + font-size: 80%; + text-align: left; +} + +/** + * menu items + */ + .ns-menuitem { } From c1d24056fd863c936cf3d49f2df7fb4d5c42e128 Mon Sep 17 00:00:00 2001 From: l3nn4rt Date: Tue, 10 Sep 2019 03:41:24 +0200 Subject: [PATCH 4/8] Add option to show upload and download on two rows --- net_speed.js | 1 + net_speed_status_icon.js | 18 ++++++++++++++++++ po/netspeed.pot | 4 ++++ prefs.js | 3 +++ ...gnome.shell.extensions.netspeed.gschema.xml | 5 +++++ 5 files changed, 31 insertions(+) diff --git a/net_speed.js b/net_speed.js index fc3ae56..c369f49 100644 --- a/net_speed.js +++ b/net_speed.js @@ -278,6 +278,7 @@ const NetSpeed = class NetSpeed this.menu_label_size = this._setting.get_int('menu-label-size'); this.use_bytes = this._setting.get_boolean('use-bytes'); this.bin_prefixes = this._setting.get_boolean('bin-prefixes'); + this.vert_align = this._setting.get_boolean('vert-align'); } /** diff --git a/net_speed_status_icon.js b/net_speed_status_icon.js index d007a1c..67ab0f9 100644 --- a/net_speed_status_icon.js +++ b/net_speed_status_icon.js @@ -156,6 +156,7 @@ const NetSpeedStatusIcon = GObject.registerClass(class NetSpeedStatusIcon extend this._downicon.show(); this._down.show(); this._downunit.show(); + this.set_vertical_alignment(this._net_speed.vert_align); } else { this._sum.show(); this._sumunit.show(); @@ -165,6 +166,8 @@ const NetSpeedStatusIcon = GObject.registerClass(class NetSpeedStatusIcon extend this._downicon.hide(); this._down.hide(); this._downunit.hide(); + // ignore vertical alignment with sum + this.set_vertical_alignment(false); } // Change the type of Icon @@ -277,4 +280,19 @@ const NetSpeedStatusIcon = GObject.registerClass(class NetSpeedStatusIcon extend this._layouts[i].update_speeds(speeds[i]); } } + + /** + * NetSpeedStatusIcon: set_vertical_alignment + */ + set_vertical_alignment(tof) + { + this._metrics_box.set_vertical(tof); + let align = tof ? 'vertical' : 'horizontal'; + this._down.set_style_class_name('ns-' + align + '-label'); + this._downunit.set_style_class_name('ns-' + align + '-unit-label'); + this._downicon.set_style_class_name('ns-' + align + '-icon'); + this._up.set_style_class_name('ns-' + align + '-label'); + this._upunit.set_style_class_name('ns-' + align + '-unit-label'); + this._upicon.set_style_class_name('ns-' + align + '-icon'); + } }); diff --git a/po/netspeed.pot b/po/netspeed.pot index 91ec500..bd16e34 100644 --- a/po/netspeed.pot +++ b/po/netspeed.pot @@ -92,3 +92,7 @@ msgstr "" #: prefs.js:200 msgid "Use binary prefixes" msgstr "" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" diff --git a/prefs.js b/prefs.js index f594260..82c3bab 100644 --- a/prefs.js +++ b/prefs.js @@ -198,6 +198,7 @@ const App = class NetSpeed_App }); this.use_bytes = new Gtk.CheckButton({ label: _("Use multiples of byte") }); this.bin_prefixes = new Gtk.CheckButton({ label: _("Use binary prefixes") }); + this.vert_align = new Gtk.CheckButton({ label: _("Align vertically") }); this.main.attach(this.dev, 2, 1, 1, 1); this.main.attach(this.sum, 1, 2, 2, 1); @@ -209,6 +210,7 @@ const App = class NetSpeed_App this.main.attach(this.menu_label_size, 2, 8, 1, 1); this.main.attach(this.use_bytes, 1, 9, 1, 1); this.main.attach(this.bin_prefixes, 1, 10, 1, 1); + this.main.attach(this.vert_align, 1, 11, 1, 1); Schema.bind('show-sum', this.sum, 'active', Gio.SettingsBindFlags.DEFAULT); Schema.bind('icon-display', this.icon, 'active', Gio.SettingsBindFlags.DEFAULT); @@ -219,6 +221,7 @@ const App = class NetSpeed_App Schema.bind('menu-label-size', this.menu_label_size, 'value', Gio.SettingsBindFlags.DEFAULT); Schema.bind('use-bytes', this.use_bytes, 'active', Gio.SettingsBindFlags.DEFAULT); Schema.bind('bin-prefixes', this.bin_prefixes, 'active', Gio.SettingsBindFlags.DEFAULT); + Schema.bind('vert-align', this.vert_align, 'active', Gio.SettingsBindFlags.DEFAULT); this._setting = 0; diff --git a/schemas/org.gnome.shell.extensions.netspeed.gschema.xml b/schemas/org.gnome.shell.extensions.netspeed.gschema.xml index 6906099..2d88af1 100644 --- a/schemas/org.gnome.shell.extensions.netspeed.gschema.xml +++ b/schemas/org.gnome.shell.extensions.netspeed.gschema.xml @@ -50,5 +50,10 @@ Use binary prefixes Set to true to show binary prefixes (Mib/s, GiB/s, etc), false for decimal prefixes (Mb/s, GB/s, etc) + + false + Align vertically + Show upload and download speeds on two rows + From f12c31a6d99e61d678f432b368af06dfcae36526 Mon Sep 17 00:00:00 2001 From: l3nn4rt Date: Tue, 10 Sep 2019 03:43:16 +0200 Subject: [PATCH 5/8] Add translation entries to po/*.po for the two rows toggle --- po/ca.po | 4 ++++ po/de.po | 4 ++++ po/en_CA.po | 4 ++++ po/es_ES.po | 4 ++++ po/fa.po | 4 ++++ po/fr.po | 4 ++++ po/it.po | 4 ++++ po/nl_NL.po | 4 ++++ po/pt_BR.po | 4 ++++ po/ru.po | 4 ++++ po/tr.po | 4 ++++ po/zh_CN.po | 4 ++++ po/zh_TW.po | 4 ++++ 13 files changed, 52 insertions(+) diff --git a/po/ca.po b/po/ca.po index c3c4108..29f3935 100644 --- a/po/ca.po +++ b/po/ca.po @@ -92,3 +92,7 @@ msgstr "Usa múltiples de byte" #: prefs.js:200 msgid "Use binary prefixes" msgstr "Usa prefixos binaris" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" diff --git a/po/de.po b/po/de.po index 7605bb1..3646551 100644 --- a/po/de.po +++ b/po/de.po @@ -94,3 +94,7 @@ msgstr "" #: prefs.js:200 msgid "Use binary prefixes" msgstr "" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" diff --git a/po/en_CA.po b/po/en_CA.po index ab124c4..d227bfc 100644 --- a/po/en_CA.po +++ b/po/en_CA.po @@ -93,3 +93,7 @@ msgstr "" #: prefs.js:200 msgid "Use binary prefixes" msgstr "" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" diff --git a/po/es_ES.po b/po/es_ES.po index 2f2583e..f22bd6e 100644 --- a/po/es_ES.po +++ b/po/es_ES.po @@ -94,3 +94,7 @@ msgstr "" #: prefs.js:200 msgid "Use binary prefixes" msgstr "" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" diff --git a/po/fa.po b/po/fa.po index 5b5c58d..124291d 100644 --- a/po/fa.po +++ b/po/fa.po @@ -91,3 +91,7 @@ msgstr "" #: prefs.js:200 msgid "Use binary prefixes" msgstr "" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" diff --git a/po/fr.po b/po/fr.po index 2f7464d..7f5c311 100644 --- a/po/fr.po +++ b/po/fr.po @@ -93,3 +93,7 @@ msgstr "" #: prefs.js:200 msgid "Use binary prefixes" msgstr "" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" diff --git a/po/it.po b/po/it.po index b5d6a7d..176834d 100644 --- a/po/it.po +++ b/po/it.po @@ -93,3 +93,7 @@ msgstr "Usa multipli del byte" #: prefs.js:200 msgid "Use binary prefixes" msgstr "Usa prefissi binari" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" diff --git a/po/nl_NL.po b/po/nl_NL.po index 658934d..d6d74c1 100644 --- a/po/nl_NL.po +++ b/po/nl_NL.po @@ -93,3 +93,7 @@ msgstr "" #: prefs.js:200 msgid "Use binary prefixes" msgstr "" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" diff --git a/po/pt_BR.po b/po/pt_BR.po index ff2c9f3..1464299 100644 --- a/po/pt_BR.po +++ b/po/pt_BR.po @@ -93,3 +93,7 @@ msgstr "" #: prefs.js:200 msgid "Use binary prefixes" msgstr "" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" diff --git a/po/ru.po b/po/ru.po index eedee66..4c96014 100644 --- a/po/ru.po +++ b/po/ru.po @@ -93,3 +93,7 @@ msgstr "" #: prefs.js:200 msgid "Use binary prefixes" msgstr "" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" diff --git a/po/tr.po b/po/tr.po index a4ec0a3..88eea64 100644 --- a/po/tr.po +++ b/po/tr.po @@ -93,3 +93,7 @@ msgstr "" #: prefs.js:200 msgid "Use binary prefixes" msgstr "" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" diff --git a/po/zh_CN.po b/po/zh_CN.po index fd36f2e..06aedfc 100644 --- a/po/zh_CN.po +++ b/po/zh_CN.po @@ -93,3 +93,7 @@ msgstr "" #: prefs.js:200 msgid "Use binary prefixes" msgstr "" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" diff --git a/po/zh_TW.po b/po/zh_TW.po index ed9aaf6..8fe80a3 100644 --- a/po/zh_TW.po +++ b/po/zh_TW.po @@ -93,3 +93,7 @@ msgstr "" #: prefs.js:200 msgid "Use binary prefixes" msgstr "" + +#: prefs.js:201 +msgid "Align vertically" +msgstr "" From 27e2567d8c922673e91e598e5e6ef92163551b7f Mon Sep 17 00:00:00 2001 From: l3nn4rt Date: Tue, 10 Sep 2019 03:44:09 +0200 Subject: [PATCH 6/8] Update it translation --- po/it.po | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/po/it.po b/po/it.po index 176834d..0a9fb5a 100644 --- a/po/it.po +++ b/po/it.po @@ -96,4 +96,4 @@ msgstr "Usa prefissi binari" #: prefs.js:201 msgid "Align vertically" -msgstr "" +msgstr "Allinea verticalmente" From 059718350ebc53736b7dc55bc6fe4aafaf7a74b2 Mon Sep 17 00:00:00 2001 From: l3nn4rt Date: Wed, 11 Sep 2019 00:59:31 +0200 Subject: [PATCH 7/8] Reduce two-rows style to stay within panel height This style should work with the default panel; it may produce artifacts with shell themes or extensions which change the panel (e.g. DashToPanel) --- stylesheet.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/stylesheet.css b/stylesheet.css index a59814a..cbe2243 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -23,16 +23,16 @@ */ .ns-vertical-label { - font-size: 80%; + font-size: 65%; text-align: right; } .ns-vertical-unit-label { - font-size: 80%; + font-size: 65%; } .ns-vertical-icon { - font-size: 80%; + font-size: 65%; text-align: left; } From 9f55d96e99942c3f6d417a0e1b0cfc2a4eb8af3a Mon Sep 17 00:00:00 2001 From: l3nn4rt Date: Thu, 12 Sep 2019 18:49:37 +0200 Subject: [PATCH 8/8] Center metrics box on panel --- net_speed_status_icon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/net_speed_status_icon.js b/net_speed_status_icon.js index 67ab0f9..f3338fd 100644 --- a/net_speed_status_icon.js +++ b/net_speed_status_icon.js @@ -74,7 +74,7 @@ const NetSpeedStatusIcon = GObject.registerClass(class NetSpeedStatusIcon extend this._sum_box.add_actor(this._sumunit); // metrics box - this._metrics_box = new St.BoxLayout(); + this._metrics_box = new St.BoxLayout({y_align: Clutter.ActorAlign.CENTER}); this._metrics_box.add_actor(this._download_box); this._metrics_box.add_actor(this._upload_box); this._metrics_box.add_actor(this._sum_box);