From 6ff0a7f0215de1acd0490020b53485c45550df79 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Apr 2024 15:58:26 +0300
Subject: refactor sizesetting into unitsetting allowing more unit types with
 i18n support

---
 .../settings_modal/helpers/size_setting.js         | 40 --------------
 .../settings_modal/helpers/size_setting.vue        | 62 ----------------------
 .../settings_modal/helpers/unit_setting.js         | 48 +++++++++++++++++
 .../settings_modal/helpers/unit_setting.vue        | 61 +++++++++++++++++++++
 .../settings_modal_admin_content.scss              | 11 +---
 .../settings_modal_user_content.scss               | 11 +---
 .../settings_modal/tabs/filtering_tab.js           |  4 +-
 .../settings_modal/tabs/filtering_tab.vue          |  5 +-
 src/components/settings_modal/tabs/general_tab.js  |  4 +-
 src/components/settings_modal/tabs/general_tab.vue |  4 +-
 src/i18n/en.json                                   |  8 +++
 11 files changed, 130 insertions(+), 128 deletions(-)
 delete mode 100644 src/components/settings_modal/helpers/size_setting.js
 delete mode 100644 src/components/settings_modal/helpers/size_setting.vue
 create mode 100644 src/components/settings_modal/helpers/unit_setting.js
 create mode 100644 src/components/settings_modal/helpers/unit_setting.vue

(limited to 'src')

diff --git a/src/components/settings_modal/helpers/size_setting.js b/src/components/settings_modal/helpers/size_setting.js
deleted file mode 100644
index 12cef705..00000000
--- a/src/components/settings_modal/helpers/size_setting.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Select from 'src/components/select/select.vue'
-import Setting from './setting.js'
-
-export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']
-export const defaultHorizontalUnits = ['px', 'rem', 'vw']
-export const defaultVerticalUnits = ['px', 'rem', 'vh']
-
-export default {
-  ...Setting,
-  components: {
-    ...Setting.components,
-    Select
-  },
-  props: {
-    ...Setting.props,
-    min: Number,
-    units: {
-      type: Array,
-      default: () => allCssUnits
-    }
-  },
-  computed: {
-    ...Setting.computed,
-    stateUnit () {
-      return this.state.replace(/\d+/, '')
-    },
-    stateValue () {
-      return this.state.replace(/\D+/, '')
-    }
-  },
-  methods: {
-    ...Setting.methods,
-    updateValue (e) {
-      this.configSink(this.path, parseInt(e.target.value) + this.stateUnit)
-    },
-    updateUnit (e) {
-      this.configSink(this.path, this.stateValue + e.target.value)
-    }
-  }
-}
diff --git a/src/components/settings_modal/helpers/size_setting.vue b/src/components/settings_modal/helpers/size_setting.vue
deleted file mode 100644
index 6c3fbaeb..00000000
--- a/src/components/settings_modal/helpers/size_setting.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <span
-    v-if="matchesExpertLevel"
-    class="SizeSetting"
-  >
-    <label
-      :for="path"
-      class="size-label"
-    >
-      <slot />
-    </label>
-    <input
-      :id="path"
-      class="number-input"
-      type="number"
-      step="1"
-      :disabled="disabled"
-      :min="min || 0"
-      :value="stateValue"
-      @change="updateValue"
-    >
-    <Select
-      :id="path"
-      :model-value="stateUnit"
-      :disabled="disabled"
-      class="css-unit-input"
-      @change="updateUnit"
-    >
-      <option
-        v-for="option in units"
-        :key="option"
-        :value="option"
-      >
-        {{ option }}
-      </option>
-    </Select>
-    {{ ' ' }}
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-  </span>
-</template>
-
-<script src="./size_setting.js"></script>
-
-<style lang="scss">
-.SizeSetting {
-  .number-input {
-    max-width: 6.5em;
-  }
-
-  .css-unit-input,
-  .css-unit-input select {
-    margin-left: 0.5em;
-    width: 4em;
-    max-width: 4em;
-    min-width: 4em;
-  }
-}
-
-</style>
diff --git a/src/components/settings_modal/helpers/unit_setting.js b/src/components/settings_modal/helpers/unit_setting.js
new file mode 100644
index 00000000..c9c23cb0
--- /dev/null
+++ b/src/components/settings_modal/helpers/unit_setting.js
@@ -0,0 +1,48 @@
+import Select from 'src/components/select/select.vue'
+import Setting from './setting.js'
+
+export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']
+export const defaultHorizontalUnits = ['px', 'rem', 'vw']
+export const defaultVerticalUnits = ['px', 'rem', 'vh']
+
+export default {
+  ...Setting,
+  components: {
+    ...Setting.components,
+    Select
+  },
+  props: {
+    ...Setting.props,
+    min: Number,
+    units: {
+      type: Array,
+      default: () => allCssUnits
+    },
+    unitSet: {
+      type: String,
+      default: 'none'
+    }
+  },
+  computed: {
+    ...Setting.computed,
+    stateUnit () {
+      return this.state.replace(/\d+/, '')
+    },
+    stateValue () {
+      return this.state.replace(/\D+/, '')
+    }
+  },
+  methods: {
+    ...Setting.methods,
+    getUnitString (value) {
+      if (this.unitSet === 'none') return value
+      return this.$t(['settings', 'units', this.unitSet, value].join('.'))
+    },
+    updateValue (e) {
+      this.configSink(this.path, parseInt(e.target.value) + this.stateUnit)
+    },
+    updateUnit (e) {
+      this.configSink(this.path, this.stateValue + e.target.value)
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue
new file mode 100644
index 00000000..d6aafe26
--- /dev/null
+++ b/src/components/settings_modal/helpers/unit_setting.vue
@@ -0,0 +1,61 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="UnitSetting"
+  >
+    <label
+      :for="path"
+      class="size-label"
+    >
+      <slot />
+    </label>
+    <input
+      :id="path"
+      class="number-input"
+      type="number"
+      step="1"
+      :disabled="disabled"
+      :min="min || 0"
+      :value="stateValue"
+      @change="updateValue"
+    >
+    <Select
+      :id="path"
+      :model-value="stateUnit"
+      :disabled="disabled"
+      class="unit-input unstyled"
+      @change="updateUnit"
+    >
+      <option
+        v-for="option in units"
+        :key="option"
+        :value="option"
+      >
+        {{ getUnitString(option) }}
+      </option>
+    </Select>
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+  </span>
+</template>
+
+<script src="./unit_setting.js"></script>
+
+<style lang="scss">
+.UnitSetting {
+  .number-input {
+    max-width: 6.5em;
+    text-align: right;
+  }
+
+  .unit-input,
+  .unit-input select {
+    min-width: 4em;
+    width: auto;
+  }
+}
+
+</style>
diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss
index c984d703..a5314fe1 100644
--- a/src/components/settings_modal/settings_modal_admin_content.scss
+++ b/src/components/settings_modal/settings_modal_admin_content.scss
@@ -1,10 +1,8 @@
-@import "src/variables";
-
 .settings_tab-switcher {
   height: 100%;
 
   .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
+    border-bottom: 2px solid var(--border);
     margin: 1em 1em 1.4em;
     padding-bottom: 1.4em;
 
@@ -33,10 +31,6 @@
       margin-bottom: 1em;
     }
 
-    select {
-      min-width: 10em;
-    }
-
     textarea {
       width: 100%;
       max-width: 100%;
@@ -45,8 +39,7 @@
 
     .unavailable,
     .unavailable svg {
-      color: var(--cRed, $fallback--cRed);
-      color: $fallback--cRed;
+      color: var(--cRed);
     }
   }
 }
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
index c984d703..a5314fe1 100644
--- a/src/components/settings_modal/settings_modal_user_content.scss
+++ b/src/components/settings_modal/settings_modal_user_content.scss
@@ -1,10 +1,8 @@
-@import "src/variables";
-
 .settings_tab-switcher {
   height: 100%;
 
   .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
+    border-bottom: 2px solid var(--border);
     margin: 1em 1em 1.4em;
     padding-bottom: 1.4em;
 
@@ -33,10 +31,6 @@
       margin-bottom: 1em;
     }
 
-    select {
-      min-width: 10em;
-    }
-
     textarea {
       width: 100%;
       max-width: 100%;
@@ -45,8 +39,7 @@
 
     .unavailable,
     .unavailable svg {
-      color: var(--cRed, $fallback--cRed);
-      color: $fallback--cRed;
+      color: var(--cRed);
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 06f238af..fbace15d 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,7 +1,7 @@
 import { filter, trim, debounce } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
-import SizeSetting from '../helpers/size_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -20,7 +20,7 @@ const FilteringTab = {
   components: {
     BooleanSetting,
     ChoiceSetting,
-    SizeSetting,
+    UnitSetting,
     IntegerSetting
   },
   computed: {
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 0f796255..ab4f5b18 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -97,14 +97,15 @@
           </BooleanSetting>
         </li>
         <li>
-          <SizeSetting
+          <UnitSetting
             key="hideScrobblesAfter"
             path="hideScrobblesAfter"
             :units="['m', 'h', 'd']"
+            unitSet="time"
             expert="1"
           >
             {{ $t('settings.hide_scrobbles_after') }}
-          </SizeSetting>
+          </UnitSetting>
         </li>
       </ul>
     </div>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 3f2bcb13..7d701d34 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -3,7 +3,7 @@ import ChoiceSetting from '../helpers/choice_setting.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
-import SizeSetting, { defaultHorizontalUnits } from '../helpers/size_setting.vue'
+import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -64,7 +64,7 @@ const GeneralTab = {
     ChoiceSetting,
     IntegerSetting,
     FloatSetting,
-    SizeSetting,
+    UnitSetting,
     InterfaceLanguageSwitcher,
     ScopeSelector,
     ProfileSettingIndicator
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index f56fa8e0..05930e00 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -134,7 +134,7 @@
         <li v-if="expertLevel > 0">
           {{ $t('settings.column_sizes') }}
           <div class="column-settings">
-            <SizeSetting
+            <UnitSetting
               v-for="column in columns"
               :key="column"
               :path="column + 'ColumnWidth'"
@@ -142,7 +142,7 @@
               expert="1"
             >
               {{ $t('settings.column_sizes_' + column) }}
-            </SizeSetting>
+            </UnitSetting>
           </div>
         </li>
         <li class="select-multiple">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b1b39cc2..2fd4668d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -395,6 +395,14 @@
         "desc": "To enable two-factor authentication, enter the code from your two-factor app:"
       }
     },
+    "units": {
+      "time": {
+        "m": "minutes",
+        "s": "seconds",
+        "h": "hours",
+        "d": "days"
+      }
+    },
     "lists_navigation": "Show lists in navigation",
     "allow_following_move": "Allow auto-follow when following account moves",
     "attachmentRadius": "Attachments",
-- 
cgit v1.2.3-70-g09d2