Merge branch 'better-selects' into 'develop'
Better <select> components See merge request pleroma/pleroma-fe!1373
This commit is contained in:
HJ
commit
4e96af0442
25 changed files with 366 additions and 386 deletions
47
src/App.scss
47
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;
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
],
|
||||
|
|
|
|||
|
|
@ -22,12 +22,7 @@
|
|||
class="opt-l"
|
||||
:for="name + '-o'"
|
||||
/>
|
||||
<label
|
||||
:for="name + '-font-switcher'"
|
||||
class="select"
|
||||
:disabled="!present"
|
||||
>
|
||||
<select
|
||||
<Select
|
||||
:id="name + '-font-switcher'"
|
||||
v-model="preset"
|
||||
:disabled="!present"
|
||||
|
|
@ -40,12 +35,7 @@
|
|||
>
|
||||
{{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
|
||||
</option>
|
||||
</select>
|
||||
<FAIcon
|
||||
class="select-down-icon"
|
||||
icon="chevron-down"
|
||||
/>
|
||||
</label>
|
||||
</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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,7 @@
|
|||
<label for="interface-language-switcher">
|
||||
{{ $t('settings.interfaceLanguage') }}
|
||||
</label>
|
||||
<label
|
||||
for="interface-language-switcher"
|
||||
class="select"
|
||||
>
|
||||
<select
|
||||
<Select
|
||||
id="interface-language-switcher"
|
||||
v-model="language"
|
||||
>
|
||||
|
|
@ -18,12 +14,7 @@
|
|||
>
|
||||
{{ lang.name }}
|
||||
</option>
|
||||
</select>
|
||||
<FAIcon
|
||||
class="select-down-icon"
|
||||
icon="chevron-down"
|
||||
/>
|
||||
</label>
|
||||
</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))
|
||||
|
|
|
|||
|
|
@ -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: () => ({
|
||||
|
|
|
|||
|
|
@ -46,23 +46,19 @@
|
|||
class="poll-type"
|
||||
:title="$t('polls.type')"
|
||||
>
|
||||
<label
|
||||
for="poll-type-selector"
|
||||
class="select"
|
||||
>
|
||||
<select
|
||||
<Select
|
||||
v-model="pollType"
|
||||
class="select"
|
||||
class="poll-type-select"
|
||||
unstyled="true"
|
||||
@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,9 +72,10 @@
|
|||
:max="maxExpirationInCurrentUnit"
|
||||
@change="expiryAmountChange"
|
||||
>
|
||||
<label class="expiry-unit select">
|
||||
<select
|
||||
<Select
|
||||
v-model="expiryUnit"
|
||||
unstyled="true"
|
||||
class="expiry-unit"
|
||||
@change="expiryAmountChange"
|
||||
>
|
||||
<option
|
||||
|
|
@ -88,12 +85,7 @@
|
|||
>
|
||||
{{ $t(`time.${unit}_short`, ['']) }}
|
||||
</option>
|
||||
</select>
|
||||
<FAIcon
|
||||
class="select-down-icon"
|
||||
icon="chevron-down"
|
||||
/>
|
||||
</label>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -189,11 +189,7 @@
|
|||
v-if="postFormats.length > 1"
|
||||
class="text-format"
|
||||
>
|
||||
<label
|
||||
for="post-content-type"
|
||||
class="select"
|
||||
>
|
||||
<select
|
||||
<Select
|
||||
id="post-content-type"
|
||||
v-model="newStatus.contentType"
|
||||
class="form-control"
|
||||
|
|
@ -205,12 +201,7 @@
|
|||
>
|
||||
{{ $t(`post_status.content_type["${postFormat}"]`) }}
|
||||
</option>
|
||||
</select>
|
||||
<FAIcon
|
||||
class="select-down-icon"
|
||||
icon="chevron-down"
|
||||
/>
|
||||
</label>
|
||||
</Select>
|
||||
</div>
|
||||
<div
|
||||
v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
|
||||
|
|
|
|||
21
src/components/select/select.js
Normal file
21
src/components/select/select.js
Normal file
|
|
@ -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'
|
||||
]
|
||||
}
|
||||
62
src/components/select/select.vue
Normal file
62
src/components/select/select.vue
Normal file
|
|
@ -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>
|
||||
30
src/components/settings_modal/helpers/boolean_setting.js
Normal file
30
src/components/settings_modal/helpers/boolean_setting.js
Normal file
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
34
src/components/settings_modal/helpers/choice_setting.js
Normal file
34
src/components/settings_modal/helpers/choice_setting.js
Normal file
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
29
src/components/settings_modal/helpers/choice_setting.vue
Normal file
29
src/components/settings_modal/helpers/choice_setting.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -36,29 +36,13 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
{{ $t('settings.replies_in_timeline') }}
|
||||
<label
|
||||
for="replyVisibility"
|
||||
class="select"
|
||||
>
|
||||
<select
|
||||
<ChoiceSetting
|
||||
id="replyVisibility"
|
||||
v-model="replyVisibility"
|
||||
path="replyVisibility"
|
||||
:options="replyVisibilityOptions"
|
||||
>
|
||||
<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>
|
||||
{{ $t('settings.replies_in_timeline') }}
|
||||
</ChoiceSetting>
|
||||
<div>
|
||||
<BooleanSetting path="hidePostStats">
|
||||
{{ $t('settings.hide_post_stats') }}
|
||||
|
|
|
|||
|
|
@ -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 &&
|
||||
|
|
|
|||
|
|
@ -90,62 +90,22 @@
|
|||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
{{ $t('settings.subject_line_behavior') }}
|
||||
<label
|
||||
for="subjectLineBehavior"
|
||||
class="select"
|
||||
>
|
||||
<select
|
||||
<ChoiceSetting
|
||||
id="subjectLineBehavior"
|
||||
v-model="subjectLineBehavior"
|
||||
path="subjectLineBehavior"
|
||||
:options="subjectLineOptions"
|
||||
>
|
||||
<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>
|
||||
{{ $t('settings.subject_line_behavior') }}
|
||||
</ChoiceSetting>
|
||||
</li>
|
||||
<li v-if="postFormats.length > 0">
|
||||
<div>
|
||||
{{ $t('settings.post_status_content_type') }}
|
||||
<label
|
||||
for="postContentType"
|
||||
class="select"
|
||||
>
|
||||
<select
|
||||
<ChoiceSetting
|
||||
id="postContentType"
|
||||
v-model="postContentType"
|
||||
path="postContentType"
|
||||
:options="postContentOptions"
|
||||
>
|
||||
<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>
|
||||
{{ $t('settings.post_status_content_type') }}
|
||||
</ChoiceSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting path="minimalScopesMode">
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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,11 +903,7 @@
|
|||
<div class="tab-header shadow-selector">
|
||||
<div class="select-container">
|
||||
{{ $t('settings.style.shadows.component') }}
|
||||
<label
|
||||
for="shadow-switcher"
|
||||
class="select"
|
||||
>
|
||||
<select
|
||||
<Select
|
||||
id="shadow-switcher"
|
||||
v-model="shadowSelected"
|
||||
class="shadow-switcher"
|
||||
|
|
@ -923,12 +915,7 @@
|
|||
>
|
||||
{{ $t('settings.style.shadows.components.' + shadow) }}
|
||||
</option>
|
||||
</select>
|
||||
<FAIcon
|
||||
class="select-down-icon"
|
||||
icon="chevron-down"
|
||||
/>
|
||||
</label>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="override">
|
||||
<label
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -59,12 +59,7 @@
|
|||
:disabled="usingFallback"
|
||||
class="id-control style-control"
|
||||
>
|
||||
<label
|
||||
for="shadow-switcher"
|
||||
class="select"
|
||||
:disabled="!ready || usingFallback"
|
||||
>
|
||||
<select
|
||||
<Select
|
||||
id="shadow-switcher"
|
||||
v-model="selectedId"
|
||||
class="shadow-switcher"
|
||||
|
|
@ -77,12 +72,7 @@
|
|||
>
|
||||
{{ $t('settings.style.shadows.shadow_id', { value: index }) }}
|
||||
</option>
|
||||
</select>
|
||||
<FAIcon
|
||||
icon="chevron-down"
|
||||
class="select-down-icon"
|
||||
/>
|
||||
</label>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -132,25 +132,24 @@
|
|||
class="userHighlightCl"
|
||||
type="color"
|
||||
>
|
||||
<label
|
||||
for="theme_tab"
|
||||
class="userHighlightSel select"
|
||||
>
|
||||
<select
|
||||
<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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue