Adjust vertical clock for 12h format

extension.js

@@ -86,6 +86,7 @@ function _enable() {
     if (panelManager) return; //already initialized
 
     Me.settings = Convenience.getSettings('org.gnome.shell.extensions.dash-to-panel');
+    Me.desktopSettings = Convenience.getSettings('org.gnome.desktop.interface');
     panelManager = new PanelManager.dtpPanelManager();
     panelManager.enable();
     
@@ -112,6 +113,7 @@ function disable(reset) {
     panelManager.disable();
     Main.overview._dash = oldDash;
     Me.settings.run_dispose();
+    Me.desktopSettings.run_dispose();
 
     delete Me.settings;
     oldDash = null;

panel.js

@@ -329,11 +329,6 @@ var dtpPanel = Utils.defineClass({
                 ],
                 () => this._adjustForOverview()
             ],
-            [
-                this._leftBox,
-                'actor-added',
-                () => this._onBoxActorAdded(this._leftBox)
-            ],
             [
                 this._centerBox,
                 'actor-added',
@@ -356,6 +351,21 @@ var dtpPanel = Utils.defineClass({
             ]
         );
 
+        if (isVertical) {
+            this._signalsHandler.add(
+                [
+                    this._centerBox,
+                    'notify::allocation',
+                    () => this._refreshVerticalAlloc()
+                ],
+                [
+                    this._rightBox,
+                    'notify::allocation',
+                    () => this._refreshVerticalAlloc()
+                ],
+            );
+        }
+
         this._bindSettingsChanges();
 
         this.panelStyle.enable(this);
@@ -410,6 +420,11 @@ var dtpPanel = Utils.defineClass({
             this.dynamicTransparency.destroy();
         }
 
+        if (this._allocationThrottleId) {
+            Mainloop.source_remove(this._allocationThrottleId);
+            this._allocationThrottleId = 0;
+        }
+
         this.taskbar.destroy();
 
         // reset stored icon size  to the default dash
@@ -493,6 +508,8 @@ var dtpPanel = Utils.defineClass({
     },
 
     _bindSettingsChanges: function() {
+        let isVertical = checkIfVertical();
+        
         this._signalsHandler.add(
             [
                 Me.settings,
@@ -535,9 +552,20 @@ var dtpPanel = Utils.defineClass({
                 'changed::showdesktop-button-width',
                 () => this._setShowDesktopButtonSize()
             ],
+            [
+                Me.desktopSettings,
+                'changed::clock-format',
+                () => {
+                    this._clockFormat = null;
+                    
+                    if (isVertical) {
+                        this._formatVerticalClock();
+                    }
+                }
+            ]
         );
 
-        if (checkIfVertical()) {
+        if (isVertical) {
             this._signalsHandler.add([Me.settings, 'changed::group-apps-label-max-width', () => this._resetGeometry()]);
         }
     },
@@ -801,7 +829,16 @@ var dtpPanel = Utils.defineClass({
 
     _onBoxActorAdded: function(box) {
         this._setClockLocation(Me.settings.get_string('location-clock'));
-        this._setVertical(box, checkIfVertical());
+    },
+
+    _refreshVerticalAlloc: function() {
+        if (!this._allocationThrottleId) {
+            this._allocationThrottleId = Mainloop.timeout_add(200, () => {
+                this._setVertical(this._centerBox, true);
+                this._setVertical(this._rightBox, true);
+                this._allocationThrottleId = 0;
+            });
+        }
     },
 
     _setVertical: function(actor, isVertical) {
@@ -819,11 +856,8 @@ var dtpPanel = Utils.defineClass({
                     let [, natWidth] = actor.get_preferred_width(-1);
 
                     child.x_align = Clutter.ActorAlign[isVertical ? 'CENTER' : 'START'];
-                    child.style = (isVertical ? 'padding: 6px 0;' : null);
-
-                    isVertical = isVertical && (natWidth > size);
-
                     actor.set_width(isVertical ? size : -1);
+                    isVertical = isVertical && (natWidth > size);
                     actor[(isVertical ? 'add' : 'remove') + '_style_class_name']('vertical');
                 }
             }
@@ -872,7 +906,15 @@ var dtpPanel = Utils.defineClass({
         if (clockText.get_layout().is_ellipsized()) {
             let timeParts = time.split('∶');
 
-            clockText.set_text(timeParts.join('\n<span size="xx-small">‧‧</span>\n'));
+            if (!this._clockFormat) {
+                this._clockFormat = Me.desktopSettings.get_string('clock-format');
+            }
+
+            if (this._clockFormat == '12h') {
+                timeParts.push.apply(timeParts, timeParts.pop().split(' '));
+            }
+
+            clockText.set_text(timeParts.join('\n<span size="xx-small">‧‧</span>\n').trim());
             clockText.set_use_markup(true);
         }
     },

stylesheet.css

@@ -76,6 +76,11 @@
 	margin: 0; 
 }
 
+.dashtopanelPanel.vertical .panel-button > *,
+.dashtopanelPanel.vertical .panel-button.vertical > * {
+	padding: 6px 0; 
+}
+
 #dashtopanelThumbnailList {
 	spacing: 0em;
 	padding: 0 1em;