[web] Display most representative country in timezone selector

openSUSE · Dec 21, 2023 · 17d00fc · 17d00fc
1 parent 2036046
commit 17d00fc
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss
@@ -385,14 +385,14 @@ ul[data-of="agama/keymaps"] {
 ul[data-of="agama/timezones"] {
   li {
     display: grid;
-    grid-template-columns: 1fr 2fr 1fr;
+    grid-template-columns: 1fr 2fr 1fr 1fr;
 
     > :last-child {
       grid-column: 1 / -1;
       font-size: 80%;
     }
 
-    > :nth-child(3) {
+    > :nth-child(4) {
       color: var(--color-gray-dimmed);
       text-align: end;
     }

diff --git a/web/src/client/l10n.js b/web/src/client/l10n.js
@@ -31,6 +31,7 @@ const LOCALE_PATH = "/org/opensuse/Agama1/Locale";
  * @typedef {object} Timezone
  * @property {string} id - Timezone id (e.g., "Atlantic/Canary").
  * @property {Array<string>} parts - Name of the timezone parts (e.g., ["Atlantic", "Canary"]).
+ * @property {string} country - Name of the country associated to the zone or empty string (e.g., "Spain").
  * @property {number} utcOffset - UTC offset.
  */
 
@@ -230,13 +231,13 @@ class L10nClient {
   /**
    * @private
    *
-   * @param {[string, Array<string>]} dbusTimezone
+   * @param {[string, Array<string>, string]} dbusTimezone
    * @returns {Timezone}
    */
-  buildTimezone([id, parts]) {
+  buildTimezone([id, parts, country]) {
     const utcOffset = timezoneUTCOffset(id);
 
-    return ({ id, parts, utcOffset });
+    return ({ id, parts, country, utcOffset });
   }
 
   /**

diff --git a/web/src/components/l10n/TimezoneSelector.jsx b/web/src/components/l10n/TimezoneSelector.jsx
@@ -77,6 +77,7 @@ const TimezoneItem = ({ timezone, date }) => {
     <>
       <div>{part1}</div>
       <div>{restParts.join('-')}</div>
+      <div>{timezone.country}</div>
       <div>{time || ""}</div>
       <div>{timezone.details}</div>
     </>