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

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

@ -126,11 +126,15 @@ 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;">
<Layout stack noGap label for="favorites-ordering">
<span class="label">
{{ t('components.favorites.List.ordering.label') }}
</span>
<select <select
id="favorites-ordering" id="favorites-ordering"
v-model="ordering" v-model="ordering"
:label="t('components.favorites.List.ordering.label')"
class="dropdown" class="dropdown"
> >
<option <option
@ -141,9 +145,13 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
{{ sharedLabels.filters[option[1]] }} {{ sharedLabels.filters[option[1]] }}
</option> </option>
</select> </select>
</Layout>
<Layout stack noGap label for="favorites-ordering-direction">
<span class="label">
{{ t('components.favorites.List.ordering.direction.label') }}
</span>
<select <select
id="favorites-ordering-direction" id="favorites-ordering-direction"
:label="t('components.favorites.List.ordering.direction.label')"
v-model="orderingDirection" v-model="orderingDirection"
class="dropdown" class="dropdown"
> >
@ -154,10 +162,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
{{ t('components.favorites.List.ordering.direction.descending') }} {{ t('components.favorites.List.ordering.direction.descending') }}
</option> </option>
</select> </select>
</Layout>
<Layout stack noGap label for="favorites-results">
<span class="label">
{{ t('components.favorites.List.pagination.results') }}
</span>
<select <select
id="favorites-results" id="favorites-results"
v-model="paginateBy" v-model="paginateBy"
:label="t('components.favorites.List.pagination.results')"
class="dropdown" class="dropdown"
> >
<option <option
@ -169,6 +181,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</option> </option>
</select> </select>
</Layout> </Layout>
</Layout>
<TrackTable <TrackTable
v-if="results" v-if="results"
:search="true" :search="true"

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

@ -150,9 +150,12 @@ 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;"
/> />
<Layout stack noGap label for="album-ordering">
<span class="label">
{{ t('components.library.Albums.ordering.label') }}
</span>
<select <select
id="album-ordering" id="album-ordering"
:label="t('components.library.Albums.ordering.label')"
v-model="ordering" v-model="ordering"
class="dropdown" class="dropdown"
> >
@ -164,8 +167,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
{{ sharedLabels.filters[option[1]] }} {{ sharedLabels.filters[option[1]] }}
</option> </option>
</select> </select>
</Layout>
<Layout stack noGap label for="album-ordering-direction">
<span class="label">
{{ t('components.library.Albums.ordering.direction.label') }}
</span>
<select <select
:label="t('components.library.Albums.ordering.direction.label')"
id="album-ordering-direction" id="album-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="dropdown" class="dropdown"
@ -177,8 +184,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
{{ t('components.library.Albums.ordering.direction.descending') }} {{ t('components.library.Albums.ordering.direction.descending') }}
</option> </option>
</select> </select>
</Layout>
<Layout stack noGap label for="album-results">
<span class="label">
{{ t('components.library.Albums.pagination.results') }}
</span>
<select <select
:label="t('components.library.Albums.pagination.results')"
id="album-results" id="album-results"
v-model="paginateBy" v-model="paginateBy"
class="dropdown" class="dropdown"
@ -192,6 +203,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</option> </option>
</select> </select>
</Layout> </Layout>
</Layout>
<Loader v-if="isLoading"/> <Loader v-if="isLoading"/>
<Pagination <Pagination
v-if="result && result.count > paginateBy" v-if="result && result.count > paginateBy"

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

@ -149,9 +149,12 @@ 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;"
/> />
<Layout stack noGap label for="artist-ordering">
<span class="label">
{{ t('components.library.Artists.ordering.label') }}
</span>
<select <select
id="artist-ordering" id="artist-ordering"
:label="t('components.library.Artists.ordering.label')"
v-model="ordering" v-model="ordering"
class="dropdown" class="dropdown"
> >
@ -163,8 +166,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
{{ sharedLabels.filters[option[1]] }} {{ sharedLabels.filters[option[1]] }}
</option> </option>
</select> </select>
</Layout>
<Layout stack noGap label for="artist-ordering-direction">
<span class="label">
{{ t('components.library.Artists.ordering.direction.label') }}
</span>
<select <select
:label="t('components.library.Artists.ordering.direction.label')"
id="artist-ordering-direction" id="artist-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="dropdown" class="dropdown"
@ -176,8 +183,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
{{ t('components.library.Artists.ordering.direction.descending') }} {{ t('components.library.Artists.ordering.direction.descending') }}
</option> </option>
</select> </select>
</Layout>
<Layout stack noGap label for="artist-results">
<span class="label">
{{ t('components.library.Artists.pagination.results') }}
</span>
<select <select
:label="t('components.library.Artists.pagination.results')"
id="artist-results" id="artist-results"
v-model="paginateBy" v-model="paginateBy"
class="dropdown" class="dropdown"
@ -190,6 +201,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
{{ opt }} {{ opt }}
</option> </option>
</select> </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>

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

@ -165,9 +165,12 @@ 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;"
/> />
<Layout stack noGap label for="artist-ordering">
<span class="label">
{{ t('components.library.Podcasts.ordering.label') }}
</span>
<select <select
id="artist-ordering" id="artist-ordering"
:label="t('components.library.Podcasts.ordering.label')"
v-model="ordering" v-model="ordering"
class="dropdown" class="dropdown"
> >
@ -179,8 +182,12 @@ const isOpen = computed({
{{ sharedLabels.filters[option[1]] }} {{ sharedLabels.filters[option[1]] }}
</option> </option>
</select> </select>
</Layout>
<Layout stack noGap label for="artist-ordering-direction">
<span class="label">
{{ t('components.library.Podcasts.ordering.direction.label') }}
</span>
<select <select
:label="t('components.library.Podcasts.ordering.direction.label')"
id="artist-ordering-direction" id="artist-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="dropdown" class="dropdown"
@ -192,8 +199,12 @@ const isOpen = computed({
{{ t('components.library.Podcasts.ordering.direction.descending') }} {{ t('components.library.Podcasts.ordering.direction.descending') }}
</option> </option>
</select> </select>
</Layout>
<Layout stack noGap label for="artist-results">
<span class="label">
{{ t('components.library.Podcasts.pagination.results') }}
</span>
<select <select
:label="t('components.library.Podcasts.pagination.results')"
id="artist-results" id="artist-results"
v-model="paginateBy" v-model="paginateBy"
class="dropdown" class="dropdown"
@ -207,6 +218,7 @@ const isOpen = computed({
</option> </option>
</select> </select>
</Layout> </Layout>
</Layout>
<Layout grid <Layout grid
v-if="result && result.results.length > 0" v-if="result && result.results.length > 0"
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;" style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"

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

@ -158,9 +158,12 @@ 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"
/> />
<Layout stack noGap label for="radios-ordering">
<span class="label">
{{ t('components.library.Radios.ordering.label') }}
</span>
<select <select
id="radios-ordering" id="radios-ordering"
:label="t('components.library.Radios.ordering.label')"
v-model="ordering" v-model="ordering"
class="dropdown" class="dropdown"
> >
@ -172,9 +175,13 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
{{ sharedLabels.filters[option[1]] }} {{ sharedLabels.filters[option[1]] }}
</option> </option>
</select> </select>
</Layout>
<Layout stack noGap label for="radios-ordering-direction">
<span class="label">
{{ t('components.library.Radios.ordering.direction.label') }}
</span>
<select <select
id="radios-ordering-direction" id="radios-ordering-direction"
:label="t('components.library.Radios.ordering.direction.label')"
v-model="orderingDirection" v-model="orderingDirection"
class="dropdown" class="dropdown"
> >
@ -185,9 +192,13 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
{{ t('components.library.Radios.ordering.direction.descending') }} {{ t('components.library.Radios.ordering.direction.descending') }}
</option> </option>
</select> </select>
</Layout>
<Layout stack noGap label for="radios-results">
<span class="label">
{{ t('components.library.Radios.pagination.results') }}
</span>
<select <select
id="radios-results" id="radios-results"
:label="t('components.library.Radios.pagination.results')"
v-model="paginateBy" v-model="paginateBy"
class="dropdown" class="dropdown"
> >
@ -200,6 +211,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</option> </option>
</select> </select>
</Layout> </Layout>
</Layout>
<Alert <Alert
blue blue
style="align-items: center;" style="align-items: center;"

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

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

@ -134,9 +134,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
:placeholder="labels.searchPlaceholder" :placeholder="labels.searchPlaceholder"
> >
</Input> </Input>
<Layout stack noGap label for="playlists-ordering">
<span class="label">
{{ t('views.playlists.List.ordering.label') }}
</span>
<select <select
id="playlists-ordering" id="playlists-ordering"
:label="t('views.playlists.List.ordering.label')"
v-model="ordering" v-model="ordering"
class="dropdown" class="dropdown"
> >
@ -148,8 +151,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
{{ sharedLabels.filters[option[1]] }} {{ sharedLabels.filters[option[1]] }}
</option> </option>
</select> </select>
</Layout>
<Layout stack noGap label for="playlists-ordering-direction">
<span class="label">
{{ t('views.playlists.List.ordering.direction.label') }}
</span>
<select <select
:label="t('views.playlists.List.ordering.direction.label')"
id="playlists-ordering-direction" id="playlists-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="dropdown" class="dropdown"
@ -161,8 +168,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
{{ t('views.playlists.List.ordering.direction.descending') }} {{ t('views.playlists.List.ordering.direction.descending') }}
</option> </option>
</select> </select>
</Layout>
<Layout stack noGap label for="playlist-results">
<span class="label">
{{ t('views.playlists.List.pagination.results') }}
</span>
<select <select
:label="t('views.playlists.List.pagination.results')"
id="playlist-results" id="playlist-results"
v-model="paginateBy" v-model="paginateBy"
class="dropdown" class="dropdown"
@ -176,6 +187,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</option> </option>
</select> </select>
</Layout> </Layout>
</Layout>
<template <template
v-if="result && result.results.length > 0" v-if="result && result.results.length > 0"
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;" style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"