[gnome-shell/wip/fmuellner/weather-clocks-refresh: 48/48] dateMenu: Refresh world clocks section

[Florian Müllner <fmuellner src gnome org>]

commit 40e624444cc352a90ad43af2e1fdf50b85d379b9
Author: Florian Müllner <fmuellner gnome org>
Date:   Thu Dec 13 17:44:28 2018 +0100

    dateMenu: Refresh world clocks section
    
    Update the section styling to accentuate the most relevant information,
    and include the timezone.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/issues/262

 data/theme/gnome-shell-sass/_common.scss | 18 ++++++++++++++++--
 js/ui/dateMenu.js                        | 19 ++++++++++++++-----
 2 files changed, 30 insertions(+), 7 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index d952f1427..693ecb3de 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -930,14 +930,28 @@ StScrollBar {
     .world-clocks-grid,
     .weather-grid {
       spacing-rows: 0.4em;
+      spacing-columns: 0.8em;
     }
 
     .weather-box {
       spacing: 0.4em;
     }
 
-    .weather-grid {
-      spacing-columns: 0.8em;
+    .world-clocks-city {
+      font-weight: bold;
+      font-size: 0.9em;
+    }
+
+    .world-clocks-time {
+      color: darken($fg_color,20%);
+      font-feature-settings: "tnum";
+      font-size: 1.2em;
+    }
+
+    .world-clocks-timezone {
+      color: darken($fg_color,40%);
+      font-feature-settings: "tnum";
+      font-size: 0.9em;
     }
 
     .weather-forecast-icon {
diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index 0a6f267e7..8f961d7f3 100644
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -156,18 +156,27 @@ var WorldClocksSection = class WorldClocksSection {
             let label = new St.Label({ style_class: 'world-clocks-city',
                                        text: name,
                                        x_align: Clutter.ActorAlign.START,
+                                       y_align: Clutter.ActorAlign.CENTER,
                                        x_expand: true });
 
-            let time = new St.Label({ style_class: 'world-clocks-time',
-                                      x_align: Clutter.ActorAlign.END,
-                                      x_expand: true });
+            let time = new St.Label({ style_class: 'world-clocks-time' });
+
+            let offset = l.get_timezone().get_offset() / 60.;
+            let fmt = (Math.trunc(offset) == offset) ? '%s%.0f' : '%s%.1f';
+            let prefix = (offset >= 0) ? '+' : '-';
+            let tz = new St.Label({ style_class: 'world-clocks-timezone',
+                                    text: fmt.format(prefix, Math.abs(offset)),
+                                    x_align: Clutter.ActorAlign.END,
+                                    y_align: Clutter.ActorAlign.CENTER });
 
             if (this._grid.text_direction == Clutter.TextDirection.RTL) {
-                layout.attach(time, 0, i + 1, 1, 1);
-                layout.attach(label, 1, i + 1, 1, 1);
+                layout.attach(tz, 0, i + 1, 1, 1);
+                layout.attach(time, 1, i + 1, 1, 1);
+                layout.attach(label, 2, i + 1, 1, 1);
             } else {
                 layout.attach(label, 0, i + 1, 1, 1);
                 layout.attach(time, 1, i + 1, 1, 1);
+                layout.attach(tz, 2, i + 1, 1, 1);
             }
 
             this._locations[i].actor = time;