mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-21 18:55:16 +00:00
theme bugfixes & startup cleanup
This commit is contained in:
Nikita Krupin
parent
0a370a8f3b
commit
e5fb705d42
10 changed files with 171 additions and 219 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<center v-show="themeFetched" class="container">
|
||||
<center class="container">
|
||||
<v-img
|
||||
src="/icon.svg"
|
||||
width="10rem"
|
||||
|
|
@ -18,20 +18,12 @@ export default {
|
|||
layout: "empty",
|
||||
|
||||
data: () => ({
|
||||
progressMsg: "Theming",
|
||||
themeFetched: false,
|
||||
progressMsg: "Fetching the API",
|
||||
}),
|
||||
|
||||
beforeCreate() {
|
||||
this.$store.commit("tweaks/initTweaks");
|
||||
// This has to be imported here,otherwise NUXT won't import the package because its so early in the lifecycle -Front
|
||||
// const { SplashScreen } = await require("@capacitor/splash-screen");
|
||||
// await SplashScreen.hide();
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
// Set timeout is required for $vuetify.theme... dont ask me why -Front
|
||||
this.$store.commit("tweaks/initTweaks");
|
||||
const theming = new Promise((resolve) =>
|
||||
// Set timeout is required for $vuetify.theme... dont ask me why -Front
|
||||
setTimeout(() => {
|
||||
this.$vuetify.theme.dark = JSON.parse(localStorage.getItem("darkTheme")) === true;
|
||||
if (localStorage.getItem("primaryDark") != null)
|
||||
|
|
@ -42,7 +34,6 @@ export default {
|
|||
this.$vuetify.theme.themes.dark.background = localStorage.getItem("backgroundDark");
|
||||
if (localStorage.getItem("backgroundLight") != null)
|
||||
this.$vuetify.theme.themes.light.background = localStorage.getItem("backgroundLight");
|
||||
this.themeFetched = true;
|
||||
this.$vuetube.navigationBar.setTheme(
|
||||
this.$vuetify.theme.currentTheme.background,
|
||||
!this.$vuetify.theme.dark
|
||||
|
|
@ -56,7 +47,6 @@ export default {
|
|||
);
|
||||
|
||||
await theming;
|
||||
this.progressMsg = "Fetching the API";
|
||||
await this.$youtube.getAPI();
|
||||
this.progressMsg = "Navigating Home";
|
||||
this.$router.push(`/${localStorage.getItem("startPage") || "home"}`);
|
||||
|
|
@ -66,13 +56,11 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.container {
|
||||
padding-top: 3em;
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -80%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.intro {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<center>
|
||||
<center class="px-4">
|
||||
<v-img
|
||||
contain
|
||||
style="margin-top: 5em; max-width: 80%; max-height: 15em"
|
||||
src="/dev.svg"
|
||||
/>
|
||||
<h1
|
||||
class="background--text"
|
||||
<h2
|
||||
class="background--text mt-4"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
>
|
||||
Page Under Construction
|
||||
</h1>
|
||||
</h2>
|
||||
<p
|
||||
class="background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
|
|
|
|||
|
|
@ -1,163 +1,133 @@
|
|||
<template>
|
||||
<div class="d-flex flex-column justify-end" style="min-height: 100%">
|
||||
<!-- <div
|
||||
class="py-1 mt-4 background"
|
||||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||
/> -->
|
||||
|
||||
<h4 class="mx-8 mt-6 my-2">Colors</h4>
|
||||
|
||||
<!-- <h4 class="mx-8 mt-6 my-2">Background Colors</h4> -->
|
||||
|
||||
<v-radio-group
|
||||
v-model="$vuetify.theme.currentTheme.background"
|
||||
class="mt-0"
|
||||
>
|
||||
<!-- @change="theme(backgroundColor)" -->
|
||||
<div
|
||||
class="d-flex flex-row px-6 no-wrap"
|
||||
style="max-width: 100%; overflow-x: auto"
|
||||
>
|
||||
<client-only>
|
||||
<div class="d-flex flex-column justify-end" style="min-height: 100%">
|
||||
<!-- ----------------------------------------------Background Colors------------------------ -->
|
||||
<v-radio-group v-model="$vuetify.theme.currentTheme.background">
|
||||
<div
|
||||
v-for="background in $vuetify.theme.dark
|
||||
? backgroundsDark
|
||||
: backgroundsLight"
|
||||
:key="background.color"
|
||||
class="text-center"
|
||||
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="py-4 px-4 ma-2 rounded-lg"
|
||||
:value="$vuetify.theme.dark ? experimentalDark : experimentalLight"
|
||||
/>
|
||||
Adaptive
|
||||
</div>
|
||||
</div>
|
||||
</v-radio-group>
|
||||
<!-- ----------------------------------------------Primary Colors------------------------ -->
|
||||
<v-radio-group v-model="$vuetify.theme.currentTheme.primary" class="mx-2">
|
||||
<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"
|
||||
>
|
||||
<v-radio
|
||||
color="primary"
|
||||
active-class="px-6 border-primary"
|
||||
v-for="color in $vuetify.theme.dark ? primaryDark : primaryLight"
|
||||
:key="color"
|
||||
color="background"
|
||||
on-icon="mdi-check"
|
||||
:light="$vuetify.theme.dark"
|
||||
:dark="!$vuetify.theme.dark"
|
||||
active-class="border-primary"
|
||||
style="transition-duration: 0.3s"
|
||||
:style="{
|
||||
background: background.color,
|
||||
border: '2px solid ' + background.color,
|
||||
background: color,
|
||||
border: '2px solid ' + color,
|
||||
}"
|
||||
class="py-4 px-4 ma-2 rounded-lg"
|
||||
:value="background.color"
|
||||
class="mr-2 my-auto rounded-xl"
|
||||
:value="color"
|
||||
/>
|
||||
{{ background.name }}
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
width="300"
|
||||
content-class="background rounded-lg"
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn
|
||||
icon
|
||||
class="background"
|
||||
style="height: 1.75rem; width: 1.75rem"
|
||||
:class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-color-picker
|
||||
v-model="$vuetify.theme.currentTheme.primary"
|
||||
style="min-width: 100%"
|
||||
class="background"
|
||||
hide-mode-switch
|
||||
dot-size="50"
|
||||
mode="hexa"
|
||||
flat
|
||||
/>
|
||||
</v-dialog>
|
||||
</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="py-4 px-4 ma-2 rounded-lg"
|
||||
:value="$vuetify.theme.dark ? experimentalDark : experimentalLight"
|
||||
/>
|
||||
Adaptive <br />
|
||||
</v-radio-group>
|
||||
<!-- ----------------------------------------------Mode Switch------------------------ -->
|
||||
<v-card
|
||||
flat
|
||||
class="d-flex flex-row justify-between mx-8 mb-4 px-4 background rounded-lg"
|
||||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||
>
|
||||
<div class="my-auto">
|
||||
<div>Dark Mode</div>
|
||||
<div
|
||||
class="background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
style="font-size: 0.5rem"
|
||||
style="font-size: 0.75rem; margin-top: -0.25rem !important"
|
||||
>
|
||||
(Experimental)
|
||||
Bravo Six, Going Dark.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-radio-group>
|
||||
|
||||
<!-- <h4 class="mx-8 mt-6 my-2">Accent Colors</h4> -->
|
||||
|
||||
<v-radio-group
|
||||
v-model="$vuetify.theme.currentTheme.primary"
|
||||
style="margin-top: -1.5rem"
|
||||
class="mx-2"
|
||||
@change="adapt"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-row px-6 no-wrap py-3 align-center"
|
||||
style="max-width: 100%; overflow-x: auto"
|
||||
>
|
||||
<v-radio
|
||||
v-for="color in $vuetify.theme.dark ? primaryDark : primaryLight"
|
||||
:key="color"
|
||||
color="background"
|
||||
on-icon="mdi-check"
|
||||
:light="$vuetify.theme.dark"
|
||||
:dark="!$vuetify.theme.dark"
|
||||
active-class="border-primary"
|
||||
style="transition-duration: 0.3s"
|
||||
:style="{
|
||||
background: color,
|
||||
border: '2px solid ' + color,
|
||||
}"
|
||||
class="mr-2 my-auto rounded-xl"
|
||||
:value="color"
|
||||
/>
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
width="300"
|
||||
content-class="background rounded-lg"
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn
|
||||
icon
|
||||
class="background"
|
||||
style="height: 1.75rem; width: 1.75rem"
|
||||
:class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-color-picker
|
||||
v-model="$vuetify.theme.currentTheme.primary"
|
||||
style="min-width: 100%"
|
||||
class="background"
|
||||
hide-mode-switch
|
||||
dot-size="50"
|
||||
mode="hexa"
|
||||
flat
|
||||
>
|
||||
<!-- @input="(value) => primarySwitch(value)" -->
|
||||
</v-color-picker>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</v-radio-group>
|
||||
|
||||
<v-card
|
||||
flat
|
||||
class="d-flex flex-row justify-between mx-8 mb-4 px-4 background rounded-lg"
|
||||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||
>
|
||||
<div class="my-auto">
|
||||
<div>Dark Mode</div>
|
||||
<div
|
||||
class="background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
style="font-size: 0.75rem; margin-top: -0.25rem !important"
|
||||
>
|
||||
Bravo Six, Going Dark.
|
||||
</div>
|
||||
</div>
|
||||
<v-spacer />
|
||||
<v-switch v-model="$vuetify.theme.dark" persistent-hint inset />
|
||||
<!-- @input="(value) => primarySwitch(value)" -->
|
||||
</v-card>
|
||||
</div>
|
||||
<v-spacer />
|
||||
<v-switch v-model="$vuetify.theme.dark" persistent-hint inset />
|
||||
</v-card>
|
||||
</div>
|
||||
</client-only>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
primaryLight: ["#E57373", "#8b5f37", "#016a49", "#34495E"],
|
||||
primaryDark: ["#B71C1C", "#FFBBFF", "#AAAFFF", "#AAFFFF", "#7CD6AF", "#FEC89B"],
|
||||
primaryLight: ["#E57373", "#F88469", "#22AA22", "#4A9E90", "#777FFF"],
|
||||
backgroundsDark: [
|
||||
{ name: "Dark", color: "#181818" },
|
||||
{ name: "Black", color: "#000000" },
|
||||
],
|
||||
backgroundsDark: [{ name: "Dark", color: "#181818" }, { name: "Black", color: "#000000" }],
|
||||
backgroundsLight: [{ name: "Normal", color: "#ffffff" }],
|
||||
experimentalLight: "",
|
||||
experimentalDark: "",
|
||||
|
|
@ -165,24 +135,9 @@ export default {
|
|||
};
|
||||
},
|
||||
watch: {
|
||||
"$vuetify.theme.currentTheme.primary": {
|
||||
handler: function (value) {
|
||||
this.$vuetify.theme.dark
|
||||
? localStorage.setItem("primaryDark", value)
|
||||
: localStorage.setItem("primaryLight", value);
|
||||
let tempD = this.experimentalDark;
|
||||
let tempL = this.experimentalLight;
|
||||
this.$nextTick(() => {
|
||||
this.adapt();
|
||||
if (this.$vuetify.theme.currentTheme.background === tempD)
|
||||
this.$vuetify.theme.currentTheme.background = this.experimentalDark;
|
||||
if (this.$vuetify.theme.currentTheme.background === tempL)
|
||||
this.$vuetify.theme.currentTheme.background =
|
||||
this.experimentalLight;
|
||||
});
|
||||
},
|
||||
immediate: false,
|
||||
// deep: true,
|
||||
// also triggers background and primary watcher, unless primary colors match
|
||||
"$vuetify.theme.dark"(value) {
|
||||
localStorage.setItem("darkTheme", value);
|
||||
},
|
||||
"$vuetify.theme.currentTheme.background"(value) {
|
||||
this.$vuetify.theme.dark
|
||||
|
|
@ -191,22 +146,38 @@ export default {
|
|||
this.$vuetube.statusBar.setTheme(value, this.$vuetify.theme.dark);
|
||||
this.$vuetube.navigationBar.setTheme(value, !this.$vuetify.theme.dark);
|
||||
},
|
||||
"$vuetify.theme.dark"(value) {
|
||||
localStorage.setItem("darkTheme", value);
|
||||
"$vuetify.theme.currentTheme.primary"(value) {
|
||||
if (value != undefined) {
|
||||
this.$vuetify.theme.dark
|
||||
? localStorage.setItem("primaryDark", value)
|
||||
: localStorage.setItem("primaryLight", value);
|
||||
let tempD = this.experimentalDark;
|
||||
let tempL = this.experimentalLight;
|
||||
this.adapt();
|
||||
if (this.$vuetify.theme.currentTheme.background === tempD)
|
||||
this.$vuetify.theme.currentTheme.background = this.experimentalDark;
|
||||
if (this.$vuetify.theme.currentTheme.background === tempL)
|
||||
this.$vuetify.theme.currentTheme.background = this.experimentalLight;
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
this.adapt();
|
||||
},
|
||||
methods: {
|
||||
adapt() {
|
||||
let hexR = window
|
||||
.getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--v-primary-darken4");
|
||||
let hexL = window
|
||||
.getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--v-primary-lighten4");
|
||||
let hexD = getComputedStyle(document.documentElement).getPropertyValue("--v-primary-darken4");
|
||||
let hexL = getComputedStyle(document.documentElement).getPropertyValue("--v-primary-lighten4");
|
||||
// the menace above returns a hex string with A SPACE " " in front of it, that's why substring(1)
|
||||
// the SPACE " " is stored as part of the CSS variable itself to be used for chaining
|
||||
this.experimentalDark = hexR.substring(1);
|
||||
this.experimentalLight = hexL.substring(1);
|
||||
this.experimentalDark = hexD.substring(1).toUpperCase();
|
||||
this.experimentalLight = hexL.substring(1).toUpperCase();
|
||||
setTimeout(() => {
|
||||
if (this.$vuetify.theme.currentTheme.background == hexD.substring(1).toUpperCase())
|
||||
this.$vuetify.theme.currentTheme.background = this.experimentalDark;
|
||||
if (this.$vuetify.theme.currentTheme.background == hexL.substring(1).toUpperCase())
|
||||
this.$vuetify.theme.currentTheme.background = this.experimentalLight;
|
||||
}, 0);
|
||||
},
|
||||
saveTheme() {
|
||||
navigator.vibrate([10, 100, 5]);
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
<div class="d-flex flex-column justify-end" style="min-height: 100%">
|
||||
<v-card
|
||||
flat
|
||||
class="px-4 ma-4 mt-2 background"
|
||||
class="px-6 ma-4 mt-2 background"
|
||||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||
:style="{
|
||||
borderRadius: `${roundTweak / 2}rem`,
|
||||
}"
|
||||
>
|
||||
<h3 class="mt-4">Rounded Corners</h3>
|
||||
<h3 class="mt-5">Rounded Corners</h3>
|
||||
<div
|
||||
class="background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<center>
|
||||
<center class="px-4">
|
||||
<v-img
|
||||
contain
|
||||
style="margin-top: 5em; max-width: 80%; max-height: 15em"
|
||||
src="/dev.svg"
|
||||
/>
|
||||
<h1
|
||||
class="background--text"
|
||||
<h2
|
||||
class="background--text mt-4"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
>
|
||||
Page Under Construction
|
||||
</h1>
|
||||
</h2>
|
||||
<p
|
||||
class="background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
</deviceKey>
|
||||
</Target>
|
||||
</targetSelectedWithDropDown>
|
||||
<timeTargetWasSelectedWithDropDown value="2022-03-30T18:40:14.226129Z" />
|
||||
<timeTargetWasSelectedWithDropDown value="2022-03-31T17:44:52.270258Z" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -10,19 +10,17 @@
|
|||
"android": {
|
||||
"backgroundColor": "#000000"
|
||||
},
|
||||
"ios": {
|
||||
"backgroundColor": "#000000"
|
||||
},
|
||||
"plugins": {
|
||||
"SplashScreen": {
|
||||
"launchShowDuration": 0,
|
||||
"launchAutoHide": true,
|
||||
"backgroundColor": "#000000",
|
||||
"androidSplashResourceName": "splash",
|
||||
"androidScaleType": "CENTER_CROP",
|
||||
"androidSpinnerStyle": "large",
|
||||
"iosSpinnerStyle": "small",
|
||||
"spinnerColor": "#000000",
|
||||
"showSpinner": false,
|
||||
"splashFullScreen": false,
|
||||
"splashImmersive": false
|
||||
"splashImmersive": false,
|
||||
"launchAutoHide": true,
|
||||
"showSpinner": false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,21 +12,18 @@
|
|||
"android": {
|
||||
"backgroundColor": "#000000"
|
||||
},
|
||||
"ios": {
|
||||
"backgroundColor": "#000000"
|
||||
},
|
||||
|
||||
"plugins": {
|
||||
"SplashScreen": {
|
||||
"launchShowDuration": 0,
|
||||
"launchAutoHide": true,
|
||||
"backgroundColor": "#000000",
|
||||
"androidSplashResourceName": "splash",
|
||||
"androidScaleType": "CENTER_CROP",
|
||||
"androidSpinnerStyle": "large",
|
||||
"iosSpinnerStyle": "small",
|
||||
"spinnerColor": "#000000",
|
||||
"showSpinner": false,
|
||||
"splashFullScreen": false,
|
||||
"splashImmersive": false
|
||||
"splashImmersive": false,
|
||||
"launchAutoHide": true,
|
||||
"showSpinner": false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,19 +10,17 @@
|
|||
"android": {
|
||||
"backgroundColor": "#000000"
|
||||
},
|
||||
"ios": {
|
||||
"backgroundColor": "#000000"
|
||||
},
|
||||
"plugins": {
|
||||
"SplashScreen": {
|
||||
"launchShowDuration": 0,
|
||||
"launchAutoHide": true,
|
||||
"backgroundColor": "#000000",
|
||||
"androidSplashResourceName": "splash",
|
||||
"androidScaleType": "CENTER_CROP",
|
||||
"androidSpinnerStyle": "large",
|
||||
"iosSpinnerStyle": "small",
|
||||
"spinnerColor": "#000000",
|
||||
"showSpinner": false,
|
||||
"splashFullScreen": false,
|
||||
"splashImmersive": false
|
||||
"splashImmersive": false,
|
||||
"launchAutoHide": true,
|
||||
"showSpinner": false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 131 KiB |
Loading…
Reference in a new issue