fristi/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Made Select component to make using styled selects easier

Browse source
This commit is contained in:
Henry Jameson 2021-03-11 16:11:44 +02:00
parent 6281241b92
commit c6d4c20982
19 changed files with 240 additions and 317 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/App.scss
View file

@ -187,7 +187,7 @@ a {
}
}
input, textarea, .select, .input {
input, textarea, .input {
&.unstyled {
border-radius: 0;
@ -217,11 +217,7 @@ 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;
}
@ -239,25 +235,6 @@ input, textarea, .select, .input {
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;
@ -809,13 +786,6 @@ nav {
}
}
.select-multiple {
display: flex;
.option-list {
margin: 0;
padding-left: .5em;
}
}
.setting-list,
.option-list{
list-style-type: none;

12
src/components/font_control/font_control.js
View file

@ -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'
],

14
src/components/font_control/font_control.vue
View file

@ -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"

25
src/components/interface_language_switcher/interface_language_switcher.vue
View file

@ -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))

6
src/components/poll/poll_form.js
View file

@ -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: () => ({

25
src/components/poll/poll_form.vue
View file

@ -46,23 +46,13 @@
class="poll-type"
:title="$t('polls.type')"
>
<label
for="poll-type-selector"
class="select"
>
<select
<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>
</Select>
</div>
<div
class="poll-expiry"
@ -76,9 +66,9 @@
:max="maxExpirationInCurrentUnit"
@change="expiryAmountChange"
>
<label class="expiry-unit select">
<select
<Select
v-model="expiryUnit"
class="expiry-unit"
@change="expiryAmountChange"
>
<option
@ -88,12 +78,7 @@
>
{{ $t(`time.${unit}_short`, ['']) }}
</option>
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
</Select>
</div>
</div>
</div>

4
src/components/post_status_form/post_status_form.js
View file

@ -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
},

13
src/components/post_status_form/post_status_form.vue
View file

@ -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'"

67
src/components/select/select.vue Normal file
View file

@ -0,0 +1,67 @@
<template>
<label
class="Select input"
:class="{ disabled }"
>
<select
:disabled="disabled"
:value="value"
@change="$emit('change', $event.target.value)"
>
<slot />
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
</template>
<script>
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'
]
}
</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;
}
}
</style>

12
src/components/settings_modal/tabs/filtering_tab.js
View file

@ -1,15 +1,8 @@
import { filter, trim } from 'lodash'
import BooleanSetting from '../helpers/boolean_setting.vue'
import Select from '../../select/select.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 () {
@ -18,7 +11,8 @@ const FilteringTab = {
}
},
components: {
BooleanSetting
BooleanSetting,
Select
},
computed: {
...SharedComputedObject(),

22
src/components/settings_modal/tabs/filtering_tab.vue
View file

@ -38,11 +38,7 @@
</div>
<div>
{{ $t('settings.replies_in_timeline') }}
<label
for="replyVisibility"
class="select"
>
<select
<Select
id="replyVisibility"
v-model="replyVisibility"
>
@ -52,12 +48,7 @@
>{{ $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>
</Select>
</div>
<div>
<BooleanSetting path="hidePostStats">
@ -88,3 +79,12 @@
</div>
</template>
<script src="./filtering_tab.js"></script>
<style lang="scss">
.select-multiple {
display: flex;
.option-list {
margin: 0;
padding-left: .5em;
}
}
</style>

6
src/components/settings_modal/tabs/general_tab.js
View file

@ -1,15 +1,14 @@
import BooleanSetting from '../helpers/boolean_setting.vue'
import Select from '../../select/select.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
)
@ -27,7 +26,8 @@ const GeneralTab = {
},
components: {
BooleanSetting,
InterfaceLanguageSwitcher
InterfaceLanguageSwitcher,
Select
},
computed: {
postFormats () {

26
src/components/settings_modal/tabs/general_tab.vue
View file

@ -87,11 +87,7 @@
<li>
<div>
{{ $t('settings.subject_line_behavior') }}
<label
for="subjectLineBehavior"
class="select"
>
<select
<Select
id="subjectLineBehavior"
v-model="subjectLineBehavior"
>
@ -107,22 +103,13 @@
{{ $t('settings.subject_line_noop') }}
{{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
</option>
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
</Select>
</div>
</li>
<li v-if="postFormats.length > 0">
<div>
{{ $t('settings.post_status_content_type') }}
<label
for="postContentType"
class="select"
>
<select
<Select
id="postContentType"
v-model="postContentType"
>
@ -134,12 +121,7 @@
{{ $t(`post_status.content_type["${postFormat}"]`) }}
{{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
</option>
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
</Select>
</div>
</li>
<li>

12
src/components/settings_modal/tabs/theme_tab/theme_tab.js
View file

@ -33,16 +33,9 @@ import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
import ExportImport from 'src/components/export_import/export_import.vue'
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 = [
@ -384,7 +377,8 @@ export default {
TabSwitcher,
Preview,
ExportImport,
Checkbox
Checkbox,
Select
},
methods: {
loadTheme (

26
src/components/settings_modal/tabs/theme_tab/theme_tab.vue
View file

@ -59,11 +59,7 @@
<template slot="before">
<div class="presets">
{{ $t('settings.presets') }}
<label
for="preset-switcher"
class="select"
>
<select
<Select
id="preset-switcher"
v-model="selected"
class="preset-switcher"
@ -79,12 +75,7 @@
>
{{ style[0] || style.name }}
</option>
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
</Select>
</div>
</template>
</ExportImport>
@ -902,11 +893,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"
@ -918,12 +905,7 @@
>
{{ $t('settings.style.shadows.components.' + shadow) }}
</option>
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
</Select>
</div>
<div class="override">
<label

4
src/components/shadow_control/shadow_control.js
View file

@ -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 () {

14
src/components/shadow_control/shadow_control.vue
View file

@ -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"

6
src/components/user_card/user_card.js
View file

@ -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 () {

13
src/components/user_card/user_card.vue
View file

@ -132,11 +132,7 @@
class="userHighlightCl"
type="color"
>
<label
for="theme_tab"
class="userHighlightSel select"
>
<select
<Select
:id="'userHighlightSel'+user.id"
v-model="userHighlightType"
class="userHighlightSel"
@ -145,12 +141,7 @@
<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>
</Select>
</div>
</div>
<div