commit: 6ff0a7f0215de1acd0490020b53485c45550df79
parent def68e9cda881447bb2d278248635d7ff4f2498f
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Apr 2024 15:58:26 +0300
refactor sizesetting into unitsetting allowing more unit types with i18n support
Diffstat:
11 files changed, 130 insertions(+), 128 deletions(-)
diff --git a/src/components/settings_modal/helpers/size_setting.js b/src/components/settings_modal/helpers/size_setting.js
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",
