Allow both adding and replacing locales in chooser.

wordplaydev · Oct 21, 2023 · df83b3c · df83b3c
1 parent 29ec705
commit df83b3c
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 25 deletions.
diff --git a/src/components/settings/LocaleChooser.svelte b/src/components/settings/LocaleChooser.svelte
@@ -22,21 +22,21 @@
         .getPreferredLocales()
         .map((locale) => toLocaleString(locale)) as SupportedLocale[];
 
-    function select(locale: SupportedLocale) {
-        selectedLocales = selectedLocales.includes(locale)
-            ? selectedLocales.length === 1
-                ? selectedLocales
-                : [
-                      // Remove
-                      ...selectedLocales.slice(
-                          0,
-                          selectedLocales.indexOf(locale)
-                      ),
-                      ...selectedLocales.slice(
-                          selectedLocales.indexOf(locale) + 1
-                      ),
-                  ]
-            : [locale, ...selectedLocales];
+    function select(
+        locale: SupportedLocale,
+        action: 'remove' | 'replace' | 'add'
+    ) {
+        selectedLocales =
+            // If removing, only remove if there's more than one.
+            action === 'remove'
+                ? selectedLocales.length > 1
+                    ? selectedLocales.filter((l) => l !== locale)
+                    : selectedLocales
+                : // If replacing, just choose the single locale
+                action === 'replace'
+                ? [locale]
+                : // Put the selected locale at the end, removing it from the beginning if included
+                  [...selectedLocales.filter((l) => l !== locale), locale];
 
         // Set the layout and direction based on the preferred language.
         if (selectedLocales.length > 0) {
@@ -67,7 +67,7 @@
     <div class="languages">
         {#each selectedLocales as selected}
             <Button
-                action={() => select(selected)}
+                action={() => select(selected, 'remove')}
                 tip={$locales.get((l) => l.ui.dialog.locale.button.remove)}
                 active={selectedLocales.length > 1}
                 >{#if selectedLocales.length > 1}
@@ -82,13 +82,20 @@
             $locales.get((l) => l.ui.dialog.locale.subheader.supported)
         ).toText()}</h2
     >
-    <div class="languages">
+    <div class="supported">
         {#each SupportedLocales.filter((supported) => !selectedLocales.some((locale) => locale === supported)) as supported}
-            <Button
-                action={() => select(supported)}
-                tip={$locales.get((l) => l.ui.dialog.locale.button.add)}
-                >+ <LocaleName locale={supported} supported /></Button
-            >
+            <div class="option">
+                <Button
+                    action={() => select(supported, 'replace')}
+                    tip={$locales.get((l) => l.ui.dialog.locale.button.replace)}
+                    ><LocaleName locale={supported} supported /></Button
+                >
+                <Button
+                    action={() => select(supported, 'add')}
+                    tip={$locales.get((l) => l.ui.dialog.locale.button.add)}
+                    >+</Button
+                >
+            </div>
         {:else}&mdash;
         {/each}
     </div>
@@ -110,6 +117,12 @@
 </Dialog>
 
 <style>
+    .supported {
+        display: flex;
+        flex-direction: column;
+        gap: calc(2 * var(--wordplay-spacing));
+    }
+
     .languages {
         display: flex;
         flex-direction: row;

diff --git a/src/locale/UITexts.ts b/src/locale/UITexts.ts
@@ -520,6 +520,8 @@ type UITexts = {
                 show: string;
                 /** Add a locale */
                 add: string;
+                /** Replace locale */
+                replace: string;
                 /** Remove a locale */
                 remove: string;
             };

diff --git a/src/locale/en-US.json b/src/locale/en-US.json
@@ -4017,9 +4017,10 @@
                     "help": "Help us translate …"
                 },
                 "button": {
-                    "show": "change languages",
-                    "add": "add language",
-                    "remove": "remove language"
+                    "show": "change locale",
+                    "replace": "replace with this locale",
+                    "add": "add this locale",
+                    "remove": "remove this locale"
                 }
             },
             "help": {

diff --git a/static/locales/es-MX/es-MX.json b/static/locales/es-MX/es-MX.json
@@ -2404,6 +2404,7 @@
                 },
                 "button": {
                     "show": "cambiar idiomas",
+                    "replace": "reemplazar idomas",
                     "add": "añadir idioma",
                     "remove": "quitar idioma"
                 }

diff --git a/static/locales/zh-CN/zh-CN.json b/static/locales/zh-CN/zh-CN.json
@@ -2357,6 +2357,7 @@
                 },
                 "button": {
                     "show": "$?",
+                    "replace": "$?",
                     "add": "$?",
                     "remove": "$?"
                 }

diff --git a/static/schemas/Locale.json b/static/schemas/Locale.json
@@ -7885,6 +7885,10 @@
                           "description": "Remove a locale",
                           "type": "string"
                         },
+                        "replace": {
+                          "description": "Replace locale",
+                          "type": "string"
+                        },
                         "show": {
                           "description": "Show the locale chooser dialog",
                           "type": "string"
@@ -7893,6 +7897,7 @@
                       "required": [
                         "show",
                         "add",
+                        "replace",
                         "remove"
                       ],
                       "type": "object"