dateMenu: Align time strings in the World Clocks section

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: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2294>
This commit is contained in:
Maksym Hazevych 2022-05-07 18:27:08 +03:00 committed by Marge Bot
parent 0f4c64354c
commit 3290ef4eb6

View File

@ -418,7 +418,10 @@ class WorldClocksSection extends St.Button {
x_expand: true, 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({ const tz = new St.Label({
style_class: 'world-clocks-timezone', style_class: 'world-clocks-timezone',
@ -484,10 +487,25 @@ class WorldClocksSection extends St.Button {
} }
_updateTimeLabels() { _updateTimeLabels() {
let differentLength = false;
let lastLength;
for (let i = 0; i < this._locations.length; i++) { for (let i = 0; i < this._locations.length; i++) {
let l = this._locations[i]; let l = this._locations[i];
const now = GLib.DateTime.new_now(l.location.get_timezone()); 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;
} }
} }