danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: added webUI version in About page; style: added accordions in settings

This commit is contained in:
Roberto Tonino 2020-11-08 23:35:46 +01:00
parent fdece72d42
commit aa749eaf33
12 changed files with 405 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

4
rollup.config.js
View File

@ -7,6 +7,7 @@ import vue from 'rollup-plugin-vue'
import svg from 'rollup-plugin-svg' import svg from 'rollup-plugin-svg'
import postcss from 'rollup-plugin-postcss' import postcss from 'rollup-plugin-postcss'
import esbuild from 'rollup-plugin-esbuild' import esbuild from 'rollup-plugin-esbuild'
import { version } from './package.json'
const isProduction = !process.env.ROLLUP_WATCH const isProduction = !process.env.ROLLUP_WATCH
process.env.NODE_ENV = isProduction ? 'production' : 'development' process.env.NODE_ENV = isProduction ? 'production' : 'development'
@ -39,7 +40,8 @@ export default {
}), }),
// Needed for Vue imports // Needed for Vue imports
replace({ replace({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
__VER__: JSON.stringify(version)
}), }),
resolve(), // Tells Rollup how to find imported modules in node_modules resolve(), // Tells Rollup how to find imported modules in node_modules
commonjs(), // Converts imported modules to ES modules, if necessary commonjs(), // Converts imported modules to ES modules, if necessary

14
src/components/globals/BaseAccordion.vue
View File

@ -1,13 +1,12 @@
<template functional> <template functional>
<details :class="{ 'with-arrow': props.withArrow }"> <details :class="[data.staticClass, { 'with-arrow': props.withArrow }]">
<summary class="mb-6 cursor-pointer"> <summary class="cursor-pointer">
<slot name="title">Setting</slot> <slot name="title">Setting</slot>
</summary> </summary>
<slot name="default"> <div class="my-5 space-y-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos distinctio sint culpa, recusandae vel fugit esse hic <slot name="default"></slot>
tenetur autem. Debitis. </div>
</slot>
</details> </details>
</template> </template>
@ -18,6 +17,7 @@ details > summary::-webkit-details-marker {
details.with-arrow > summary::-webkit-details-marker { details.with-arrow > summary::-webkit-details-marker {
display: initial; display: initial;
vertical-align: super;
} }
</style> </style>
@ -26,7 +26,7 @@ export default {
props: { props: {
withArrow: { withArrow: {
type: Boolean, type: Boolean,
default: false default: true
} }
} }
} }

6
src/components/pages/About.vue
View File

@ -1,8 +1,12 @@
<template> <template>
<div id="about_tab" ref="root"> <div id="about_tab">
<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.about') }}</h1> <h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.about') }}</h1>
<ul> <ul>
<li>
{{ $t('about.updates.currentWebuiVersion') }}:
<span>{{ __VER__ || $t('about.updates.versionNotAvailable') }}</span>
</li>
<li> <li>
{{ $t('about.updates.currentVersion') }}: {{ $t('about.updates.currentVersion') }}:
<span>{{ current || $t('about.updates.versionNotAvailable') }}</span> <span>{{ current || $t('about.updates.versionNotAvailable') }}</span>

6
src/components/pages/Artist.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div id="artist_tab" class="relative image-header" ref="root"> <div id="artist_tab" class="relative image-header">
<header <header
class="flex items-center" class="flex items-center"
:style="{ :style="{
@ -14,9 +14,9 @@
aria-label="download" aria-label="download"
@click.stop="addToQueue" @click.stop="addToQueue"
:data-link="link" :data-link="link"
class="rounded-full bg-primary text-grayscale-870 cursor-pointer w-16 h-16 grid place-items-center ml-auto" class="grid w-16 h-16 ml-auto rounded-full cursor-pointer bg-primary text-grayscale-870 place-items-center"
> >
<i class="material-icons text-4xl" :title="$t('globals.download_hint')">get_app</i> <i class="text-4xl material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</header> </header>

4
src/components/pages/Favorites.vue
View File

@ -15,11 +15,11 @@
<ul class="section-tabs"> <ul class="section-tabs">
<li <li
v-for="tab in tabs"
:key="tab"
class="section-tabs__tab favorites_tablinks" class="section-tabs__tab favorites_tablinks"
:class="{ active: activeTab === tab }" :class="{ active: activeTab === tab }"
@click="activeTab = tab" @click="activeTab = tab"
v-for="tab in tabs"
:key="tab"
> >
{{ $tc(`globals.listTabs.${tab}`, 2) }} {{ $tc(`globals.listTabs.${tab}`, 2) }}
</li> </li>

6
src/components/pages/LinkAnalyzer.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div id="analyzer_tab" class="image-header" ref="root"> <div id="analyzer_tab" class="image-header">
<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.linkAnalyzer') }}</h1> <h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.linkAnalyzer') }}</h1>
<div v-if="link === ''"> <div v-if="link === ''">
@ -68,9 +68,9 @@
@contextmenu.prevent="openQualityModal" @contextmenu.prevent="openQualityModal"
@click.stop="addToQueue" @click.stop="addToQueue"
:data-link="link" :data-link="link"
class="rounded-full bg-primary text-grayscale-870 cursor-pointer w-16 h-16 grid place-items-center ml-auto" class="grid w-16 h-16 ml-auto rounded-full cursor-pointer bg-primary text-grayscale-870 place-items-center"
> >
<i class="material-icons text-4xl" :title="$t('globals.download_hint')">get_app</i> <i class="text-4xl material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</header> </header>
<table class="table"> <table class="table">

2
src/components/pages/Search.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div id="search_tab" ref="root"> <div id="search_tab">
<div v-show="!showSearchTab"> <div v-show="!showSearchTab">
<h2>{{ $t('search.startSearching') }}</h2> <h2>{{ $t('search.startSearching') }}</h2>
<p>{{ $t('search.description') }}</p> <p>{{ $t('search.description') }}</p>

586
src/components/pages/Settings.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="fixed-footer" ref="root"> <div class="fixed-footer">
<h1 class="mb-8 text-5xl">{{ $t('settings.title') }}</h1> <h1 class="mb-8 text-5xl">{{ $t('settings.title') }}</h1>
<div id="logged_in_info" v-if="isLoggedIn" ref="loggedInInfo"> <div id="logged_in_info" v-if="isLoggedIn" ref="loggedInInfo">
@ -20,30 +20,16 @@
</button> </button>
<select v-if="accounts.length" id="family_account" v-model="accountNum" @change="changeAccount"> <select v-if="accounts.length" id="family_account" v-model="accountNum" @change="changeAccount">
<option v-for="(account, i) in accounts" :key="account" :value="i.toString()">{{ account.BLOG_NAME }}</option> <option v-for="(account, i) in accounts" :key="account" :value="i.toString()">
{{ account.BLOG_NAME }}
</option>
</select> </select>
</div> </div>
<!-- <BaseAccordion>
<template v-slot:title>
<h3 class="inline-flex items-center text-2xl">
<i class="mr-4 material-icons">web</i>
{{ $t('settings.appearance.title') }}
</h3>
</template>
<label class="with-checkbox">
<input type="checkbox" v-model="changeSlimDownloads" />
<span class="checkbox_text">{{ $t('settings.appearance.slimDownloadTab') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="changeSlimSidebar" />
<span class="checkbox_text">{{ $t('settings.appearance.slimSidebar') }}</span>
</label>
</BaseAccordion> -->
<div class="settings-group"> <div class="settings-group">
<h3 class="settings-group__header"><i class="material-icons">person</i>{{ $t('settings.login.title') }}</h3> <h3 class="settings-group__header"><i class="material-icons">person</i>{{ $t('settings.login.title') }}</h3>
<div class="my-5 space-y-5">
<div class="flex items-center"> <div class="flex items-center">
<input <input
autocomplete="off" autocomplete="off"
@ -69,10 +55,12 @@
{{ $t('settings.login.arl.update') }} {{ $t('settings.login.arl.update') }}
</button> </button>
</div> </div>
</div>
<div class="settings-group"> <div class="settings-group">
<h3 class="settings-group__header"><i class="material-icons">language</i>{{ $t('settings.languages') }}</h3> <h3 class="settings-group__header"><i class="material-icons">language</i>{{ $t('settings.languages') }}</h3>
<div>
<div class="my-5">
<span <span
v-for="locale in locales" v-for="locale in locales"
:key="locale" :key="locale"
@ -81,39 +69,49 @@
@click="changeLocale(locale)" @click="changeLocale(locale)"
v-html="flags[locale]" v-html="flags[locale]"
:title="locale" :title="locale"
> />
</span>
</div> </div>
</div> </div>
<div class="settings-group"> <BaseAccordion class="settings-group">
<h3 class="settings-group__header"><i class="material-icons">web</i>{{ $t('settings.appearance.title') }}</h3> <template #title>
<h3 class="settings-group__header">
<i class="material-icons">web</i>
{{ $t('settings.appearance.title') }}
</h3>
</template>
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="changeSlimDownloads" /> <input type="checkbox" v-model="changeSlimDownloads" />
<span class="checkbox_text">{{ $t('settings.appearance.slimDownloadTab') }}</span> <span class="checkbox-text">{{ $t('settings.appearance.slimDownloadTab') }}</span>
</label> </label>
<label class="with-checkbox"> <label class="mb-4 with-checkbox">
<input type="checkbox" v-model="changeSlimSidebar" /> <input type="checkbox" v-model="changeSlimSidebar" />
<span class="checkbox_text">{{ $t('settings.appearance.slimSidebar') }}</span> <span class="checkbox-text">{{ $t('settings.appearance.slimSidebar') }}</span>
</label> </label>
</div> </BaseAccordion>
<div class="settings-group"> <BaseAccordion class="settings-group">
<template #title>
<h3 class="settings-group__header"> <h3 class="settings-group__header">
<i class="material-icons">folder</i>{{ $t('settings.downloadPath.title') }} <i class="material-icons">folder</i>{{ $t('settings.downloadPath.title') }}
</h3> </h3>
</template>
<div class="flex items-center"> <div class="flex items-center">
<input autocomplete="off" type="text" v-model="settings.downloadLocation" /> <input autocomplete="off" type="text" v-model="settings.downloadLocation" />
<button v-if="clientMode" class="ml-2 btn btn-primary btn-only-icon" @click="selectDownloadFolder"> <button v-if="clientMode" class="ml-2 btn btn-primary btn-only-icon" @click="selectDownloadFolder">
<i class="material-icons">folder</i> <i class="material-icons">folder</i>
</button> </button>
</div> </div>
</div> </BaseAccordion>
<div class="settings-group"> <BaseAccordion class="settings-group">
<template #title>
<h3 class="settings-group__header"> <h3 class="settings-group__header">
<i class="material-icons">font_download</i>{{ $t('settings.templates.title') }} <i class="material-icons">font_download</i>{{ $t('settings.templates.title') }}
</h3> </h3>
</template>
<p>{{ $t('settings.templates.tracknameTemplate') }}</p> <p>{{ $t('settings.templates.tracknameTemplate') }}</p>
<input type="text" v-model="settings.tracknameTemplate" /> <input type="text" v-model="settings.tracknameTemplate" />
@ -123,42 +121,45 @@
<p>{{ $t('settings.templates.playlistTracknameTemplate') }}</p> <p>{{ $t('settings.templates.playlistTracknameTemplate') }}</p>
<input type="text" v-model="settings.playlistTracknameTemplate" /> <input type="text" v-model="settings.playlistTracknameTemplate" />
</div> </BaseAccordion>
<div class="settings-group"> <BaseAccordion class="settings-group">
<template #title>
<h3 class="settings-group__header"> <h3 class="settings-group__header">
<i class="material-icons">create_new_folder</i>{{ $t('settings.folders.title') }} <i class="material-icons">create_new_folder</i>{{ $t('settings.folders.title') }}
</h3> </h3>
</template>
<div class="settings-container"> <div class="settings-container">
<div class="settings-container__third"> <div class="settings-container__third">
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.createPlaylistFolder" /> <input type="checkbox" v-model="settings.createPlaylistFolder" />
<span class="checkbox_text">{{ $t('settings.folders.createPlaylistFolder') }}</span> <span class="checkbox-text">{{ $t('settings.folders.createPlaylistFolder') }}</span>
</label> </label>
<div class="input_group" v-if="settings.createPlaylistFolder"> <div class="input-group" v-if="settings.createPlaylistFolder">
<p class="input_group_text">{{ $t('settings.folders.playlistNameTemplate') }}</p> <p class="input-group-text">{{ $t('settings.folders.playlistNameTemplate') }}</p>
<input type="text" v-model="settings.playlistNameTemplate" /> <input type="text" v-model="settings.playlistNameTemplate" />
</div> </div>
</div> </div>
<div class="settings-container__third"> <div class="settings-container__third">
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.createArtistFolder" /> <input type="checkbox" v-model="settings.createArtistFolder" />
<span class="checkbox_text">{{ $t('settings.folders.createArtistFolder') }}</span> <span class="checkbox-text">{{ $t('settings.folders.createArtistFolder') }}</span>
</label> </label>
<div class="input_group" v-if="settings.createArtistFolder"> <div class="input-group" v-if="settings.createArtistFolder">
<p class="input_group_text">{{ $t('settings.folders.artistNameTemplate') }}</p> <p class="input-group-text">{{ $t('settings.folders.artistNameTemplate') }}</p>
<input type="text" v-model="settings.artistNameTemplate" /> <input type="text" v-model="settings.artistNameTemplate" />
</div> </div>
</div> </div>
<div class="settings-container__third"> <div class="settings-container__third">
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.createAlbumFolder" /> <input type="checkbox" v-model="settings.createAlbumFolder" />
<span class="checkbox_text">{{ $t('settings.folders.createAlbumFolder') }}</span> <span class="checkbox-text">{{ $t('settings.folders.createAlbumFolder') }}</span>
</label> </label>
<div class="input_group" v-if="settings.createAlbumFolder"> <div class="input-group" v-if="settings.createAlbumFolder">
<p class="input_group_text">{{ $t('settings.folders.albumNameTemplate') }}</p> <p class="input-group-text">{{ $t('settings.folders.albumNameTemplate') }}</p>
<input type="text" v-model="settings.albumNameTemplate" /> <input type="text" v-model="settings.albumNameTemplate" />
</div> </div>
</div> </div>
@ -166,55 +167,248 @@
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.createCDFolder" /> <input type="checkbox" v-model="settings.createCDFolder" />
<span class="checkbox_text">{{ $t('settings.folders.createCDFolder') }}</span> <span class="checkbox-text">{{ $t('settings.folders.createCDFolder') }}</span>
</label> </label>
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.createStructurePlaylist" /> <input type="checkbox" v-model="settings.createStructurePlaylist" />
<span class="checkbox_text">{{ $t('settings.folders.createStructurePlaylist') }}</span> <span class="checkbox-text">{{ $t('settings.folders.createStructurePlaylist') }}</span>
</label> </label>
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.createSingleFolder" /> <input type="checkbox" v-model="settings.createSingleFolder" />
<span class="checkbox_text">{{ $t('settings.folders.createSingleFolder') }}</span> <span class="checkbox-text">{{ $t('settings.folders.createSingleFolder') }}</span>
</label> </label>
</div> </BaseAccordion>
<div class="settings-group"> <BaseAccordion class="settings-group">
<h3 class="settings-group__header"><i class="material-icons">title</i>{{ $t('settings.trackTitles.title') }}</h3> <template #title>
<h3 class="settings-group__header">
<i class="material-icons">title</i>{{ $t('settings.trackTitles.title') }}
</h3>
</template>
<div class="settings-container"> <div class="settings-container">
<div class="settings-container__third settings-container__third--only-checkbox"> <div class="settings-container__third settings-container__third--only-checkbox">
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.padTracks" /> <input type="checkbox" v-model="settings.padTracks" />
<span class="checkbox_text">{{ $t('settings.trackTitles.padTracks') }}</span> <span class="checkbox-text">{{ $t('settings.trackTitles.padTracks') }}</span>
</label> </label>
</div> </div>
<div class="settings-container__third"> <div class="settings-container__third">
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.trackTitles.paddingSize') }}</p> <p class="input-group-text">{{ $t('settings.trackTitles.paddingSize') }}</p>
<input max="10" type="number" v-model="settings.paddingSize" /> <input max="10" type="number" v-model="settings.paddingSize" />
</div> </div>
</div> </div>
<div class="settings-container__third"> <div class="settings-container__third">
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.trackTitles.illegalCharacterReplacer') }}</p> <p class="input-group-text">{{ $t('settings.trackTitles.illegalCharacterReplacer') }}</p>
<input type="text" v-model="settings.illegalCharacterReplacer" /> <input type="text" v-model="settings.illegalCharacterReplacer" />
</div> </div>
</div> </div>
</div> </div>
</BaseAccordion>
<BaseAccordion class="settings-group">
<template #title>
<h3 class="settings-group__header"><i class="material-icons">album</i>{{ $t('settings.covers.title') }}</h3>
</template>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.saveArtwork" />
<span class="checkbox-text">{{ $t('settings.covers.saveArtwork') }}</span>
</label>
<div class="input-group" v-if="settings.saveArtwork">
<p class="input-group-text">{{ $t('settings.covers.coverImageTemplate') }}</p>
<input type="text" v-model="settings.coverImageTemplate" />
</div> </div>
<div class="settings-group"> <label class="with-checkbox">
<h3 class="settings-group__header"><i class="material-icons">get_app</i>{{ $t('settings.downloads.title') }}</h3> <input type="checkbox" v-model="settings.saveArtworkArtist" />
<span class="checkbox-text">{{ $t('settings.covers.saveArtworkArtist') }}</span>
</label>
<div class="input_group"> <div class="input-group" v-if="settings.saveArtworkArtist">
<p class="input_group_text">{{ $t('settings.downloads.queueConcurrency') }}</p> <p class="input-group-text">{{ $t('settings.covers.artistImageTemplate') }}</p>
<input type="text" v-model="settings.artistImageTemplate" />
</div>
<div class="input-group">
<p class="input-group-text">{{ $t('settings.covers.localArtworkSize') }}</p>
<input type="number" min="100" max="10000" step="100" v-model.number="settings.localArtworkSize" />
<p v-if="settings.localArtworkSize > 1200" class="input-group-text" style="opacity: 0.75; color: #ffcc22">
⚠️ {{ $t('settings.covers.imageSizeWarning') }}
</p>
</div>
<div class="input-group">
<p class="input-group-text">{{ $t('settings.covers.embeddedArtworkSize') }}</p>
<input type="number" min="100" max="10000" step="100" v-model.number="settings.embeddedArtworkSize" />
<p v-if="settings.embeddedArtworkSize > 1200" class="input-group-text" style="opacity: 0.75; color: #ffcc22">
⚠️ {{ $t('settings.covers.imageSizeWarning') }}
</p>
</div>
<div class="input-group">
<p class="input-group-text">{{ $t('settings.covers.localArtworkFormat.title') }}</p>
<select v-model="settings.localArtworkFormat">
<option value="jpg">{{ $t('settings.covers.localArtworkFormat.jpg') }}</option>
<option value="png">{{ $t('settings.covers.localArtworkFormat.png') }}</option>
<option value="jpg,png">{{ $t('settings.covers.localArtworkFormat.both') }}</option>
</select>
</div>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.embeddedArtworkPNG" />
<span class="checkbox-text">{{ $t('settings.covers.embeddedArtworkPNG') }}</span>
</label>
<p v-if="settings.embeddedArtworkPNG" style="opacity: 0.75; color: #ffcc22">
⚠️ {{ $t('settings.covers.embeddedPNGWarning') }}
</p>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.coverDescriptionUTF8" />
<span class="checkbox-text">{{ $t('settings.covers.coverDescriptionUTF8') }}</span>
</label>
<div class="input-group">
<p class="input-group-text">{{ $t('settings.covers.jpegImageQuality') }}</p>
<input type="number" min="1" max="100" v-model.number="settings.jpegImageQuality" />
</div>
</BaseAccordion>
<BaseAccordion class="settings-group">
<template #title>
<h3 class="settings-group__header">
<i class="material-icons" style="width: 1em; height: 1em">bookmarks</i>{{ $t('settings.tags.head') }}
</h3>
</template>
<div class="settings-container">
<div class="settings-container__half">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.title" />
<span class="checkbox-text">{{ $t('settings.tags.title') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.artist" />
<span class="checkbox-text">{{ $t('settings.tags.artist') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.album" />
<span class="checkbox-text">{{ $t('settings.tags.album') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.cover" />
<span class="checkbox-text">{{ $t('settings.tags.cover') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.trackNumber" />
<span class="checkbox-text">{{ $t('settings.tags.trackNumber') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.trackTotal" />
<span class="checkbox-text">{{ $t('settings.tags.trackTotal') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.discNumber" />
<span class="checkbox-text">{{ $t('settings.tags.discNumber') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.discTotal" />
<span class="checkbox-text">{{ $t('settings.tags.discTotal') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.albumArtist" />
<span class="checkbox-text">{{ $t('settings.tags.albumArtist') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.genre" />
<span class="checkbox-text">{{ $t('settings.tags.genre') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.year" />
<span class="checkbox-text">{{ $t('settings.tags.year') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.date" />
<span class="checkbox-text">{{ $t('settings.tags.date') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.explicit" />
<span class="checkbox-text">{{ $t('settings.tags.explicit') }}</span>
</label>
</div>
<div class="settings-container__half">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.isrc" />
<span class="checkbox-text">{{ $t('settings.tags.isrc') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.length" />
<span class="checkbox-text">{{ $t('settings.tags.length') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.barcode" />
<span class="checkbox-text">{{ $t('settings.tags.barcode') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.bpm" />
<span class="checkbox-text">{{ $t('settings.tags.bpm') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.replayGain" />
<span class="checkbox-text">{{ $t('settings.tags.replayGain') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.label" />
<span class="checkbox-text">{{ $t('settings.tags.label') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.lyrics" />
<span class="checkbox-text">{{ $t('settings.tags.lyrics') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.syncedLyrics" />
<span class="checkbox-text">{{ $t('settings.tags.syncedLyrics') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.copyright" />
<span class="checkbox-text">{{ $t('settings.tags.copyright') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.composer" />
<span class="checkbox-text">{{ $t('settings.tags.composer') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.involvedPeople" />
<span class="checkbox-text">{{ $t('settings.tags.involvedPeople') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.source" />
<span class="checkbox-text">{{ $t('settings.tags.source') }}</span>
</label>
</div>
</div>
</BaseAccordion>
<BaseAccordion class="settings-group">
<template #title>
<h3 class="settings-group__header">
<i class="material-icons">get_app</i>{{ $t('settings.downloads.title') }}
</h3>
</template>
<div class="input-group">
<p class="input-group-text">{{ $t('settings.downloads.queueConcurrency') }}</p>
<input type="number" min="1" v-model.number="settings.queueConcurrency" /> <input type="number" min="1" v-model.number="settings.queueConcurrency" />
</div> </div>
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.downloads.maxBitrate.title') }}</p> <p class="input-group-text">{{ $t('settings.downloads.maxBitrate.title') }}</p>
<select v-model="settings.maxBitrate"> <select v-model="settings.maxBitrate">
<option value="9">{{ $t('settings.downloads.maxBitrate.9') }}</option> <option value="9">{{ $t('settings.downloads.maxBitrate.9') }}</option>
<option value="3">{{ $t('settings.downloads.maxBitrate.3') }}</option> <option value="3">{{ $t('settings.downloads.maxBitrate.3') }}</option>
@ -222,8 +416,8 @@
</select> </select>
</div> </div>
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.downloads.overwriteFile.title') }}</p> <p class="input-group-text">{{ $t('settings.downloads.overwriteFile.title') }}</p>
<select v-model="settings.overwriteFile"> <select v-model="settings.overwriteFile">
<option value="y">{{ $t('settings.downloads.overwriteFile.y') }}</option> <option value="y">{{ $t('settings.downloads.overwriteFile.y') }}</option>
<option value="n">{{ $t('settings.downloads.overwriteFile.n') }}</option> <option value="n">{{ $t('settings.downloads.overwriteFile.n') }}</option>
@ -237,250 +431,71 @@
<div class="settings-container__third settings-container__third--only-checkbox"> <div class="settings-container__third settings-container__third--only-checkbox">
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.fallbackBitrate" /> <input type="checkbox" v-model="settings.fallbackBitrate" />
<span class="checkbox_text">{{ $t('settings.downloads.fallbackBitrate') }}</span> <span class="checkbox-text">{{ $t('settings.downloads.fallbackBitrate') }}</span>
</label> </label>
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.fallbackSearch" /> <input type="checkbox" v-model="settings.fallbackSearch" />
<span class="checkbox_text">{{ $t('settings.downloads.fallbackSearch') }}</span> <span class="checkbox-text">{{ $t('settings.downloads.fallbackSearch') }}</span>
</label> </label>
</div> </div>
<div class="settings-container__third settings-container__third--only-checkbox"> <div class="settings-container__third settings-container__third--only-checkbox">
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.logErrors" /> <input type="checkbox" v-model="settings.logErrors" />
<span class="checkbox_text">{{ $t('settings.downloads.logErrors') }}</span> <span class="checkbox-text">{{ $t('settings.downloads.logErrors') }}</span>
</label> </label>
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.logSearched" /> <input type="checkbox" v-model="settings.logSearched" />
<span class="checkbox_text">{{ $t('settings.downloads.logSearched') }}</span> <span class="checkbox-text">{{ $t('settings.downloads.logSearched') }}</span>
</label> </label>
</div> </div>
<div class="settings-container__third settings-container__third--only-checkbox"> <div class="settings-container__third settings-container__third--only-checkbox">
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.syncedLyrics" /> <input type="checkbox" v-model="settings.syncedLyrics" />
<span class="checkbox_text">{{ $t('settings.downloads.syncedLyrics') }}</span> <span class="checkbox-text">{{ $t('settings.downloads.syncedLyrics') }}</span>
</label> </label>
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.createM3U8File" /> <input type="checkbox" v-model="settings.createM3U8File" />
<span class="checkbox_text">{{ $t('settings.downloads.createM3U8File') }}</span> <span class="checkbox-text">{{ $t('settings.downloads.createM3U8File') }}</span>
</label> </label>
</div> </div>
</div> </div>
<div class="input_group" v-if="settings.createM3U8File"> <div class="input-group" v-if="settings.createM3U8File">
<p class="input_group_text">{{ $t('settings.downloads.playlistFilenameTemplate') }}</p> <p class="input-group-text">{{ $t('settings.downloads.playlistFilenameTemplate') }}</p>
<input type="text" v-model="settings.playlistFilenameTemplate" /> <input type="text" v-model="settings.playlistFilenameTemplate" />
</div> </div>
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.saveDownloadQueue" /> <input type="checkbox" v-model="settings.saveDownloadQueue" />
<span class="checkbox_text">{{ $t('settings.downloads.saveDownloadQueue') }}</span> <span class="checkbox-text">{{ $t('settings.downloads.saveDownloadQueue') }}</span>
</label> </label>
</div> </BaseAccordion>
<div class="settings-group"> <BaseAccordion class="settings-group">
<h3 class="settings-group__header"><i class="material-icons">album</i>{{ $t('settings.covers.title') }}</h3> <template #title>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.saveArtwork" />
<span class="checkbox_text">{{ $t('settings.covers.saveArtwork') }}</span>
</label>
<div class="input_group" v-if="settings.saveArtwork">
<p class="input_group_text">{{ $t('settings.covers.coverImageTemplate') }}</p>
<input type="text" v-model="settings.coverImageTemplate" />
</div>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.saveArtworkArtist" />
<span class="checkbox_text">{{ $t('settings.covers.saveArtworkArtist') }}</span>
</label>
<div class="input_group" v-if="settings.saveArtworkArtist">
<p class="input_group_text">{{ $t('settings.covers.artistImageTemplate') }}</p>
<input type="text" v-model="settings.artistImageTemplate" />
</div>
<div class="input_group">
<p class="input_group_text">{{ $t('settings.covers.localArtworkSize') }}</p>
<input type="number" min="100" max="10000" step="100" v-model.number="settings.localArtworkSize" />
<p v-if="settings.localArtworkSize > 1200" class="input_group_text" style="opacity: 0.75; color: #ffcc22">
⚠️ {{ $t('settings.covers.imageSizeWarning') }}
</p>
</div>
<div class="input_group">
<p class="input_group_text">{{ $t('settings.covers.embeddedArtworkSize') }}</p>
<input type="number" min="100" max="10000" step="100" v-model.number="settings.embeddedArtworkSize" />
<p v-if="settings.embeddedArtworkSize > 1200" class="input_group_text" style="opacity: 0.75; color: #ffcc22">
⚠️ {{ $t('settings.covers.imageSizeWarning') }}
</p>
</div>
<div class="input_group">
<p class="input_group_text">{{ $t('settings.covers.localArtworkFormat.title') }}</p>
<select v-model="settings.localArtworkFormat">
<option value="jpg">{{ $t('settings.covers.localArtworkFormat.jpg') }}</option>
<option value="png">{{ $t('settings.covers.localArtworkFormat.png') }}</option>
<option value="jpg,png">{{ $t('settings.covers.localArtworkFormat.both') }}</option>
</select>
</div>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.embeddedArtworkPNG" />
<span class="checkbox_text">{{ $t('settings.covers.embeddedArtworkPNG') }}</span>
</label>
<p v-if="settings.embeddedArtworkPNG" style="opacity: 0.75; color: #ffcc22">
⚠️ {{ $t('settings.covers.embeddedPNGWarning') }}
</p>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.coverDescriptionUTF8" />
<span class="checkbox_text">{{ $t('settings.covers.coverDescriptionUTF8') }}</span>
</label>
<div class="input_group">
<p class="input_group_text">{{ $t('settings.covers.jpegImageQuality') }}</p>
<input type="number" min="1" max="100" v-model.number="settings.jpegImageQuality" />
</div>
</div>
<div class="settings-group">
<h3 class="settings-group__header">
<i class="material-icons" style="width: 1em; height: 1em">bookmarks</i>{{ $t('settings.tags.head') }}
</h3>
<div class="settings-container">
<div class="settings-container__half">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.title" />
<span class="checkbox_text">{{ $t('settings.tags.title') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.artist" />
<span class="checkbox_text">{{ $t('settings.tags.artist') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.album" />
<span class="checkbox_text">{{ $t('settings.tags.album') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.cover" />
<span class="checkbox_text">{{ $t('settings.tags.cover') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.trackNumber" />
<span class="checkbox_text">{{ $t('settings.tags.trackNumber') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.trackTotal" />
<span class="checkbox_text">{{ $t('settings.tags.trackTotal') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.discNumber" />
<span class="checkbox_text">{{ $t('settings.tags.discNumber') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.discTotal" />
<span class="checkbox_text">{{ $t('settings.tags.discTotal') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.albumArtist" />
<span class="checkbox_text">{{ $t('settings.tags.albumArtist') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.genre" />
<span class="checkbox_text">{{ $t('settings.tags.genre') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.year" />
<span class="checkbox_text">{{ $t('settings.tags.year') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.date" />
<span class="checkbox_text">{{ $t('settings.tags.date') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.explicit" />
<span class="checkbox_text">{{ $t('settings.tags.explicit') }}</span>
</label>
</div>
<div class="settings-container__half">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.isrc" />
<span class="checkbox_text">{{ $t('settings.tags.isrc') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.length" />
<span class="checkbox_text">{{ $t('settings.tags.length') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.barcode" />
<span class="checkbox_text">{{ $t('settings.tags.barcode') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.bpm" />
<span class="checkbox_text">{{ $t('settings.tags.bpm') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.replayGain" />
<span class="checkbox_text">{{ $t('settings.tags.replayGain') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.label" />
<span class="checkbox_text">{{ $t('settings.tags.label') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.lyrics" />
<span class="checkbox_text">{{ $t('settings.tags.lyrics') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.syncedLyrics" />
<span class="checkbox_text">{{ $t('settings.tags.syncedLyrics') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.copyright" />
<span class="checkbox_text">{{ $t('settings.tags.copyright') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.composer" />
<span class="checkbox_text">{{ $t('settings.tags.composer') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.involvedPeople" />
<span class="checkbox_text">{{ $t('settings.tags.involvedPeople') }}</span>
</label>
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.source" />
<span class="checkbox_text">{{ $t('settings.tags.source') }}</span>
</label>
</div>
</div>
</div>
<div class="settings-group">
<h3 class="settings-group__header"><i class="material-icons">list</i>{{ $t('settings.other.title') }}</h3> <h3 class="settings-group__header"><i class="material-icons">list</i>{{ $t('settings.other.title') }}</h3>
</template>
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.savePlaylistAsCompilation" /> <input type="checkbox" v-model="settings.tags.savePlaylistAsCompilation" />
<span class="checkbox_text">{{ $t('settings.other.savePlaylistAsCompilation') }}</span> <span class="checkbox-text">{{ $t('settings.other.savePlaylistAsCompilation') }}</span>
</label> </label>
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.useNullSeparator" /> <input type="checkbox" v-model="settings.tags.useNullSeparator" />
<span class="checkbox_text">{{ $t('settings.other.useNullSeparator') }}</span> <span class="checkbox-text">{{ $t('settings.other.useNullSeparator') }}</span>
</label> </label>
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.saveID3v1" /> <input type="checkbox" v-model="settings.tags.saveID3v1" />
<span class="checkbox_text">{{ $t('settings.other.saveID3v1') }}</span> <span class="checkbox-text">{{ $t('settings.other.saveID3v1') }}</span>
</label> </label>
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.other.multiArtistSeparator.title') }}</p> <p class="input-group-text">{{ $t('settings.other.multiArtistSeparator.title') }}</p>
<select v-model="settings.tags.multiArtistSeparator"> <select v-model="settings.tags.multiArtistSeparator">
<option value="nothing">{{ $t('settings.other.multiArtistSeparator.nothing') }}</option> <option value="nothing">{{ $t('settings.other.multiArtistSeparator.nothing') }}</option>
<option value="default">{{ $t('settings.other.multiArtistSeparator.default') }}</option> <option value="default">{{ $t('settings.other.multiArtistSeparator.default') }}</option>
@ -497,26 +512,26 @@
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.singleAlbumArtist" /> <input type="checkbox" v-model="settings.tags.singleAlbumArtist" />
<span class="checkbox_text">{{ $t('settings.other.singleAlbumArtist') }}</span> <span class="checkbox-text">{{ $t('settings.other.singleAlbumArtist') }}</span>
</label> </label>
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.albumVariousArtists" /> <input type="checkbox" v-model="settings.albumVariousArtists" />
<span class="checkbox_text">{{ $t('settings.other.albumVariousArtists') }}</span> <span class="checkbox-text">{{ $t('settings.other.albumVariousArtists') }}</span>
</label> </label>
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.removeAlbumVersion" /> <input type="checkbox" v-model="settings.removeAlbumVersion" />
<span class="checkbox_text">{{ $t('settings.other.removeAlbumVersion') }}</span> <span class="checkbox-text">{{ $t('settings.other.removeAlbumVersion') }}</span>
</label> </label>
<label class="with-checkbox"> <label class="with-checkbox">
<input type="checkbox" v-model="settings.removeDuplicateArtists" /> <input type="checkbox" v-model="settings.removeDuplicateArtists" />
<span class="checkbox_text">{{ $t('settings.other.removeDuplicateArtists') }}</span> <span class="checkbox-text">{{ $t('settings.other.removeDuplicateArtists') }}</span>
</label> </label>
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.other.dateFormat.title') }}</p> <p class="input-group-text">{{ $t('settings.other.dateFormat.title') }}</p>
<select v-model="settings.dateFormat"> <select v-model="settings.dateFormat">
<option value="Y-M-D"> <option value="Y-M-D">
{{ {{
@ -550,8 +565,8 @@
</select> </select>
</div> </div>
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.other.featuredToTitle.title') }}</p> <p class="input-group-text">{{ $t('settings.other.featuredToTitle.title') }}</p>
<select v-model="settings.featuredToTitle"> <select v-model="settings.featuredToTitle">
<option value="0">{{ $t('settings.other.featuredToTitle.0') }}</option> <option value="0">{{ $t('settings.other.featuredToTitle.0') }}</option>
<option value="1">{{ $t('settings.other.featuredToTitle.1') }}</option> <option value="1">{{ $t('settings.other.featuredToTitle.1') }}</option>
@ -560,8 +575,8 @@
</select> </select>
</div> </div>
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.other.titleCasing') }}</p> <p class="input-group-text">{{ $t('settings.other.titleCasing') }}</p>
<select v-model="settings.titleCasing"> <select v-model="settings.titleCasing">
<option value="nothing">{{ $t('settings.other.casing.nothing') }}</option> <option value="nothing">{{ $t('settings.other.casing.nothing') }}</option>
<option value="lower">{{ $t('settings.other.casing.lower') }}</option> <option value="lower">{{ $t('settings.other.casing.lower') }}</option>
@ -571,8 +586,8 @@
</select> </select>
</div> </div>
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.other.artistCasing') }}</p> <p class="input-group-text">{{ $t('settings.other.artistCasing') }}</p>
<select v-model="settings.artistCasing"> <select v-model="settings.artistCasing">
<option value="nothing">{{ $t('settings.other.casing.nothing') }}</option> <option value="nothing">{{ $t('settings.other.casing.nothing') }}</option>
<option value="lower">{{ $t('settings.other.casing.lower') }}</option> <option value="lower">{{ $t('settings.other.casing.lower') }}</option>
@ -582,8 +597,8 @@
</select> </select>
</div> </div>
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.other.previewVolume') }}</p> <p class="input-group-text">{{ $t('settings.other.previewVolume') }}</p>
<input <input
type="range" type="range"
@change="updateMaxVolume" @change="updateMaxVolume"
@ -596,14 +611,15 @@
<span>{{ previewVolume.preview_max_volume }}%</span> <span>{{ previewVolume.preview_max_volume }}%</span>
</div> </div>
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.other.executeCommand.title') }}</p> <p class="input-group-text">{{ $t('settings.other.executeCommand.title') }}</p>
<p class="secondary-text">{{ $t('settings.other.executeCommand.description') }}</p> <p class="secondary-text">{{ $t('settings.other.executeCommand.description') }}</p>
<input type="text" v-model="settings.executeCommand" /> <input type="text" v-model="settings.executeCommand" />
</div> </div>
</div> </BaseAccordion>
<div class="settings-group"> <BaseAccordion class="settings-group">
<template #title>
<h3 class="settings-group__header"> <h3 class="settings-group__header">
<svg <svg
class="w-6 h-6 mr-4" class="w-6 h-6 mr-4"
@ -618,25 +634,27 @@
</svg> </svg>
{{ $t('settings.spotify.title') }} {{ $t('settings.spotify.title') }}
</h3> </h3>
</template>
<RouterLink :to="{ name: 'Spotify Features' }"> <RouterLink :to="{ name: 'Spotify Features' }">
{{ $t('settings.spotify.question') }} {{ $t('settings.spotify.question') }}
</RouterLink> </RouterLink>
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.spotify.clientID') }}</p> <p class="input-group-text">{{ $t('settings.spotify.clientID') }}</p>
<input type="text" v-model="spotifyFeatures.clientId" /> <input type="text" v-model="spotifyFeatures.clientId" />
</div> </div>
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.spotify.clientSecret') }}</p> <p class="input-group-text">{{ $t('settings.spotify.clientSecret') }}</p>
<input type="password" v-model="spotifyFeatures.clientSecret" /> <input type="password" v-model="spotifyFeatures.clientSecret" />
</div> </div>
<div class="input_group"> <div class="input-group">
<p class="input_group_text">{{ $t('settings.spotify.username') }}</p> <p class="input-group-text">{{ $t('settings.spotify.username') }}</p>
<input type="text" v-model="spotifyUser" /> <input type="text" v-model="spotifyUser" />
</div> </div>
</div> </BaseAccordion>
<footer class="bg-background-main"> <footer class="bg-background-main">
<button class="mr-2 btn btn-primary" @click="resetSettings">{{ $t('settings.reset') }}</button> <button class="mr-2 btn btn-primary" @click="resetSettings">{{ $t('settings.reset') }}</button>

1
src/lang/en.js
View File

@ -46,6 +46,7 @@ const en = {
about: { about: {
updates: { updates: {
currentVersion: 'Current Version', currentVersion: 'Current Version',
currentWebuiVersion: 'Current WebUI Version',
versionNotAvailable: 'N/A', versionNotAvailable: 'N/A',
updateAvailable: `You're not running the latest version available: {version}`, updateAvailable: `You're not running the latest version available: {version}`,
deemixVersion: 'deemix lib version' deemixVersion: 'deemix lib version'

3
src/lang/it.js
View File

@ -45,7 +45,8 @@ const it = {
}, },
about: { about: {
updates: { updates: {
currentVersion: 'Versione corrente', currentVersion: 'Versione attuale',
currentWebuiVersion: 'Versione WebUI attuale',
versionNotAvailable: 'N/A', versionNotAvailable: 'N/A',
updateAvailable: `Non stai usando l'ultima versione disponibile: {version}`, updateAvailable: `Non stai usando l'ultima versione disponibile: {version}`,
deemixVersion: 'Versione libreria deemix' deemixVersion: 'Versione libreria deemix'

30
src/styles/scss/tabs/_settings-tab.scss
View File

@ -1,20 +1,12 @@
.settings-group { .settings-group {
@apply flex flex-col justify-center pt-5 pb-5; @apply border-t border-grayscale-500;
border-top: 1px solid theme('colors.grayscale.500'); /* Need less opacity */
> * {
margin-bottom: 1rem;
}
} }
.settings-group__header { .settings-group__header {
display: inline-flex; @apply inline-flex items-center py-8 text-2xl;
align-items: center;
margin-bottom: 1.5625rem;
font-size: 1.5rem;
i.material-icons { i.material-icons {
margin-right: 15px; @apply mr-4;
} }
} }
@ -38,7 +30,7 @@
&__half > *, &__half > *,
&__third > * { &__third > * {
margin-bottom: 15px; @apply mb-4;
} }
} }
@ -50,7 +42,7 @@
cursor: pointer; cursor: pointer;
} }
.checkbox_text { .checkbox-text {
margin-left: 10px; margin-left: 10px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@ -58,14 +50,8 @@
} }
/* Input group */ /* Input group */
.input_group { .input-group {
margin-bottom: 25px; .input-group-text {
@apply mb-2;
.input_group_text {
margin-bottom: 7px;
}
.with-checkbox + & {
margin-top: 10px;
} }
} }