etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

theme page small improvements

This commit is contained in:
Nikita Krupin 2022-07-28 17:27:14 -04:00
parent 8881f83244
commit 51b0be2acd
5 changed files with 122 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
NUXT/components/Player/speed.vue
View File

@ -69,7 +69,7 @@ export default {
emits: ["speed"],
data: () => ({
sheet: false,
speeds: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 8, 16],
speeds: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3, 3.5, 4],
}),
};
</script>

4
NUXT/components/playlistCard.vue
View File

@ -12,7 +12,7 @@
"
:style="{
borderRadius: $store.state.tweaks.roundThumb
? `${$store.state.tweaks.roundTweak / 2}rem`
? `${$store.state.tweaks.roundTweak / 3}rem`
: '0',
}"
flat
@ -25,7 +25,7 @@
:class="$vuetify.theme.dark ? 'lighten-3' : 'darken-3'"
:style="{
borderRadius: $store.state.tweaks.roundThumb
? `${$store.state.tweaks.roundTweak / 2}rem`
? `${$store.state.tweaks.roundTweak / 3}rem`
: '0',
}"
>

17
NUXT/pages/mods/player.vue
View File

@ -43,6 +43,23 @@
class="mt-0"
inset
/>
<br />
<v-slider
v-model="speed"
step=".25"
thumb-size="64"
style="transition-duration: 0.3s; transition-property: all"
:rules="[(s) => s <= 4 || 'Might cause issues with buffering.']"
:min="0.25"
:max="16"
@input="$vuetube.haptics.hapticsImpactLight(0)"
>
<template #thumb-label="{ value }">
<b class="background--text" style="font-size: 1.15rem">
{{ value.toFixed(2) }}x
</b>
</template>
</v-slider>
</v-card> -->
<v-divider v-if="!$store.state.tweaks.roundTweak" />

188
NUXT/pages/mods/theme.vue
View File

@ -1,71 +1,31 @@
<template>
<client-only>
<div class="container-max-height d-flex flex-column justify-end">
<!-- ----Background Colors---- -->
<v-radio-group v-model="$vuetify.theme.currentTheme.background">
<div
class="d-flex flex-row px-6 no-wrap"
style="max-width: 100%; overflow-x: auto"
>
<div
v-for="background in $vuetify.theme.dark
? backgroundsDark
: backgroundsLight"
:key="background.color"
class="text-center"
>
<v-radio
color="primary"
active-class="px-6 border-primary"
style="transition-duration: 0.3s"
:style="{
background: background.color,
border: '2px solid ' + background.color,
}"
class="py-4 px-4 ma-2 rounded-lg"
:value="background.color"
/>
{{ background.name }}
</div>
<div class="text-center">
<v-radio
color="primary"
active-class="px-6 border-primary primary"
style="transition-duration: 0.3s"
:style="{
background: $vuetify.theme.dark
? 'var(--v-primary-darken4) !important'
: 'var(--v-primary-lighten4) !important',
border: $vuetify.theme.dark
? '2px solid var(--v-primary-darken4)'
: '2px solid var(--v-primary-lighten4)',
}"
class="pa-4 ma-2 rounded-lg"
:value="$vuetify.theme.dark ? adaptiveDark : adaptiveLight"
/>
{{ lang.adaptive }}
</div>
<div class="text-center">
<!-- Custom Background -->
<v-btn
icon
class="ma-2 rounded-lg background border-primary"
style="height: 3.75rem; width: 3.75rem"
:class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
@click="(pickerState = true), (pickerMode = 'background')"
>
<v-icon>mdi-plus</v-icon>
</v-btn>
<br />
Custom
</div>
</div>
</v-radio-group>
<!-- ----Color Picker (global, for both)---- -->
<v-dialog
v-model="pickerState"
width="300"
content-class="background rounded-lg"
>
<v-color-picker
v-model="$vuetify.theme.currentTheme[pickerMode]"
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
style="min-width: 100%"
class="background"
hide-mode-switch
dot-size="50"
mode="hexa"
flat
/>
</v-dialog>
<!-- ----Primary Colors---- -->
<v-radio-group v-model="$vuetify.theme.currentTheme.primary" class="mx-2">
<v-radio-group
v-model="$vuetify.theme.currentTheme.primary"
style="max-height: 2rem"
>
<div
class="d-flex flex-row px-6 py-2 no-wrap align-center"
style="max-width: 100%; overflow-x: auto; margin-top: -1.5rem"
class="px-6 d-flex flex-row no-wrap align-center"
style="max-width: 100%; overflow-x: auto"
>
<v-radio
v-for="color in $vuetify.theme.dark ? primaryDark : primaryLight"
@ -97,27 +57,76 @@
</v-btn>
</div>
</v-radio-group>
<!-- ----Color Picker---- -->
<v-dialog
v-model="pickerState"
width="300"
content-class="background rounded-lg"
>
<v-color-picker
v-model="$vuetify.theme.currentTheme[pickerMode]"
style="min-width: 100%"
class="background"
hide-mode-switch
dot-size="50"
mode="hexa"
flat
/>
</v-dialog>
<!-- ----Background Colors---- -->
<v-radio-group v-model="$vuetify.theme.currentTheme.background">
<div
class="d-flex flex-row px-2 no-wrap"
style="max-width: 100%; overflow-x: auto"
>
<div
v-for="background in $vuetify.theme.dark
? backgroundsDark
: backgroundsLight"
:key="background.color"
class="text-center"
>
<v-radio
color="primary"
active-class="px-6 border-primary"
style="transition-duration: 0.3s"
:style="{
background: background.color,
border: '2px solid ' + background.color,
borderRadius: `${$store.state.tweaks.roundTweak / 3}rem`,
}"
class="py-4 px-4 ma-2"
:value="background.color"
/>
{{ background.name }}
</div>
<div class="text-center">
<v-radio
color="primary"
active-class="px-6 border-primary primary"
style="transition-duration: 0.3s"
:style="{
background: $vuetify.theme.dark
? 'var(--v-primary-darken4) !important'
: 'var(--v-primary-lighten4) !important',
border: $vuetify.theme.dark
? '2px solid var(--v-primary-darken4)'
: '2px solid var(--v-primary-lighten4)',
borderRadius: `${$store.state.tweaks.roundTweak / 3}rem`,
}"
class="pa-4 ma-2"
:value="$vuetify.theme.dark ? adaptiveDark : adaptiveLight"
/>
{{ lang.adaptive }}
</div>
<div class="text-center">
<!-- Custom Background -->
<v-btn
icon
class="ma-2 background border-primary"
style="height: 3.75rem; width: 3.75rem"
:style="{
borderRadius: `${$store.state.tweaks.roundTweak / 3}rem`,
}"
:class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
@click="(pickerState = true), (pickerMode = 'background')"
>
<v-icon>mdi-plus</v-icon>
</v-btn>
<br />
Custom
</div>
</div>
</v-radio-group>
<!-- ----Mode Switch---- -->
<v-divider v-if="!$store.state.tweaks.roundTweak" />
<v-card
flat
class="d-flex flex-row justify-between mx-8 mb-8 px-4 py-3 background"
class="d-flex flex-row justify-between mx-4 mb-4 pa-4 background"
:class="
$store.state.tweaks.roundTweak > 0
? $vuetify.theme.dark
@ -126,7 +135,7 @@
: ''
"
:style="{
borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
borderRadius: `${$store.state.tweaks.roundTweak / 3}rem`,
padding: !$store.state.tweaks.roundTweak ? '2rem !important' : '',
margin: !$store.state.tweaks.roundTweak ? '0 !important' : '',
}"
@ -150,7 +159,6 @@
v-model="$vuetify.theme.dark"
style="pointer-events: none"
class="mt-2"
persistent-hint
inset
/>
</v-card>
@ -164,7 +172,7 @@ export default {
return {
primaryLight: ["#E57373", "#8b5f37", "#016a49", "#34495E"],
primaryDark: [
"#B71C1C",
"#dc2626",
"#FFBBFF",
"#AAAFFF",
"#AAFFFF",
@ -173,9 +181,14 @@ export default {
],
backgroundsDark: [
{ name: "Dark", color: "#181818" },
{ name: "Warm", color: "#1c1917" },
{ name: "Black", color: "#000000" },
],
backgroundsLight: [{ name: "Normal", color: "#ffffff" }],
backgroundsLight: [
{ name: "Normal", color: "#ffffff" },
{ name: "Cold", color: "#e2e8f0" },
{ name: "Warm", color: "#e7e5e4" },
],
adaptiveLight: "",
adaptiveDark: "",
pickerState: false,
@ -223,9 +236,10 @@ export default {
},
mounted() {
this.lang = this.$lang("mods").theme;
this.backgroundsLight[0].name = this.lang.normal;
this.backgroundsDark[0].name = this.lang.dark;
this.backgroundsDark[1].name = this.lang.black;
// TODO: loop, and fill the missing colors, otherwise it breaks
// this.backgroundsLight[0].name = this.lang.normal;
// this.backgroundsDark[0].name = this.lang.dark;
// this.backgroundsDark[1].name = this.lang.black;
},
beforeMount() {
this.adapt();

2
NUXT/pages/mods/tweaks.vue
View File

@ -135,7 +135,7 @@
</v-card>
<v-slider
v-model="roundTweak"
class="pr-4 pl-4 pt-4 pb-1 background"
class="pr-8 pl-4 pt-3 pb-0 background"
:max="4"
:label="lang.radius"
step=".25"