Merge branch 'better-selects' into 'develop'

Better <select> components

See merge request pleroma/pleroma-fe!1373
This commit is contained in:
HJ 2021-05-31 11:08:56 +00:00
commit 4e96af0442
25 changed files with 366 additions and 386 deletions

View File

@ -187,7 +187,7 @@ a {
} }
} }
input, textarea, .select, .input { input, textarea, .input {
&.unstyled { &.unstyled {
border-radius: 0; border-radius: 0;
@ -217,47 +217,11 @@ input, textarea, .select, .input {
hyphens: none; hyphens: none;
padding: 8px .5em; padding: 8px .5em;
&.select { &:disabled, &[disabled=disabled], &.disabled {
padding: 0;
}
&:disabled, &[disabled=disabled] {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5; 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] { &[type=range] {
background: none; background: none;
border: none; border: none;
@ -830,13 +794,6 @@ nav {
} }
} }
.select-multiple {
display: flex;
.option-list {
margin: 0;
padding-left: .5em;
}
}
.setting-list, .setting-list,
.option-list{ .option-list{
list-style-type: none; list-style-type: none;

View File

@ -1,14 +1,10 @@
import { set } from 'vue' import { set } from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core' import Select from '../select/select.vue'
import {
faChevronDown
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown
)
export default { export default {
components: {
Select
},
props: [ props: [
'name', 'label', 'value', 'fallback', 'options', 'no-inherit' 'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
], ],

View File

@ -22,30 +22,20 @@
class="opt-l" class="opt-l"
:for="name + '-o'" :for="name + '-o'"
/> />
<label <Select
:for="name + '-font-switcher'" :id="name + '-font-switcher'"
class="select" v-model="preset"
:disabled="!present" :disabled="!present"
class="font-switcher"
> >
<select <option
:id="name + '-font-switcher'" v-for="option in availableOptions"
v-model="preset" :key="option"
:disabled="!present" :value="option"
class="font-switcher"
> >
<option {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
v-for="option in availableOptions" </option>
:key="option" </Select>
:value="option"
>
{{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
</option>
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
<input <input
v-if="isCustom" v-if="isCustom"
:id="name" :id="name"
@ -65,7 +55,8 @@
min-width: 10em; min-width: 10em;
} }
&.custom { &.custom {
.select { /* TODO Should make proper joiners... */
.font-switcher {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }

View File

@ -3,27 +3,18 @@
<label for="interface-language-switcher"> <label for="interface-language-switcher">
{{ $t('settings.interfaceLanguage') }} {{ $t('settings.interfaceLanguage') }}
</label> </label>
<label <Select
for="interface-language-switcher" id="interface-language-switcher"
class="select" v-model="language"
> >
<select <option
id="interface-language-switcher" v-for="lang in languages"
v-model="language" :key="lang.code"
:value="lang.code"
> >
<option {{ lang.name }}
v-for="lang in languages" </option>
:key="lang.code" </Select>
:value="lang.code"
>
{{ lang.name }}
</option>
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
</div> </div>
</template> </template>
@ -32,16 +23,12 @@ import languagesObject from '../../i18n/messages'
import localeService from '../../services/locale/locale.service.js' import localeService from '../../services/locale/locale.service.js'
import ISO6391 from 'iso-639-1' import ISO6391 from 'iso-639-1'
import _ from 'lodash' import _ from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core' import Select from '../select/select.vue'
import {
faChevronDown
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown
)
export default { export default {
components: {
Select
},
computed: { computed: {
languages () { languages () {
return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name)) return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))

View File

@ -1,19 +1,21 @@
import * as DateUtils from 'src/services/date_utils/date_utils.js' import * as DateUtils from 'src/services/date_utils/date_utils.js'
import { uniq } from 'lodash' import { uniq } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import Select from '../select/select.vue'
import { import {
faTimes, faTimes,
faChevronDown,
faPlus faPlus
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faTimes, faTimes,
faChevronDown,
faPlus faPlus
) )
export default { export default {
components: {
Select
},
name: 'PollForm', name: 'PollForm',
props: ['visible'], props: ['visible'],
data: () => ({ data: () => ({

View File

@ -46,23 +46,19 @@
class="poll-type" class="poll-type"
:title="$t('polls.type')" :title="$t('polls.type')"
> >
<label <Select
for="poll-type-selector" v-model="pollType"
class="select" class="poll-type-select"
unstyled="true"
@change="updatePollToParent"
> >
<select <option value="single">
v-model="pollType" {{ $t('polls.single_choice') }}
class="select" </option>
@change="updatePollToParent" <option value="multiple">
> {{ $t('polls.multiple_choices') }}
<option value="single">{{ $t('polls.single_choice') }}</option> </option>
<option value="multiple">{{ $t('polls.multiple_choices') }}</option> </Select>
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
</div> </div>
<div <div
class="poll-expiry" class="poll-expiry"
@ -76,24 +72,20 @@
:max="maxExpirationInCurrentUnit" :max="maxExpirationInCurrentUnit"
@change="expiryAmountChange" @change="expiryAmountChange"
> >
<label class="expiry-unit select"> <Select
<select v-model="expiryUnit"
v-model="expiryUnit" unstyled="true"
@change="expiryAmountChange" class="expiry-unit"
@change="expiryAmountChange"
>
<option
v-for="unit in expiryUnits"
:key="unit"
:value="unit"
> >
<option {{ $t(`time.${unit}_short`, ['']) }}
v-for="unit in expiryUnits" </option>
:key="unit" </Select>
:value="unit"
>
{{ $t(`time.${unit}_short`, ['']) }}
</option>
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
</div> </div>
</div> </div>
</div> </div>
@ -147,10 +139,8 @@
.poll-type { .poll-type {
margin-right: 0.75em; margin-right: 0.75em;
flex: 1 1 60%; flex: 1 1 60%;
.select {
border: none; .poll-type-select {
box-shadow: none;
background-color: transparent;
padding-right: 0.75em; padding-right: 0.75em;
} }
} }
@ -162,12 +152,6 @@
width: 3em; width: 3em;
text-align: right; text-align: right;
} }
.expiry-unit {
border: none;
box-shadow: none;
background-color: transparent;
}
} }
} }
</style> </style>

View File

@ -11,10 +11,10 @@ import { reject, map, uniqBy, debounce } from 'lodash'
import suggestor from '../emoji_input/suggestor.js' import suggestor from '../emoji_input/suggestor.js'
import { mapGetters, mapState } from 'vuex' import { mapGetters, mapState } from 'vuex'
import Checkbox from '../checkbox/checkbox.vue' import Checkbox from '../checkbox/checkbox.vue'
import Select from '../select/select.vue'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faChevronDown,
faSmileBeam, faSmileBeam,
faPollH, faPollH,
faUpload, faUpload,
@ -24,7 +24,6 @@ import {
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faChevronDown,
faSmileBeam, faSmileBeam,
faPollH, faPollH,
faUpload, faUpload,
@ -84,6 +83,7 @@ const PostStatusForm = {
PollForm, PollForm,
ScopeSelector, ScopeSelector,
Checkbox, Checkbox,
Select,
Attachment, Attachment,
StatusContent StatusContent
}, },

View File

@ -189,28 +189,19 @@
v-if="postFormats.length > 1" v-if="postFormats.length > 1"
class="text-format" class="text-format"
> >
<label <Select
for="post-content-type" id="post-content-type"
class="select" v-model="newStatus.contentType"
class="form-control"
> >
<select <option
id="post-content-type" v-for="postFormat in postFormats"
v-model="newStatus.contentType" :key="postFormat"
class="form-control" :value="postFormat"
> >
<option {{ $t(`post_status.content_type["${postFormat}"]`) }}
v-for="postFormat in postFormats" </option>
:key="postFormat" </Select>
:value="postFormat"
>
{{ $t(`post_status.content_type["${postFormat}"]`) }}
</option>
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
</div> </div>
<div <div
v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'" v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"

View 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'
]
}

View 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>

View 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)
}
}
}

View File

@ -18,40 +18,4 @@
</label> </label>
</template> </template>
<script> <script src="./boolean_setting.js"></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>

View 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)
}
}
}

View 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>

View File

@ -7,13 +7,24 @@
margin: 1em 1em 1.4em; margin: 1em 1em 1.4em;
padding-bottom: 1.4em; padding-bottom: 1.4em;
> div { > div,
> label {
display: block;
margin-bottom: .5em; margin-bottom: .5em;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.select-multiple {
display: flex;
.option-list {
margin: 0;
padding-left: .5em;
}
}
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
padding-bottom: 0; padding-bottom: 0;

View File

@ -1,24 +1,23 @@
import { filter, trim } from 'lodash' import { filter, trim } from 'lodash'
import BooleanSetting from '../helpers/boolean_setting.vue' import BooleanSetting from '../helpers/boolean_setting.vue'
import ChoiceSetting from '../helpers/choice_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js' 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 = { const FilteringTab = {
data () { data () {
return { 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: { components: {
BooleanSetting BooleanSetting,
ChoiceSetting
}, },
computed: { computed: {
...SharedComputedObject(), ...SharedComputedObject(),

View File

@ -36,29 +36,13 @@
</li> </li>
</ul> </ul>
</div> </div>
<div> <ChoiceSetting
id="replyVisibility"
path="replyVisibility"
:options="replyVisibilityOptions"
>
{{ $t('settings.replies_in_timeline') }} {{ $t('settings.replies_in_timeline') }}
<label </ChoiceSetting>
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>
<div> <div>
<BooleanSetting path="hidePostStats"> <BooleanSetting path="hidePostStats">
{{ $t('settings.hide_post_stats') }} {{ $t('settings.hide_post_stats') }}

View File

@ -1,21 +1,25 @@
import BooleanSetting from '../helpers/boolean_setting.vue' 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 InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js' import SharedComputedObject from '../helpers/shared_computed_object.js'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faChevronDown,
faGlobe faGlobe
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faChevronDown,
faGlobe faGlobe
) )
const GeneralTab = { const GeneralTab = {
data () { data () {
return { return {
subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
key: mode,
value: mode,
label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
})),
loopSilentAvailable: loopSilentAvailable:
// Firefox // Firefox
Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') || Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@ -27,12 +31,20 @@ const GeneralTab = {
}, },
components: { components: {
BooleanSetting, BooleanSetting,
ChoiceSetting,
InterfaceLanguageSwitcher InterfaceLanguageSwitcher
}, },
computed: { computed: {
postFormats () { postFormats () {
return this.$store.state.instance.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 }, instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
instanceWallpaperUsed () { instanceWallpaperUsed () {
return this.$store.state.instance.background && return this.$store.state.instance.background &&

View File

@ -90,62 +90,22 @@
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<div> <ChoiceSetting
id="subjectLineBehavior"
path="subjectLineBehavior"
:options="subjectLineOptions"
>
{{ $t('settings.subject_line_behavior') }} {{ $t('settings.subject_line_behavior') }}
<label </ChoiceSetting>
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>
</li> </li>
<li v-if="postFormats.length > 0"> <li v-if="postFormats.length > 0">
<div> <ChoiceSetting
id="postContentType"
path="postContentType"
:options="postContentOptions"
>
{{ $t('settings.post_status_content_type') }} {{ $t('settings.post_status_content_type') }}
<label </ChoiceSetting>
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>
</li> </li>
<li> <li>
<BooleanSetting path="minimalScopesMode"> <BooleanSetting path="minimalScopesMode">

View File

@ -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 ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
import Checkbox from 'src/components/checkbox/checkbox.vue' import Checkbox from 'src/components/checkbox/checkbox.vue'
import Select from 'src/components/select/select.vue'
import Preview from './preview.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 // List of color values used in v1
const v1OnlyNames = [ const v1OnlyNames = [
@ -395,7 +388,8 @@ export default {
FontControl, FontControl,
TabSwitcher, TabSwitcher,
Preview, Preview,
Checkbox Checkbox,
Select
}, },
methods: { methods: {
loadTheme ( loadTheme (

View File

@ -55,7 +55,7 @@
for="preset-switcher" for="preset-switcher"
class="select" class="select"
> >
<select <Select
id="preset-switcher" id="preset-switcher"
v-model="selected" v-model="selected"
class="preset-switcher" class="preset-switcher"
@ -71,11 +71,7 @@
> >
{{ style[0] || style.name }} {{ style[0] || style.name }}
</option> </option>
</select> </Select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label> </label>
</div> </div>
<div class="export-import"> <div class="export-import">
@ -907,28 +903,19 @@
<div class="tab-header shadow-selector"> <div class="tab-header shadow-selector">
<div class="select-container"> <div class="select-container">
{{ $t('settings.style.shadows.component') }} {{ $t('settings.style.shadows.component') }}
<label <Select
for="shadow-switcher" id="shadow-switcher"
class="select" v-model="shadowSelected"
class="shadow-switcher"
> >
<select <option
id="shadow-switcher" v-for="shadow in shadowsAvailable"
v-model="shadowSelected" :key="shadow"
class="shadow-switcher" :value="shadow"
> >
<option {{ $t('settings.style.shadows.components.' + shadow) }}
v-for="shadow in shadowsAvailable" </option>
:key="shadow" </Select>
:value="shadow"
>
{{ $t('settings.style.shadows.components.' + shadow) }}
</option>
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
</div> </div>
<div class="override"> <div class="override">
<label <label

View File

@ -1,5 +1,6 @@
import ColorInput from '../color_input/color_input.vue' import ColorInput from '../color_input/color_input.vue'
import OpacityInput from '../opacity_input/opacity_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 { getCssShadow } from '../../services/style_setter/style_setter.js'
import { hex2rgb } from '../../services/color_convert/color_convert.js' import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
@ -45,7 +46,8 @@ export default {
}, },
components: { components: {
ColorInput, ColorInput,
OpacityInput OpacityInput,
Select
}, },
methods: { methods: {
add () { add () {

View File

@ -59,30 +59,20 @@
:disabled="usingFallback" :disabled="usingFallback"
class="id-control style-control" class="id-control style-control"
> >
<label <Select
for="shadow-switcher" id="shadow-switcher"
class="select" v-model="selectedId"
class="shadow-switcher"
:disabled="!ready || usingFallback" :disabled="!ready || usingFallback"
> >
<select <option
id="shadow-switcher" v-for="(shadow, index) in cValue"
v-model="selectedId" :key="index"
class="shadow-switcher" :value="index"
:disabled="!ready || usingFallback"
> >
<option {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
v-for="(shadow, index) in cValue" </option>
:key="index" </Select>
:value="index"
>
{{ $t('settings.style.shadows.shadow_id', { value: index }) }}
</option>
</select>
<FAIcon
icon="chevron-down"
class="select-down-icon"
/>
</label>
<button <button
class="btn button-default" class="btn button-default"
:disabled="!ready || !present" :disabled="!ready || !present"
@ -316,20 +306,20 @@
.id-control { .id-control {
align-items: stretch; align-items: stretch;
.select, .btn {
.shadow-switcher {
flex: 1;
}
.shadow-switcher, .btn {
min-width: 1px; min-width: 1px;
margin-right: 5px; margin-right: 5px;
} }
.btn { .btn {
padding: 0 .4em; padding: 0 .4em;
margin: 0 .1em; margin: 0 .1em;
} }
.select {
flex: 1;
select {
align-self: initial;
}
}
} }
} }
} }

View File

@ -4,13 +4,13 @@ import ProgressButton from '../progress_button/progress_button.vue'
import FollowButton from '../follow_button/follow_button.vue' import FollowButton from '../follow_button/follow_button.vue'
import ModerationTools from '../moderation_tools/moderation_tools.vue' import ModerationTools from '../moderation_tools/moderation_tools.vue'
import AccountActions from '../account_actions/account_actions.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 generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faBell, faBell,
faRss, faRss,
faChevronDown,
faSearchPlus, faSearchPlus,
faExternalLinkAlt faExternalLinkAlt
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
@ -18,7 +18,6 @@ import {
library.add( library.add(
faRss, faRss,
faBell, faBell,
faChevronDown,
faSearchPlus, faSearchPlus,
faExternalLinkAlt faExternalLinkAlt
) )
@ -118,7 +117,8 @@ export default {
ModerationTools, ModerationTools,
AccountActions, AccountActions,
ProgressButton, ProgressButton,
FollowButton FollowButton,
Select
}, },
methods: { methods: {
muteUser () { muteUser () {

View File

@ -132,25 +132,24 @@
class="userHighlightCl" class="userHighlightCl"
type="color" type="color"
> >
<label <Select
for="theme_tab" :id="'userHighlightSel'+user.id"
class="userHighlightSel select" v-model="userHighlightType"
class="userHighlightSel"
> >
<select <option value="disabled">
:id="'userHighlightSel'+user.id" {{ $t('user_card.highlight.disabled') }}
v-model="userHighlightType" </option>
class="userHighlightSel" <option value="solid">
> {{ $t('user_card.highlight.solid') }}
<option value="disabled">{{ $t('user_card.highlight.disabled') }}</option> </option>
<option value="solid">{{ $t('user_card.highlight.solid') }}</option> <option value="striped">
<option value="striped">{{ $t('user_card.highlight.striped') }}</option> {{ $t('user_card.highlight.striped') }}
<option value="side">{{ $t('user_card.highlight.side') }}</option> </option>
</select> <option value="side">
<FAIcon {{ $t('user_card.highlight.side') }}
class="select-down-icon" </option>
icon="chevron-down" </Select>
/>
</label>
</div> </div>
</div> </div>
<div <div
@ -541,15 +540,11 @@
flex: 1 0 auto; flex: 1 0 auto;
} }
.userHighlightSel, .userHighlightSel {
.userHighlightSel.select {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
flex: 1 0 auto; flex: 1 0 auto;
} }
.userHighlightSel.select svg {
line-height: 22px;
}
.userHighlightText { .userHighlightText {
width: 70px; width: 70px;
@ -558,9 +553,7 @@
.userHighlightCl, .userHighlightCl,
.userHighlightText, .userHighlightText,
.userHighlightSel, .userHighlightSel {
.userHighlightSel.select {
height: 22px;
vertical-align: top; vertical-align: top;
margin-right: .5em; margin-right: .5em;
margin-bottom: .25em; margin-bottom: .25em;