MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(front): labels for select input fields

This commit is contained in:
ArneBo 2025-01-29 23:15:36 +01:00
parent 5e986e9fec
commit 08ef2e0137
7 changed files with 321 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
front/src/components/favorites/List.vue
View File

@ -126,48 +126,61 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
stack stack
:class="['ui', { 'loading': isLoading }, 'form']" :class="['ui', { 'loading': isLoading }, 'form']"
> >
<Spacer :size="16" />
<Layout flex style="justify-content: flex-end;"> <Layout flex style="justify-content: flex-end;">
<select <Layout stack noGap label for="favorites-ordering">
id="favorites-ordering" <span class="label">
v-model="ordering" {{ t('components.favorites.List.ordering.label') }}
:label="t('components.favorites.List.ordering.label')" </span>
class="dropdown" <select
> id="favorites-ordering"
<option v-model="ordering"
v-for="option in orderingOptions" class="dropdown"
:key="option[0]"
:value="option[0]"
> >
{{ sharedLabels.filters[option[1]] }} <option
</option> v-for="option in orderingOptions"
</select> :key="option[0]"
<select :value="option[0]"
id="favorites-ordering-direction" >
:label="t('components.favorites.List.ordering.direction.label')" {{ sharedLabels.filters[option[1]] }}
v-model="orderingDirection" </option>
class="dropdown" </select>
> </Layout>
<option value="+"> <Layout stack noGap label for="favorites-ordering-direction">
{{ t('components.favorites.List.ordering.direction.ascending') }} <span class="label">
</option> {{ t('components.favorites.List.ordering.direction.label') }}
<option value="-"> </span>
{{ t('components.favorites.List.ordering.direction.descending') }} <select
</option> id="favorites-ordering-direction"
</select> v-model="orderingDirection"
<select class="dropdown"
id="favorites-results"
v-model="paginateBy"
:label="t('components.favorites.List.pagination.results')"
class="dropdown"
>
<option
v-for="opt in paginateOptions"
:key="opt"
:value="opt"
> >
{{ opt }} <option value="+">
</option> {{ t('components.favorites.List.ordering.direction.ascending') }}
</select> </option>
<option value="-">
{{ t('components.favorites.List.ordering.direction.descending') }}
</option>
</select>
</Layout>
<Layout stack noGap label for="favorites-results">
<span class="label">
{{ t('components.favorites.List.pagination.results') }}
</span>
<select
id="favorites-results"
v-model="paginateBy"
class="dropdown"
>
<option
v-for="opt in paginateOptions"
:key="opt"
:value="opt"
>
{{ opt }}
</option>
</select>
</Layout>
</Layout> </Layout>
<TrackTable <TrackTable
v-if="results" v-if="results"

90
front/src/components/library/Albums.vue
View File

@ -150,47 +150,59 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
:label="t('components.library.Albums.label.tags')" :label="t('components.library.Albums.label.tags')"
style="max-width: 150px;" style="max-width: 150px;"
/> />
<select <Layout stack noGap label for="album-ordering">
id="album-ordering" <span class="label">
:label="t('components.library.Albums.ordering.label')" {{ t('components.library.Albums.ordering.label') }}
v-model="ordering" </span>
class="dropdown" <select
> id="album-ordering"
<option v-model="ordering"
v-for="(option, key) in orderingOptions" class="dropdown"
:key="key"
:value="option[0]"
> >
{{ sharedLabels.filters[option[1]] }} <option
</option> v-for="(option, key) in orderingOptions"
</select> :key="key"
<select :value="option[0]"
:label="t('components.library.Albums.ordering.direction.label')" >
id="album-ordering-direction" {{ sharedLabels.filters[option[1]] }}
v-model="orderingDirection" </option>
class="dropdown" </select>
> </Layout>
<option value="+"> <Layout stack noGap label for="album-ordering-direction">
{{ t('components.library.Albums.ordering.direction.ascending') }} <span class="label">
</option> {{ t('components.library.Albums.ordering.direction.label') }}
<option value="-"> </span>
{{ t('components.library.Albums.ordering.direction.descending') }} <select
</option> id="album-ordering-direction"
</select> v-model="orderingDirection"
<select class="dropdown"
:label="t('components.library.Albums.pagination.results')"
id="album-results"
v-model="paginateBy"
class="dropdown"
>
<option
v-for="opt in paginateOptions"
:key="opt"
:value="opt"
> >
{{ opt }} <option value="+">
</option> {{ t('components.library.Albums.ordering.direction.ascending') }}
</select> </option>
<option value="-">
{{ t('components.library.Albums.ordering.direction.descending') }}
</option>
</select>
</Layout>
<Layout stack noGap label for="album-results">
<span class="label">
{{ t('components.library.Albums.pagination.results') }}
</span>
<select
id="album-results"
v-model="paginateBy"
class="dropdown"
>
<option
v-for="opt in paginateOptions"
:key="opt"
:value="opt"
>
{{ opt }}
</option>
</select>
</Layout>
</Layout> </Layout>
<Loader v-if="isLoading"/> <Loader v-if="isLoading"/>
<Pagination <Pagination

98
front/src/components/library/Artists.vue
View File

@ -149,47 +149,59 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
:label="t('components.library.Artists.label.tags')" :label="t('components.library.Artists.label.tags')"
style="max-width: 150px;" style="max-width: 150px;"
/> />
<select <Layout stack noGap label for="artist-ordering">
id="artist-ordering" <span class="label">
:label="t('components.library.Artists.ordering.label')" {{ t('components.library.Artists.ordering.label') }}
v-model="ordering" </span>
class="dropdown" <select
> id="artist-ordering"
<option v-model="ordering"
v-for="(option, key) in orderingOptions" class="dropdown"
:key="key"
:value="option[0]"
> >
{{ sharedLabels.filters[option[1]] }} <option
</option> v-for="(option, key) in orderingOptions"
</select> :key="key"
<select :value="option[0]"
:label="t('components.library.Artists.ordering.direction.label')" >
id="artist-ordering-direction" {{ sharedLabels.filters[option[1]] }}
v-model="orderingDirection" </option>
class="dropdown" </select>
> </Layout>
<option value="+"> <Layout stack noGap label for="artist-ordering-direction">
{{ t('components.library.Artists.ordering.direction.ascending') }} <span class="label">
</option> {{ t('components.library.Artists.ordering.direction.label') }}
<option value="-"> </span>
{{ t('components.library.Artists.ordering.direction.descending') }} <select
</option> id="artist-ordering-direction"
</select> v-model="orderingDirection"
<select class="dropdown"
:label="t('components.library.Artists.pagination.results')"
id="artist-results"
v-model="paginateBy"
class="dropdown"
>
<option
v-for="opt in paginateOptions"
:key="opt"
:value="opt"
> >
{{ opt }} <option value="+">
</option> {{ t('components.library.Artists.ordering.direction.ascending') }}
</select> </option>
<option value="-">
{{ t('components.library.Artists.ordering.direction.descending') }}
</option>
</select>
</Layout>
<Layout stack noGap label for="artist-results">
<span class="label">
{{ t('components.library.Artists.pagination.results') }}
</span>
<select
id="artist-results"
v-model="paginateBy"
class="dropdown"
>
<option
v-for="opt in paginateOptions"
:key="opt"
:value="opt"
>
{{ opt }}
</option>
</select>
</Layout>
<Toggle <Toggle
:label="t('components.library.Artists.label.excludeCompilation')" :label="t('components.library.Artists.label.excludeCompilation')"
id="exclude-compilation" id="exclude-compilation"
@ -245,3 +257,11 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
/> />
</Layout> </Layout>
</template> </template>
<style lang="scss" scoped>
.label {
margin-top: -18px;
font-size: 14px;
font-weight: 600;
}
</style>

90
front/src/components/library/Podcasts.vue
View File

@ -165,47 +165,59 @@ const isOpen = computed({
:label="t('components.library.Podcasts.label.tags')" :label="t('components.library.Podcasts.label.tags')"
style="max-width: 150px;" style="max-width: 150px;"
/> />
<select <Layout stack noGap label for="artist-ordering">
id="artist-ordering" <span class="label">
:label="t('components.library.Podcasts.ordering.label')" {{ t('components.library.Podcasts.ordering.label') }}
v-model="ordering" </span>
class="dropdown" <select
> id="artist-ordering"
<option v-model="ordering"
v-for="(option, key) in orderingOptions" class="dropdown"
:key="key"
:value="option[0]"
> >
{{ sharedLabels.filters[option[1]] }} <option
</option> v-for="(option, key) in orderingOptions"
</select> :key="key"
<select :value="option[0]"
:label="t('components.library.Podcasts.ordering.direction.label')" >
id="artist-ordering-direction" {{ sharedLabels.filters[option[1]] }}
v-model="orderingDirection" </option>
class="dropdown" </select>
> </Layout>
<option value="+"> <Layout stack noGap label for="artist-ordering-direction">
{{ t('components.library.Podcasts.ordering.direction.ascending') }} <span class="label">
</option> {{ t('components.library.Podcasts.ordering.direction.label') }}
<option value="-"> </span>
{{ t('components.library.Podcasts.ordering.direction.descending') }} <select
</option> id="artist-ordering-direction"
</select> v-model="orderingDirection"
<select class="dropdown"
:label="t('components.library.Podcasts.pagination.results')"
id="artist-results"
v-model="paginateBy"
class="dropdown"
>
<option
v-for="opt in paginateOptions"
:key="opt"
:value="opt"
> >
{{ opt }} <option value="+">
</option> {{ t('components.library.Podcasts.ordering.direction.ascending') }}
</select> </option>
<option value="-">
{{ t('components.library.Podcasts.ordering.direction.descending') }}
</option>
</select>
</Layout>
<Layout stack noGap label for="artist-results">
<span class="label">
{{ t('components.library.Podcasts.pagination.results') }}
</span>
<select
id="artist-results"
v-model="paginateBy"
class="dropdown"
>
<option
v-for="opt in paginateOptions"
:key="opt"
:value="opt"
>
{{ opt }}
</option>
</select>
</Layout>
</Layout> </Layout>
<Layout grid <Layout grid
v-if="result && result.results.length > 0" v-if="result && result.results.length > 0"

90
front/src/components/library/Radios.vue
View File

@ -158,47 +158,59 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
:label="t('components.library.Radios.label.search')" :label="t('components.library.Radios.label.search')"
:placeholder="labels.searchPlaceholder" :placeholder="labels.searchPlaceholder"
/> />
<select <Layout stack noGap label for="radios-ordering">
id="radios-ordering" <span class="label">
:label="t('components.library.Radios.ordering.label')" {{ t('components.library.Radios.ordering.label') }}
v-model="ordering" </span>
class="dropdown" <select
> id="radios-ordering"
<option v-model="ordering"
v-for="(option, key) in orderingOptions" class="dropdown"
:key="key"
:value="option[0]"
> >
{{ sharedLabels.filters[option[1]] }} <option
</option> v-for="(option, key) in orderingOptions"
</select> :key="key"
<select :value="option[0]"
id="radios-ordering-direction" >
:label="t('components.library.Radios.ordering.direction.label')" {{ sharedLabels.filters[option[1]] }}
v-model="orderingDirection" </option>
class="dropdown" </select>
> </Layout>
<option value="+"> <Layout stack noGap label for="radios-ordering-direction">
{{ t('components.library.Radios.ordering.direction.ascending') }} <span class="label">
</option> {{ t('components.library.Radios.ordering.direction.label') }}
<option value="-"> </span>
{{ t('components.library.Radios.ordering.direction.descending') }} <select
</option> id="radios-ordering-direction"
</select> v-model="orderingDirection"
<select class="dropdown"
id="radios-results"
:label="t('components.library.Radios.pagination.results')"
v-model="paginateBy"
class="dropdown"
>
<option
v-for="opt in paginateOptions"
:key="opt"
:value="opt"
> >
{{ opt }} <option value="+">
</option> {{ t('components.library.Radios.ordering.direction.ascending') }}
</select> </option>
<option value="-">
{{ t('components.library.Radios.ordering.direction.descending') }}
</option>
</select>
</Layout>
<Layout stack noGap label for="radios-results">
<span class="label">
{{ t('components.library.Radios.pagination.results') }}
</span>
<select
id="radios-results"
v-model="paginateBy"
class="dropdown"
>
<option
v-for="opt in paginateOptions"
:key="opt"
:value="opt"
>
{{ opt }}
</option>
</select>
</Layout>
</Layout> </Layout>
<Alert <Alert
blue blue

6
front/src/style/components/_form.scss
View File

@ -26,6 +26,12 @@ input + .help {
} }
} }
} }
.ui.form span.label {
margin-top: -18px;
font-size: 14px;
font-weight: 600;
}
.ui.icon.input > .icon { .ui.icon.input > .icon {
color: var(--input-color); color: var(--input-color);
} }

90
front/src/views/playlists/List.vue
View File

@ -134,47 +134,59 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
:placeholder="labels.searchPlaceholder" :placeholder="labels.searchPlaceholder"
> >
</Input> </Input>
<select <Layout stack noGap label for="playlists-ordering">
id="playlists-ordering" <span class="label">
:label="t('views.playlists.List.ordering.label')" {{ t('views.playlists.List.ordering.label') }}
v-model="ordering" </span>
class="dropdown" <select
> id="playlists-ordering"
<option v-model="ordering"
v-for="(option, key) in orderingOptions" class="dropdown"
:key="key"
:value="option[0]"
> >
{{ sharedLabels.filters[option[1]] }} <option
</option> v-for="(option, key) in orderingOptions"
</select> :key="key"
<select :value="option[0]"
:label="t('views.playlists.List.ordering.direction.label')" >
id="playlists-ordering-direction" {{ sharedLabels.filters[option[1]] }}
v-model="orderingDirection" </option>
class="dropdown" </select>
> </Layout>
<option value="+"> <Layout stack noGap label for="playlists-ordering-direction">
{{ t('views.playlists.List.ordering.direction.ascending') }} <span class="label">
</option> {{ t('views.playlists.List.ordering.direction.label') }}
<option value="-"> </span>
{{ t('views.playlists.List.ordering.direction.descending') }} <select
</option> id="playlists-ordering-direction"
</select> v-model="orderingDirection"
<select class="dropdown"
:label="t('views.playlists.List.pagination.results')"
id="playlist-results"
v-model="paginateBy"
class="dropdown"
>
<option
v-for="opt in paginateOptions"
:key="opt"
:value="opt"
> >
{{ opt }} <option value="+">
</option> {{ t('views.playlists.List.ordering.direction.ascending') }}
</select> </option>
<option value="-">
{{ t('views.playlists.List.ordering.direction.descending') }}
</option>
</select>
</Layout>
<Layout stack noGap label for="playlist-results">
<span class="label">
{{ t('views.playlists.List.pagination.results') }}
</span>
<select
id="playlist-results"
v-model="paginateBy"
class="dropdown"
>
<option
v-for="opt in paginateOptions"
:key="opt"
:value="opt"
>
{{ opt }}
</option>
</select>
</Layout>
</Layout> </Layout>
<template <template
v-if="result && result.results.length > 0" v-if="result && result.results.length > 0"