aboutsummaryrefslogtreecommitdiff
path: root/src/components/settings_modal
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/settings_modal')
-rw-r--r--src/components/settings_modal/helpers/float_setting.vue16
-rw-r--r--src/components/settings_modal/helpers/integer_setting.vue36
-rw-r--r--src/components/settings_modal/helpers/modified_indicator.vue2
-rw-r--r--src/components/settings_modal/helpers/number_setting.js (renamed from src/components/settings_modal/helpers/integer_setting.js)22
-rw-r--r--src/components/settings_modal/helpers/number_setting.vue27
-rw-r--r--src/components/settings_modal/tabs/general_tab.js2
-rw-r--r--src/components/settings_modal/tabs/general_tab.vue67
-rw-r--r--src/components/settings_modal/tabs/mutes_and_blocks_tab.js7
-rw-r--r--src/components/settings_modal/tabs/profile_tab.js14
-rw-r--r--src/components/settings_modal/tabs/profile_tab.scss5
-rw-r--r--src/components/settings_modal/tabs/profile_tab.vue58
11 files changed, 205 insertions, 51 deletions
diff --git a/src/components/settings_modal/helpers/float_setting.vue b/src/components/settings_modal/helpers/float_setting.vue
new file mode 100644
index 00000000..15edb3c3
--- /dev/null
+++ b/src/components/settings_modal/helpers/float_setting.vue
@@ -0,0 +1,16 @@
+<template>
+ <NumberSetting
+ v-bind="$attrs"
+ >
+ <slot />
+ </NumberSetting>
+</template>
+
+<script>
+import NumberSetting from './number_setting.vue'
+export default {
+ components: {
+ NumberSetting
+ }
+}
+</script>
diff --git a/src/components/settings_modal/helpers/integer_setting.vue b/src/components/settings_modal/helpers/integer_setting.vue
index 695e2673..43fa7e1a 100644
--- a/src/components/settings_modal/helpers/integer_setting.vue
+++ b/src/components/settings_modal/helpers/integer_setting.vue
@@ -1,27 +1,17 @@
<template>
- <span
- v-if="matchesExpertLevel"
- class="IntegerSetting"
+ <NumberSetting
+ v-bind="$attrs"
+ truncate="1"
>
- <label :for="path">
- <slot />
- </label>
- <input
- :id="path"
- class="number-input"
- type="number"
- step="1"
- :disabled="disabled"
- :min="min || 0"
- :value="state"
- @change="update"
- >
- {{ ' ' }}
- <ModifiedIndicator
- :changed="isChanged"
- :onclick="reset"
- />
- </span>
+ <slot />
+ </NumberSetting>
</template>
-<script src="./integer_setting.js"></script>
+<script>
+import NumberSetting from './number_setting.vue'
+export default {
+ components: {
+ NumberSetting
+ }
+}
+</script>
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index 8311533a..45db3fc2 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -5,12 +5,12 @@
>
<Popover
trigger="hover"
+ :trigger-attrs="{ 'aria-label': $t('settings.setting_changed') }"
>
<template #trigger>
&nbsp;
<FAIcon
icon="wrench"
- :aria-label="$t('settings.setting_changed')"
/>
</template>
<template #content>
diff --git a/src/components/settings_modal/helpers/integer_setting.js b/src/components/settings_modal/helpers/number_setting.js
index e64d0cee..73c39948 100644
--- a/src/components/settings_modal/helpers/integer_setting.js
+++ b/src/components/settings_modal/helpers/number_setting.js
@@ -8,6 +8,8 @@ export default {
path: String,
disabled: Boolean,
min: Number,
+ step: Number,
+ truncate: Number,
expert: [Number, String]
},
computed: {
@@ -15,8 +17,11 @@ export default {
const [firstSegment, ...rest] = this.path.split('.')
return [firstSegment + 'DefaultValue', ...rest].join('.')
},
+ parent () {
+ return this.$parent.$parent
+ },
state () {
- const value = get(this.$parent, this.path)
+ const value = get(this.parent, this.path)
if (value === undefined) {
return this.defaultState
} else {
@@ -24,21 +29,28 @@ export default {
}
},
defaultState () {
- return get(this.$parent, this.pathDefault)
+ return get(this.parent, this.pathDefault)
},
isChanged () {
return this.state !== this.defaultState
},
matchesExpertLevel () {
- return (this.expert || 0) <= this.$parent.expertLevel
+ return (this.expert || 0) <= this.parent.expertLevel
}
},
methods: {
+ truncateValue (value) {
+ if (!this.truncate) {
+ return value
+ }
+
+ return Math.trunc(value / this.truncate) * this.truncate
+ },
update (e) {
- set(this.$parent, this.path, parseInt(e.target.value))
+ set(this.parent, this.path, this.truncateValue(parseFloat(e.target.value)))
},
reset () {
- set(this.$parent, this.path, this.defaultState)
+ set(this.parent, this.path, this.defaultState)
}
}
}
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
new file mode 100644
index 00000000..3eab5178
--- /dev/null
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -0,0 +1,27 @@
+<template>
+ <span
+ v-if="matchesExpertLevel"
+ class="NumberSetting"
+ >
+ <label :for="path">
+ <slot />
+ </label>
+ <input
+ :id="path"
+ class="number-input"
+ type="number"
+ :step="step || 1"
+ :disabled="disabled"
+ :min="min || 0"
+ :value="state"
+ @change="update"
+ >
+ {{ ' ' }}
+ <ModifiedIndicator
+ :changed="isChanged"
+ :onclick="reset"
+ />
+ </span>
+</template>
+
+<script src="./number_setting.js"></script>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index ea24d6ad..be97710f 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -2,6 +2,7 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
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 InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
@@ -62,6 +63,7 @@ const GeneralTab = {
BooleanSetting,
ChoiceSetting,
IntegerSetting,
+ FloatSetting,
SizeSetting,
InterfaceLanguageSwitcher,
ScopeSelector,
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 582cb288..21e2d855 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -148,6 +148,56 @@
</SizeSetting>
</div>
</li>
+ <li class="select-multiple">
+ <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
+ <ul class="option-list">
+ <li>
+ <BooleanSetting path="modalOnRepeat">
+ {{ $t('settings.confirm_dialogs_repeat') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting path="modalOnUnfollow">
+ {{ $t('settings.confirm_dialogs_unfollow') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting path="modalOnBlock">
+ {{ $t('settings.confirm_dialogs_block') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting path="modalOnMute">
+ {{ $t('settings.confirm_dialogs_mute') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting path="modalOnDelete">
+ {{ $t('settings.confirm_dialogs_delete') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting path="modalOnLogout">
+ {{ $t('settings.confirm_dialogs_logout') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting path="modalOnApproveFollow">
+ {{ $t('settings.confirm_dialogs_approve_follow') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting path="modalOnDenyFollow">
+ {{ $t('settings.confirm_dialogs_deny_follow') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting path="modalOnRemoveUserFromFollowers">
+ {{ $t('settings.confirm_dialogs_remove_follower') }}
+ </BooleanSetting>
+ </li>
+ </ul>
+ </li>
</ul>
</div>
<div class="setting-item">
@@ -221,6 +271,15 @@
{{ $t('settings.no_rich_text_description') }}
</BooleanSetting>
</li>
+ <li>
+ <FloatSetting
+ v-if="user"
+ path="emojiReactionsScale"
+ expert="1"
+ >
+ {{ $t('settings.emoji_reactions_scale') }}
+ </FloatSetting>
+ </li>
<h3>{{ $t('settings.attachments') }}</h3>
<li>
<BooleanSetting
@@ -451,6 +510,14 @@
{{ $t('settings.pad_emoji') }}
</BooleanSetting>
</li>
+ <li>
+ <BooleanSetting
+ path="autocompleteSelect"
+ expert="1"
+ >
+ {{ $t('settings.autocomplete_select_first') }}
+ </BooleanSetting>
+ </li>
</ul>
</div>
</div>
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
index 6cfeea35..51974f9f 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
@@ -9,17 +9,20 @@ import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue
import SelectableList from 'src/components/selectable_list/selectable_list.vue'
import ProgressButton from 'src/components/progress_button/progress_button.vue'
import withSubscription from 'src/components/../hocs/with_subscription/with_subscription'
+import withLoadMore from 'src/components/../hocs/with_load_more/with_load_more'
import Checkbox from 'src/components/checkbox/checkbox.vue'
-const BlockList = withSubscription({
+const BlockList = withLoadMore({
fetch: (props, $store) => $store.dispatch('fetchBlocks'),
select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+ destroy: () => {},
childPropName: 'items'
})(SelectableList)
-const MuteList = withSubscription({
+const MuteList = withLoadMore({
fetch: (props, $store) => $store.dispatch('fetchMutes'),
select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+ destroy: () => {},
childPropName: 'items'
})(SelectableList)
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index ff2ccef2..eeacad48 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -12,6 +12,7 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
import BooleanSetting from '../helpers/boolean_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
import localeService from 'src/services/locale/locale.service.js'
+import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
@@ -32,6 +33,8 @@ const ProfileTab = {
newName: this.$store.state.users.currentUser.name_unescaped,
newBio: unescape(this.$store.state.users.currentUser.description),
newLocked: this.$store.state.users.currentUser.locked,
+ newBirthday: this.$store.state.users.currentUser.birthday,
+ showBirthday: this.$store.state.users.currentUser.show_birthday,
newFields: this.$store.state.users.currentUser.fields.map(field => ({ name: field.name, value: field.value })),
showRole: this.$store.state.users.currentUser.show_role,
role: this.$store.state.users.currentUser.role,
@@ -43,7 +46,7 @@ const ProfileTab = {
bannerPreview: null,
background: null,
backgroundPreview: null,
- emailLanguage: this.$store.state.users.currentUser.language || ''
+ emailLanguage: this.$store.state.users.currentUser.language || ['']
}
},
components: {
@@ -125,12 +128,14 @@ const ProfileTab = {
display_name: this.newName,
fields_attributes: this.newFields.filter(el => el != null),
bot: this.bot,
- show_role: this.showRole
+ show_role: this.showRole,
+ birthday: this.newBirthday || '',
+ show_birthday: this.showBirthday
/* eslint-enable camelcase */
}
if (this.emailLanguage) {
- params.language = localeService.internalToBackendLocale(this.emailLanguage)
+ params.language = localeService.internalToBackendLocaleMulti(this.emailLanguage)
}
this.$store.state.api.backendInteractor
@@ -257,6 +262,9 @@ const ProfileTab = {
messageArgs: [error.message],
level: 'error'
})
+ },
+ propsToNative (props) {
+ return propsToNative(props)
}
}
}
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 73879192..ee253ffe 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -129,4 +129,9 @@
padding: 0 0.5em;
}
}
+
+ .birthday-input {
+ display: block;
+ margin-bottom: 1em;
+ }
}
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 642d54ca..6a5b478a 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -8,11 +8,14 @@
enable-emoji-picker
:suggest="emojiSuggestor"
>
- <input
- id="username"
- v-model="newName"
- class="name-changer"
- >
+ <template #default="inputProps">
+ <input
+ id="username"
+ v-model="newName"
+ class="name-changer"
+ v-bind="propsToNative(inputProps)"
+ >
+ </template>
</EmojiInput>
<p>{{ $t('settings.bio') }}</p>
<EmojiInput
@@ -20,10 +23,13 @@
enable-emoji-picker
:suggest="emojiUserSuggestor"
>
- <textarea
- v-model="newBio"
- class="bio resize-height"
- />
+ <template #default="inputProps">
+ <textarea
+ v-model="newBio"
+ class="bio resize-height"
+ v-bind="propsToNative(inputProps)"
+ />
+ </template>
</EmojiInput>
<p v-if="role === 'admin' || role === 'moderator'">
<Checkbox v-model="showRole">
@@ -35,6 +41,18 @@
</template>
</Checkbox>
</p>
+ <div>
+ <p>{{ $t('settings.birthday.label') }}</p>
+ <input
+ id="birthday"
+ v-model="newBirthday"
+ type="date"
+ class="birthday-input"
+ >
+ <Checkbox v-model="showBirthday">
+ {{ $t('settings.birthday.show_birthday') }}
+ </Checkbox>
+ </div>
<div v-if="maxFields > 0">
<p>{{ $t('settings.profile_fields.label') }}</p>
<div
@@ -48,10 +66,13 @@
hide-emoji-button
:suggest="userSuggestor"
>
- <input
- v-model="newFields[i].name"
- :placeholder="$t('settings.profile_fields.name')"
- >
+ <template #default="inputProps">
+ <input
+ v-model="newFields[i].name"
+ :placeholder="$t('settings.profile_fields.name')"
+ v-bind="propsToNative(inputProps)"
+ >
+ </template>
</EmojiInput>
<EmojiInput
v-model="newFields[i].value"
@@ -59,10 +80,13 @@
hide-emoji-button
:suggest="userSuggestor"
>
- <input
- v-model="newFields[i].value"
- :placeholder="$t('settings.profile_fields.value')"
- >
+ <template #default="inputProps">
+ <input
+ v-model="newFields[i].value"
+ :placeholder="$t('settings.profile_fields.value')"
+ v-bind="propsToNative(inputProps)"
+ >
+ </template>
</EmojiInput>
<button
class="delete-field button-unstyled -hover-highlight"
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-12 20:37:03 +0000