Vertical alignment

lib.js

@@ -39,7 +39,7 @@ if (GLib.log_writer_is_journald(2) && DEBUG) {
 
 /**
  * A Logger class inspired to GJS doc/Logging.md
- * 
+ *
  */
 var _loggerClass = class _Logger {
 
@@ -141,9 +141,9 @@ function splitVersion(version) {
 /**
  * canShowIPs:
  * @returns {boolean} - true if panel can show IPs, false otherwise
- * 
+ *
  * Gjs 1.56 (not sure) - 1.57 (Gnome 3.28 - 3.32) have a bug on Marshalling of GPtrArray,
- * so NetworkManager js binding crash on returning ip_config. 
+ * so NetworkManager js binding crash on returning ip_config.
  * https://gitlab.gnome.org/GNOME/gjs/issues/9
  */
 

net_speed.js

@@ -285,6 +285,7 @@ var NetSpeed = class NetSpeed {
  this.use_bytes = this._setting.get_boolean('use-bytes');
  this.bin_prefixes = this._setting.get_boolean('bin-prefixes');
  this.show_ips = this._setting.get_boolean('show-ips');
+ this.vert_align = this._setting.get_boolean('vert-align');
  }
 
  /**
@@ -438,7 +439,7 @@ var NetSpeed = class NetSpeed {
 
  /**
  * NetSpeed: _disconnect_nm_device_state_changed
- * Use GObject.signal_handler_disconnect to avoid override of disconnect 
+ * Use GObject.signal_handler_disconnect to avoid override of disconnect
  * due ot introspection on NM.Device .
  */
  _disconnect_all_nm_device_state_changed() {
@@ -457,7 +458,7 @@ var NetSpeed = class NetSpeed {
  _nm_device_state_changed(nm_device, old_state, new_state, reason) {
  //Logger.debug(`${nm_device.get_iface()} move from ${old_state} to ${new_state}: reason ${reason}`);
  if (this == null) {
- //gnome-shell issue: https://gitlab.gnome.org/GNOME/gnome-shell/issues/2127 
+ //gnome-shell issue: https://gitlab.gnome.org/GNOME/gnome-shell/issues/2127
  Logger.warning("this is null");
  return;
  }

net_speed_layout_menu_item.js

@@ -77,10 +77,10 @@ var NetSpeedLayoutMenuItem = GObject.registerClass(
  this._down_label.set_text(speed.down);
  this._up_label.set_text(speed.up);
  }
- 
+
  /**
  * NetSpeedLayoutMenuItem: show_ip
- * @param {boolean} value 
+ * @param {boolean} value
  */
  show_ip(value) {
  if (value) {

net_speed_status_icon.js

@@ -43,32 +43,49 @@ var NetSpeedStatusIcon = GObject.registerClass(class NetSpeedStatusIcon extends
  _init(net_speed) {
  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._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.add_actor(this._box);
+ this.connect('button-release-event', Lang.bind(this, this._toggle_showsum));
 
- this._box.add_actor(this._sum);
- this._box.add_actor(this._sumunit);
+ // download
+ this._download_box = new St.BoxLayout();
+ 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);
 
- this._box.add_actor(this._down);
- this._box.add_actor(this._downunit);
- this._box.add_actor(this._downicon);
+ // upload
+ this._upload_box = new St.BoxLayout();
+ 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);
 
- 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);
+ // sum
+ this._sum_box = new St.BoxLayout();
+ 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);
+
+ // metrics box
+ 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);
+ this._box.add_actor(this._metrics_box);
+
+ // 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.add_actor(this._box);
- this.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") });
@@ -80,8 +97,7 @@ var NetSpeedStatusIcon = GObject.registerClass(class NetSpeedStatusIcon extends
  } else {
  prefs.get_app_info().launch_uris(['extension:///' + Extension.metadata.uuid], null);
  }
- }
- );
+ });
 
  this._menu_title = new NetSpeedLayoutMenuItem.NetSpeedLayoutMenuItem(_("Device"), this._pref, this._net_speed.menu_label_size);
  this._menu_title.connect("activate", Lang.bind(this, this._change_device, ""));
@@ -138,6 +154,7 @@ var NetSpeedStatusIcon = GObject.registerClass(class NetSpeedStatusIcon extends
  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();
@@ -147,6 +164,8 @@ var NetSpeedStatusIcon = GObject.registerClass(class NetSpeedStatusIcon extends
  this._downicon.hide();
  this._down.hide();
  this._downunit.hide();
+ // ignore vertical alignment with sum
+ this.set_vertical_alignment(false);
  }
 
  // Change the type of Icon
@@ -261,6 +280,20 @@ var NetSpeedStatusIcon = GObject.registerClass(class NetSpeedStatusIcon extends
  }
  }
 
+ /**
+ * 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');
+ }
+
  /**
  * NetSpeedStatusIcon: update_ips
  */
@@ -270,5 +303,4 @@ var NetSpeedStatusIcon = GObject.registerClass(class NetSpeedStatusIcon extends
  }
  }
 
-
 });

po/ca.po

@@ -6,7 +6,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Netspeed Gnome-Shell Extension\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2020-03-22 23:26+0100\n"
+"POT-Creation-Date: 2020-06-09 11:39+0200\n"
 "PO-Revision-Date: 2019-07-28 13:37+0200\n"
 "Last-Translator: Jordi Mas i Hernandez <[email protected]>\n"
 "Language-Team: \n"
@@ -16,62 +16,6 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "X-Generator: Poedit 2.2.1\n"
 
-#: prefs.js:62
-msgid "ALL"
-msgstr "Tots"
-
-#: prefs.js:66
-msgid "Default Gateway"
-msgstr "Passarel·la per defecte"
-
-#: prefs.js:181
-msgid "Device to monitor"
-msgstr "Dispositiu a fer seguiment"
-
-#: prefs.js:182
-msgid "Timer (milisec)"
-msgstr "Temporitzador (mil·lisegons)"
-
-#: prefs.js:183
-msgid "Digits"
-msgstr "Dígits"
-
-#: prefs.js:184
-msgid "Label Size"
-msgstr "Mida de l'etiqueta"
-
-#: prefs.js:185
-msgid "Unit Label Size"
-msgstr "Mida de l'etiqueta de la unitat"
-
-#: prefs.js:186
-msgid "Menu Label Size"
-msgstr "Mida de l'etiqueta del menú"
-
-#: prefs.js:187
-msgid "HiDPI factor"
-msgstr ""
-
-#: prefs.js:191
-msgid "Show sum(UP+Down)"
-msgstr "Mostra la suma (pujada + baixada)"
-
-#: prefs.js:192
-msgid "Show the Icon"
-msgstr "Mostra la icona"
-
-#: prefs.js:235
-msgid "Use multiples of byte"
-msgstr "Usa múltiples de byte"
-
-#: prefs.js:236
-msgid "Use binary prefixes"
-msgstr "Usa prefixos binaris"
-
-#: prefs.js:245
-msgid "Show IPs"
-msgstr ""
-
 #: net_speed.js:106 net_speed.js:110 net_speed.js:114
 msgid "B/s"
 msgstr "B/s"
@@ -129,21 +73,79 @@ msgstr ""
 msgid "Gb/s"
 msgstr ""
 
-#: net_speed_status_icon.js:86
+#: net_speed_status_icon.js:102
 msgid "Device"
 msgstr "Dispositiu"
 
-#: net_speed_status_icon.js:88
+#: net_speed_status_icon.js:104
 msgid "Up"
 msgstr "Pujada"
 
-#: net_speed_status_icon.js:88
+#: net_speed_status_icon.js:104
 msgid "Down"
 msgstr "Baixada"
 
-#: net_speed_status_icon.js:89
+#: net_speed_status_icon.js:105
 msgid "IP"
 msgstr ""
 
-#~ msgid "KB/s"
-#~ msgstr "KB/s"
+#: prefs.js:61
+msgid "ALL"
+msgstr "Tots"
+
+#: prefs.js:65
+msgid "Default Gateway"
+msgstr "Passarel·la per defecte"
+
+#: prefs.js:180
+msgid "Device to monitor"
+msgstr "Dispositiu a fer seguiment"
+
+#: prefs.js:181
+msgid "Timer (milisec)"
+msgstr "Temporitzador (mil·lisegons)"
+
+#: prefs.js:182
+msgid "Digits"
+msgstr "Dígits"
+
+#: prefs.js:183
+msgid "Label Size"
+msgstr "Mida de l'etiqueta"
+
+#: prefs.js:184
+msgid "Unit Label Size"
+msgstr "Mida de l'etiqueta de la unitat"
+
+#: prefs.js:185
+msgid "Menu Label Size"
+msgstr "Mida de l'etiqueta del menú"
+
+#: prefs.js:186
+msgid "HiDPI factor"
+msgstr ""
+
+#: prefs.js:190
+msgid "Show sum(UP+Down)"
+msgstr "Mostra la suma (pujada + baixada)"
+
+#: prefs.js:191
+msgid "Show the Icon"
+msgstr "Mostra la icona"
+
+#: prefs.js:234
+msgid "Use multiples of byte"
+msgstr "Usa múltiples de byte"
+
+#: prefs.js:235
+msgid "Use binary prefixes"
+msgstr "Usa prefixos binaris"
+
+#: prefs.js:236
+msgid "Align vertically"
+msgstr ""
+
+#: prefs.js:245
+msgid "Show IPs"
+msgstr ""
+