diff --git a/src/App.scss b/src/App.scss
index 7cb92fc9..45071ba2 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -187,7 +187,7 @@ a {
}
}
-input, textarea, .select, .input {
+input, textarea, .input {
&.unstyled {
border-radius: 0;
@@ -217,47 +217,11 @@ input, textarea, .select, .input {
hyphens: none;
padding: 8px .5em;
- &.select {
- padding: 0;
- }
-
- &:disabled, &[disabled=disabled] {
+ &:disabled, &[disabled=disabled], &.disabled {
cursor: not-allowed;
opacity: 0.5;
}
- .select-down-icon {
- position: absolute;
- top: 0;
- bottom: 0;
- right: 5px;
- height: 100%;
- color: $fallback--text;
- color: var(--inputText, $fallback--text);
- line-height: 28px;
- z-index: 0;
- pointer-events: none;
- }
-
- select {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- background: transparent;
- border: none;
- color: $fallback--text;
- color: var(--inputText, --text, $fallback--text);
- margin: 0;
- padding: 0 2em 0 .2em;
- font-family: sans-serif;
- font-family: var(--inputFont, sans-serif);
- font-size: 14px;
- width: 100%;
- z-index: 1;
- height: 28px;
- line-height: 16px;
- }
-
&[type=range] {
background: none;
border: none;
@@ -830,13 +794,6 @@ nav {
}
}
-.select-multiple {
- display: flex;
- .option-list {
- margin: 0;
- padding-left: .5em;
- }
-}
.setting-list,
.option-list{
list-style-type: none;
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 6274780b..137ef9c0 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,14 +1,10 @@
import { set } from 'vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
- faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
- faChevronDown
-)
+import Select from '../select/select.vue'
export default {
+ components: {
+ Select
+ },
props: [
'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
],
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index dd117ec0..29605084 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -22,30 +22,20 @@
class="opt-l"
:for="name + '-o'"
/>
- <label
- :for="name + '-font-switcher'"
- class="select"
+ <Select
+ :id="name + '-font-switcher'"
+ v-model="preset"
:disabled="!present"
+ class="font-switcher"
>
- <select
- :id="name + '-font-switcher'"
- v-model="preset"
- :disabled="!present"
- class="font-switcher"
+ <option
+ v-for="option in availableOptions"
+ :key="option"
+ :value="option"
>
- <option
- v-for="option in availableOptions"
- :key="option"
- :value="option"
- >
- {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
- </option>
- </select>
- <FAIcon
- class="select-down-icon"
- icon="chevron-down"
- />
- </label>
+ {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
+ </option>
+ </Select>
<input
v-if="isCustom"
:id="name"
@@ -65,7 +55,8 @@
min-width: 10em;
}
&.custom {
- .select {
+ /* TODO Should make proper joiners... */
+ .font-switcher {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index dc3bd408..cf307a24 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -3,27 +3,18 @@
<label for="interface-language-switcher">
{{ $t('settings.interfaceLanguage') }}
</label>
- <label
- for="interface-language-switcher"
- class="select"
+ <Select
+ id="interface-language-switcher"
+ v-model="language"
>
- <select
- id="interface-language-switcher"
- v-model="language"
+ <option
+ v-for="lang in languages"
+ :key="lang.code"
+ :value="lang.code"
>
- <option
- v-for="lang in languages"
- :key="lang.code"
- :value="lang.code"
- >
- {{ lang.name }}
- </option>
- </select>
- <FAIcon
- class="select-down-icon"
- icon="chevron-down"
- />
- </label>
+ {{ lang.name }}
+ </option>
+ </Select>
</div>
</template>
@@ -32,16 +23,12 @@ import languagesObject from '../../i18n/messages'
import localeService from '../../services/locale/locale.service.js'
import ISO6391 from 'iso-639-1'
import _ from 'lodash'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
- faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
- faChevronDown
-)
+import Select from '../select/select.vue'
export default {
+ components: {
+ Select
+ },
computed: {
languages () {
return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index 1f8df3f9..e30645c3 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -1,19 +1,21 @@
import * as DateUtils from 'src/services/date_utils/date_utils.js'
import { uniq } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
+import Select from '../select/select.vue'
import {
faTimes,
- faChevronDown,
faPlus
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes,
- faChevronDown,
faPlus
)
export default {
+ components: {
+ Select
+ },
name: 'PollForm',
props: ['visible'],
data: () => ({
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index c4403210..3620075a 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -46,23 +46,19 @@
class="poll-type"
:title="$t('polls.type')"
>
- <label
- for="poll-type-selector"
- class="select"
+ <Select
+ v-model="pollType"
+ class="poll-type-select"
+ unstyled="true"
+ @change="updatePollToParent"
>
- <select
- v-model="pollType"
- class="select"
- @change="updatePollToParent"
- >
- <option value="single">{{ $t('polls.single_choice') }}</option>
- <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
- </select>
- <FAIcon
- class="select-down-icon"
- icon="chevron-down"
- />
- </label>
+ <option value="single">
+ {{ $t('polls.single_choice') }}
+ </option>
+ <option value="multiple">
+ {{ $t('polls.multiple_choices') }}
+ </option>
+ </Select>
</div>
<div
class="poll-expiry"
@@ -76,24 +72,20 @@
:max="maxExpirationInCurrentUnit"
@change="expiryAmountChange"
>
- <label class="expiry-unit select">
- <select
- v-model="expiryUnit"
- @change="expiryAmountChange"
+ <Select
+ v-model="expiryUnit"
+ unstyled="true"
+ class="expiry-unit"
+ @change="expiryAmountChange"
+ >
+ <option
+ v-for="unit in expiryUnits"
+ :key="unit"
+ :value="unit"
>
- <option
- v-for="unit in expiryUnits"
- :key="unit"
- :value="unit"
- >
- {{ $t(`time.${unit}_short`, ['']) }}
- </option>
- </select>
- <FAIcon
- class="select-down-icon"
- icon="chevron-down"
- />
- </label>
+ {{ $t(`time.${unit}_short`, ['']) }}
+ </option>
+ </Select>
</div>
</div>
</div>
@@ -147,10 +139,8 @@
.poll-type {
margin-right: 0.75em;
flex: 1 1 60%;
- .select {
- border: none;
- box-shadow: none;
- background-color: transparent;
+
+ .poll-type-select {
padding-right: 0.75em;
}
}
@@ -162,12 +152,6 @@
width: 3em;
text-align: right;
}
-
- .expiry-unit {
- border: none;
- box-shadow: none;
- background-color: transparent;
- }
}
}
</style>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index e540654b..5342894f 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -11,10 +11,10 @@ import { reject, map, uniqBy, debounce } from 'lodash'
import suggestor from '../emoji_input/suggestor.js'
import { mapGetters, mapState } from 'vuex'
import Checkbox from '../checkbox/checkbox.vue'
+import Select from '../select/select.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
- faChevronDown,
faSmileBeam,
faPollH,
faUpload,
@@ -24,7 +24,6 @@ import {
} from '@fortawesome/free-solid-svg-icons'
library.add(
- faChevronDown,
faSmileBeam,
faPollH,
faUpload,
@@ -84,6 +83,7 @@ const PostStatusForm = {
PollForm,
ScopeSelector,
Checkbox,
+ Select,
Attachment,
StatusContent
},
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 6b490aee..fbda41d6 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -189,28 +189,19 @@
v-if="postFormats.length > 1"
class="text-format"
>
- <label
- for="post-content-type"
- class="select"
+ <Select
+ id="post-content-type"
+ v-model="newStatus.contentType"
+ class="form-control"
>
- <select
- id="post-content-type"
- v-model="newStatus.contentType"
- class="form-control"
+ <option
+ v-for="postFormat in postFormats"
+ :key="postFormat"
+ :value="postFormat"
>
- <option
- v-for="postFormat in postFormats"
- :key="postFormat"
- :value="postFormat"
- >
- {{ $t(`post_status.content_type["${postFormat}"]`) }}
- </option>
- </select>
- <FAIcon
- class="select-down-icon"
- icon="chevron-down"
- />
- </label>
+ {{ $t(`post_status.content_type["${postFormat}"]`) }}
+ </option>
+ </Select>
</div>
<div
v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
diff --git a/src/components/select/select.js b/src/components/select/select.js
new file mode 100644
index 00000000..49535d07
--- /dev/null
+++ b/src/components/select/select.js
@@ -0,0 +1,21 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faChevronDown
+)
+
+export default {
+ model: {
+ prop: 'value',
+ event: 'change'
+ },
+ props: [
+ 'value',
+ 'disabled',
+ 'unstyled',
+ 'kind'
+ ]
+}
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
new file mode 100644
index 00000000..5ade1fa6
--- /dev/null
+++ b/src/components/select/select.vue
@@ -0,0 +1,62 @@
+
+<template>
+ <label
+ class="Select input"
+ :class="{ disabled, unstyled }"
+ >
+ <select
+ :disabled="disabled"
+ :value="value"
+ @change="$emit('change', $event.target.value)"
+ >
+ <slot />
+ </select>
+ <FAIcon
+ class="select-down-icon"
+ icon="chevron-down"
+ />
+ </label>
+</template>
+
+<script src="./select.js"> </script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.Select {
+ padding: 0;
+
+ select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background: transparent;
+ border: none;
+ color: $fallback--text;
+ color: var(--inputText, --text, $fallback--text);
+ margin: 0;
+ padding: 0 2em 0 .2em;
+ font-family: sans-serif;
+ font-family: var(--inputFont, sans-serif);
+ font-size: 14px;
+ width: 100%;
+ z-index: 1;
+ height: 28px;
+ line-height: 16px;
+ }
+
+ .select-down-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 5px;
+ height: 100%;
+ color: $fallback--text;
+ color: var(--inputText, $fallback--text);
+ line-height: 28px;
+ z-index: 0;
+ pointer-events: none;
+ }
+
+}
+</style>
diff --git a/src/components/settings_modal/helpers/boolean_setting.js b/src/components/settings_modal/helpers/boolean_setting.js
new file mode 100644
index 00000000..1dda49f2
--- /dev/null
+++ b/src/components/settings_modal/helpers/boolean_setting.js
@@ -0,0 +1,30 @@
+import { get, set } from 'lodash'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ModifiedIndicator from './modified_indicator.vue'
+export default {
+ components: {
+ Checkbox,
+ ModifiedIndicator
+ },
+ props: [
+ 'path',
+ 'disabled'
+ ],
+ computed: {
+ pathDefault () {
+ const [firstSegment, ...rest] = this.path.split('.')
+ return [firstSegment + 'DefaultValue', ...rest].join('.')
+ },
+ state () {
+ return get(this.$parent, this.path)
+ },
+ isChanged () {
+ return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
+ }
+ },
+ methods: {
+ update (e) {
+ set(this.$parent, this.path, e)
+ }
+ }
+}
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 146ad6c1..c3ee6583 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -18,40 +18,4 @@
</label>
</template>
-<script>
-import { get, set } from 'lodash'
-import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ModifiedIndicator from './modified_indicator.vue'
-export default {
- components: {
- Checkbox,
- ModifiedIndicator
- },
- props: [
- 'path',
- 'disabled'
- ],
- computed: {
- pathDefault () {
- const [firstSegment, ...rest] = this.path.split('.')
- return [firstSegment + 'DefaultValue', ...rest].join('.')
- },
- state () {
- return get(this.$parent, this.path)
- },
- isChanged () {
- return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
- }
- },
- methods: {
- update (e) {
- set(this.$parent, this.path, e)
- }
- }
-}
-</script>
-
-<style lang="scss">
-.BooleanSetting {
-}
-</style>
+<script src="./boolean_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js
new file mode 100644
index 00000000..042e8106
--- /dev/null
+++ b/src/components/settings_modal/helpers/choice_setting.js
@@ -0,0 +1,34 @@
+import { get, set } from 'lodash'
+import Select from 'src/components/select/select.vue'
+import ModifiedIndicator from './modified_indicator.vue'
+export default {
+ components: {
+ Select,
+ ModifiedIndicator
+ },
+ props: [
+ 'path',
+ 'disabled',
+ 'options'
+ ],
+ computed: {
+ pathDefault () {
+ const [firstSegment, ...rest] = this.path.split('.')
+ return [firstSegment + 'DefaultValue', ...rest].join('.')
+ },
+ state () {
+ return get(this.$parent, this.path)
+ },
+ defaultState () {
+ return get(this.$parent, this.pathDefault)
+ },
+ isChanged () {
+ return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
+ }
+ },
+ methods: {
+ update (e) {
+ set(this.$parent, this.path, e)
+ }
+ }
+}
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
new file mode 100644
index 00000000..fa17661b
--- /dev/null
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -0,0 +1,29 @@
+<template>
+ <label
+ class="ChoiceSetting"
+ >
+ <slot />
+ <Select
+ :value="state"
+ :disabled="disabled"
+ @change="update"
+ >
+ <option
+ v-for="option in options"
+ :key="option.key"
+ :value="option.value"
+ >
+ {{ option.label }}
+ {{ option.value === defaultState ? $t('settings.instance_default_simple') : '' }}
+ </option>
+ </Select>
+ <ModifiedIndicator :changed="isChanged" />
+ </label>
+</template>
+
+<script src="./choice_setting.js"></script>
+
+<style lang="scss">
+.ChoiceSetting {
+}
+</style>
diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
index f066234c..81ab434b 100644
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@@ -7,13 +7,24 @@
margin: 1em 1em 1.4em;
padding-bottom: 1.4em;
- > div {
+ > div,
+ > label {
+ display: block;
margin-bottom: .5em;
&:last-child {
margin-bottom: 0;
}
}
+ .select-multiple {
+ display: flex;
+
+ .option-list {
+ margin: 0;
+ padding-left: .5em;
+ }
+ }
+
&:last-child {
border-bottom: none;
padding-bottom: 0;
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 6e95f7af..4eaf4217 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,24 +1,23 @@
import { filter, trim } from 'lodash'
import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
- faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
- faChevronDown
-)
const FilteringTab = {
data () {
return {
- muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n')
+ muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n'),
+ replyVisibilityOptions: ['all', 'following', 'self'].map(mode => ({
+ key: mode,
+ value: mode,
+ label: this.$t(`settings.reply_visibility_${mode}`)
+ }))
}
},
components: {
- BooleanSetting
+ BooleanSetting,
+ ChoiceSetting
},
computed: {
...SharedComputedObject(),
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 402c2a4a..6fc9ceaa 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -36,29 +36,13 @@
</li>
</ul>
</div>
- <div>
+ <ChoiceSetting
+ id="replyVisibility"
+ path="replyVisibility"
+ :options="replyVisibilityOptions"
+ >
{{ $t('settings.replies_in_timeline') }}
- <label
- for="replyVisibility"
- class="select"
- >
- <select
- id="replyVisibility"
- v-model="replyVisibility"
- >
- <option
- value="all"
- selected
- >{{ $t('settings.reply_visibility_all') }}</option>
- <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
- <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
- </select>
- <FAIcon
- class="select-down-icon"
- icon="chevron-down"
- />
- </label>
- </div>
+ </ChoiceSetting>
<div>
<BooleanSetting path="hidePostStats">
{{ $t('settings.hide_post_stats') }}
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 2db523be..07fccf57 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -1,21 +1,25 @@
import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
- faChevronDown,
faGlobe
} from '@fortawesome/free-solid-svg-icons'
library.add(
- faChevronDown,
faGlobe
)
const GeneralTab = {
data () {
return {
+ subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
+ key: mode,
+ value: mode,
+ label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
+ })),
loopSilentAvailable:
// Firefox
Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@@ -27,12 +31,20 @@ const GeneralTab = {
},
components: {
BooleanSetting,
+ ChoiceSetting,
InterfaceLanguageSwitcher
},
computed: {
postFormats () {
return this.$store.state.instance.postFormats || []
},
+ postContentOptions () {
+ return this.postFormats.map(format => ({
+ key: format,
+ value: format,
+ label: this.$t(`post_status.content_type["${format}"]`)
+ }))
+ },
instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
instanceWallpaperUsed () {
return this.$store.state.instance.background &&
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 7bae4a32..bdb29edf 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -90,62 +90,22 @@
</BooleanSetting>
</li>
<li>
- <div>
+ <ChoiceSetting
+ id="subjectLineBehavior"
+ path="subjectLineBehavior"
+ :options="subjectLineOptions"
+ >
{{ $t('settings.subject_line_behavior') }}
- <label
- for="subjectLineBehavior"
- class="select"
- >
- <select
- id="subjectLineBehavior"
- v-model="subjectLineBehavior"
- >
- <option value="email">
- {{ $t('settings.subject_line_email') }}
- {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
- </option>
- <option value="masto">
- {{ $t('settings.subject_line_mastodon') }}
- {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
- </option>
- <option value="noop">
- {{ $t('settings.subject_line_noop') }}
- {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
- </option>
- </select>
- <FAIcon
- class="select-down-icon"
- icon="chevron-down"
- />
- </label>
- </div>
+ </ChoiceSetting>
</li>
<li v-if="postFormats.length > 0">
- <div>
+ <ChoiceSetting
+ id="postContentType"
+ path="postContentType"
+ :options="postContentOptions"
+ >
{{ $t('settings.post_status_content_type') }}
- <label
- for="postContentType"
- class="select"
- >
- <select
- id="postContentType"
- v-model="postContentType"
- >
- <option
- v-for="postFormat in postFormats"
- :key="postFormat"
- :value="postFormat"
- >
- {{ $t(`post_status.content_type["${postFormat}"]`) }}
- {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
- </option>
- </select>
- <FAIcon
- class="select-down-icon"
- icon="chevron-down"
- />
- </label>
- </div>
+ </ChoiceSetting>
</li>
<li>
<BooleanSetting path="minimalScopesMode">
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 8960c566..1388f74b 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -36,16 +36,9 @@ import FontControl from 'src/components/font_control/font_control.vue'
import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Select from 'src/components/select/select.vue'
import Preview from './preview.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
- faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
- faChevronDown
-)
// List of color values used in v1
const v1OnlyNames = [
@@ -395,7 +388,8 @@ export default {
FontControl,
TabSwitcher,
Preview,
- Checkbox
+ Checkbox,
+ Select
},
methods: {
loadTheme (
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 62378867..548dc852 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -55,7 +55,7 @@
for="preset-switcher"
class="select"
>
- <select
+ <Select
id="preset-switcher"
v-model="selected"
class="preset-switcher"
@@ -71,11 +71,7 @@
>
{{ style[0] || style.name }}
</option>
- </select>
- <FAIcon
- class="select-down-icon"
- icon="chevron-down"
- />
+ </Select>
</label>
</div>
<div class="export-import">
@@ -907,28 +903,19 @@
<div class="tab-header shadow-selector">
<div class="select-container">
{{ $t('settings.style.shadows.component') }}
- <label
- for="shadow-switcher"
- class="select"
+ <Select
+ id="shadow-switcher"
+ v-model="shadowSelected"
+ class="shadow-switcher"
>
- <select
- id="shadow-switcher"
- v-model="shadowSelected"
- class="shadow-switcher"
+ <option
+ v-for="shadow in shadowsAvailable"
+ :key="shadow"
+ :value="shadow"
>
- <option
- v-for="shadow in shadowsAvailable"
- :key="shadow"
- :value="shadow"
- >
- {{ $t('settings.style.shadows.components.' + shadow) }}
- </option>
- </select>
- <FAIcon
- class="select-down-icon"
- icon="chevron-down"
- />
- </label>
+ {{ $t('settings.style.shadows.components.' + shadow) }}
+ </option>
+ </Select>
</div>
<div class="override">
<label
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 800c39d5..2d5d6eb1 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -1,5 +1,6 @@
import ColorInput from '../color_input/color_input.vue'
import OpacityInput from '../opacity_input/opacity_input.vue'
+import Select from '../select/select.vue'
import { getCssShadow } from '../../services/style_setter/style_setter.js'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { library } from '@fortawesome/fontawesome-svg-core'
@@ -45,7 +46,8 @@ export default {
},
components: {
ColorInput,
- OpacityInput
+ OpacityInput,
+ Select
},
methods: {
add () {
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 37d491f0..511e07f3 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -59,30 +59,20 @@
:disabled="usingFallback"
class="id-control style-control"
>
- <label
- for="shadow-switcher"
- class="select"
+ <Select
+ id="shadow-switcher"
+ v-model="selectedId"
+ class="shadow-switcher"
:disabled="!ready || usingFallback"
>
- <select
- id="shadow-switcher"
- v-model="selectedId"
- class="shadow-switcher"
- :disabled="!ready || usingFallback"
+ <option
+ v-for="(shadow, index) in cValue"
+ :key="index"
+ :value="index"
>
- <option
- v-for="(shadow, index) in cValue"
- :key="index"
- :value="index"
- >
- {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
- </option>
- </select>
- <FAIcon
- icon="chevron-down"
- class="select-down-icon"
- />
- </label>
+ {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
+ </option>
+ </Select>
<button
class="btn button-default"
:disabled="!ready || !present"
@@ -316,20 +306,20 @@
.id-control {
align-items: stretch;
- .select, .btn {
+
+ .shadow-switcher {
+ flex: 1;
+ }
+
+ .shadow-switcher, .btn {
min-width: 1px;
margin-right: 5px;
}
+
.btn {
padding: 0 .4em;
margin: 0 .1em;
}
- .select {
- flex: 1;
- select {
- align-self: initial;
- }
- }
}
}
}
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 3a8efafc..d9fb64d1 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -4,13 +4,13 @@ import ProgressButton from '../progress_button/progress_button.vue'
import FollowButton from '../follow_button/follow_button.vue'
import ModerationTools from '../moderation_tools/moderation_tools.vue'
import AccountActions from '../account_actions/account_actions.vue'
+import Select from '../select/select.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faBell,
faRss,
- faChevronDown,
faSearchPlus,
faExternalLinkAlt
} from '@fortawesome/free-solid-svg-icons'
@@ -18,7 +18,6 @@ import {
library.add(
faRss,
faBell,
- faChevronDown,
faSearchPlus,
faExternalLinkAlt
)
@@ -118,7 +117,8 @@ export default {
ModerationTools,
AccountActions,
ProgressButton,
- FollowButton
+ FollowButton,
+ Select
},
methods: {
muteUser () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 4b7ee7d5..53b55c01 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -132,25 +132,24 @@
class="userHighlightCl"
type="color"
>
- <label
- for="theme_tab"
- class="userHighlightSel select"
+ <Select
+ :id="'userHighlightSel'+user.id"
+ v-model="userHighlightType"
+ class="userHighlightSel"
>
- <select
- :id="'userHighlightSel'+user.id"
- v-model="userHighlightType"
- class="userHighlightSel"
- >
- <option value="disabled">{{ $t('user_card.highlight.disabled') }}</option>
- <option value="solid">{{ $t('user_card.highlight.solid') }}</option>
- <option value="striped">{{ $t('user_card.highlight.striped') }}</option>
- <option value="side">{{ $t('user_card.highlight.side') }}</option>
- </select>
- <FAIcon
- class="select-down-icon"
- icon="chevron-down"
- />
- </label>
+ <option value="disabled">
+ {{ $t('user_card.highlight.disabled') }}
+ </option>
+ <option value="solid">
+ {{ $t('user_card.highlight.solid') }}
+ </option>
+ <option value="striped">
+ {{ $t('user_card.highlight.striped') }}
+ </option>
+ <option value="side">
+ {{ $t('user_card.highlight.side') }}
+ </option>
+ </Select>
</div>
</div>
<div
@@ -541,15 +540,11 @@
flex: 1 0 auto;
}
- .userHighlightSel,
- .userHighlightSel.select {
+ .userHighlightSel {
padding-top: 0;
padding-bottom: 0;
flex: 1 0 auto;
}
- .userHighlightSel.select svg {
- line-height: 22px;
- }
.userHighlightText {
width: 70px;
@@ -558,9 +553,7 @@
.userHighlightCl,
.userHighlightText,
- .userHighlightSel,
- .userHighlightSel.select {
- height: 22px;
+ .userHighlightSel {
vertical-align: top;
margin-right: .5em;
margin-bottom: .25em;