From 3290ef4eb662ddd8325afb66346f238fc22f2d14 Mon Sep 17 00:00:00 2001 From: Maksym Hazevych Date: Sat, 7 May 2022 18:27:08 +0300 Subject: [PATCH] dateMenu: Align time strings in the World Clocks section MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The problem is that " 9:59 AM" (notice the space at the beginning) and "12:59 AM" strings, when centred, look misaligned — strings padded with a space look off to the right by nearly half a character. This happens because the font feature "tnum", used to make numbers monospace, doesn't work on spaces. The commit overcomes this by aligning time labels to the end. However, this won't work for locales with AM/PM strings of different lengths, so they are aligned to the start instead to minimise offset. It's too complex to know whether the used locale has different AM/PM string lengths. Instead, every time the time changes, it determines whether all the time labels have the same amount of characters. Fixes #5438 Part-of: --- js/ui/dateMenu.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js index bd363f323..f3cb00613 100644 --- a/js/ui/dateMenu.js +++ b/js/ui/dateMenu.js @@ -418,7 +418,10 @@ class WorldClocksSection extends St.Button { x_expand: true, }); - let time = new St.Label({ style_class: 'world-clocks-time' }); + let time = new St.Label({ + style_class: 'world-clocks-time', + x_align: Clutter.ActorAlign.END, + }); const tz = new St.Label({ style_class: 'world-clocks-timezone', @@ -484,10 +487,25 @@ class WorldClocksSection extends St.Button { } _updateTimeLabels() { + let differentLength = false; + let lastLength; for (let i = 0; i < this._locations.length; i++) { let l = this._locations[i]; const now = GLib.DateTime.new_now(l.location.get_timezone()); - l.timeLabel.text = Util.formatTime(now, { timeOnly: true }); + const text = Util.formatTime(now, { timeOnly: true }); + l.timeLabel.text = text; + + if (differentLength) + continue; + if (lastLength === undefined) + lastLength = text.length; + differentLength = lastLength !== text.length; + } + + for (let i = 0; i < this._locations.length; i++) { + this._locations[i].timeLabel.x_align = differentLength + ? Clutter.ActorAlign.START + : Clutter.ActorAlign.END; } }