mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-22 19:25:16 +00:00
theme cleanup, searchbar adjustments
This commit is contained in:
Nikita Krupin
parent
b1f0db4c39
commit
0c11c948ff
10 changed files with 40 additions and 37 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<v-card
|
||||
class="entry gridVideoRenderer accent"
|
||||
class="entry gridVideoRenderer background"
|
||||
:to="`/watch?v=${video.videoId}`"
|
||||
flat
|
||||
>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<v-bottom-navigation
|
||||
v-model="tabSelection"
|
||||
shift
|
||||
class="bottomNav py-4 accent"
|
||||
class="bottomNav py-4 background"
|
||||
>
|
||||
<v-btn
|
||||
v-for="(item, i) in tabs"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<v-card
|
||||
class="entry gridVideoRenderer accent"
|
||||
class="entry gridVideoRenderer background"
|
||||
:to="`/watch?v=${video.videoId}`"
|
||||
flat
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<v-card
|
||||
style="height: 4rem !important; display: flex; box-shadow: none !important"
|
||||
color="accent"
|
||||
color="background"
|
||||
class="rounded-0 pa-3 topNav"
|
||||
>
|
||||
<h3 v-show="!search" class="my-auto ml-4" v-text="page" />
|
||||
|
|
@ -22,7 +22,8 @@
|
|||
dense
|
||||
flat
|
||||
label="Search"
|
||||
class="searchBar"
|
||||
style="margin-top: 1px"
|
||||
background-color="background lighten-1"
|
||||
@input="$emit('text-changed', text)"
|
||||
@keyup.enter="$emit('search-btn', text)"
|
||||
/>
|
||||
|
|
@ -30,6 +31,7 @@
|
|||
<v-spacer v-if="!search" />
|
||||
|
||||
<v-btn
|
||||
v-if="!search"
|
||||
v-show="page == 'Home'"
|
||||
icon
|
||||
tile
|
||||
|
|
@ -103,7 +105,4 @@ export default {
|
|||
margin-left: 2em;
|
||||
/*transform: translateY(-2.5%);*/
|
||||
}
|
||||
.searchBar {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
@scroll-to-top="$refs.pgscroll.scrollTop = 0"
|
||||
/>
|
||||
|
||||
<div class="accent" style="height: 100%; margin-top: 4rem">
|
||||
<div class="background" style="height: 100%; margin-top: 4rem">
|
||||
<div
|
||||
v-show="!search"
|
||||
class="background"
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
<div
|
||||
v-show="search"
|
||||
class="accent"
|
||||
class="background"
|
||||
style="
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -60,18 +60,22 @@ export default {
|
|||
base: colors.red.lighten2,
|
||||
lighten2: colors.red.lighten4,
|
||||
},
|
||||
background: "#fff",
|
||||
accent: "#fff",
|
||||
info: "#000",
|
||||
background: {
|
||||
base: "#fff",
|
||||
lighten1: "#eee",
|
||||
lighten2: "#ddd",
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
primary: {
|
||||
base: colors.red.darken2,
|
||||
lighten2: "#533",
|
||||
},
|
||||
background: "#333",
|
||||
accent: "#222",
|
||||
info: "#fff",
|
||||
background: {
|
||||
base: "#222",
|
||||
lighten1: "#282828",
|
||||
lighten2: "#333",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -30,24 +30,24 @@ export default {
|
|||
this.$vuetify.theme.dark = darkTheme;
|
||||
//this.$vuetube.statusBar.setDark(); //Not needed unless setLight() is used below -Front
|
||||
this.$vuetube.statusBar.setBackground(
|
||||
this.$vuetify.theme.themes.dark.accent
|
||||
this.$vuetify.theme.themes.dark.background
|
||||
);
|
||||
|
||||
const isOled = localStorage.getItem("isOled");
|
||||
|
||||
if (isOled == "true") {
|
||||
(this.$vuetify.theme.themes.dark.accent = "#000"),
|
||||
(this.$vuetify.theme.themes.dark.accent = "#000"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#000"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#000"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#000");
|
||||
} else {
|
||||
(this.$vuetify.theme.themes.dark.accent = "#222"),
|
||||
(this.$vuetify.theme.themes.dark.accent = "#222"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#222"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#222"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#333");
|
||||
}
|
||||
} else {
|
||||
//this.$vuetube.statusBar.setLight() //Looks weird -Front
|
||||
this.$vuetube.statusBar.setBackground(
|
||||
this.$vuetify.theme.themes.light.accent
|
||||
this.$vuetify.theme.themes.light.background
|
||||
);
|
||||
}
|
||||
}, 0);
|
||||
|
|
|
|||
|
|
@ -37,13 +37,13 @@
|
|||
</v-card>
|
||||
|
||||
<v-card class="pb-5">
|
||||
<v-card-title>Accent Color</v-card-title>
|
||||
<v-card-title>background Color</v-card-title>
|
||||
<v-card-text>
|
||||
<v-alert color="primary" dense outlined type="warning"
|
||||
>NOTE: This doesn't save after closing the app (yet)</v-alert
|
||||
>
|
||||
<v-color-picker
|
||||
v-model="accentColor"
|
||||
v-model="backgroundColor"
|
||||
dot-size="5"
|
||||
hide-mode-switch
|
||||
mode="hexa"
|
||||
|
|
@ -57,12 +57,12 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
accentColor: "#ffffff",
|
||||
backgroundColor: "#ffffff",
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
accentColor: function (val) {
|
||||
backgroundColor: function (val) {
|
||||
this.$vuetify.theme.currentTheme.primary.base = val;
|
||||
let primaryAlt = this.$vuetube.hexToRgb(val);
|
||||
|
||||
|
|
@ -86,24 +86,24 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
this.accentColor = this.$vuetify.theme.themes.dark.primary.base;
|
||||
this.backgroundColor = this.$vuetify.theme.themes.dark.primary.base;
|
||||
},
|
||||
|
||||
methods: {
|
||||
amoled() {
|
||||
this.$vuetify.theme.themes.dark.background === "#000"
|
||||
? ((this.$vuetify.theme.themes.dark.accent = "#222"),
|
||||
(this.$vuetify.theme.themes.dark.accent = "#222"),
|
||||
? ((this.$vuetify.theme.themes.dark.background = "#222"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#222"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#333"),
|
||||
localStorage.setItem("isOled", false))
|
||||
: ((this.$vuetify.theme.themes.dark.accent = "#000"),
|
||||
(this.$vuetify.theme.themes.dark.accent = "#000"),
|
||||
: ((this.$vuetify.theme.themes.dark.background = "#000"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#000"),
|
||||
(this.$vuetify.theme.themes.dark.background = "#000"),
|
||||
localStorage.setItem("isOled", true));
|
||||
},
|
||||
saveTheme(isDark) {
|
||||
this.$vuetube.statusBar.setBackground(
|
||||
this.$vuetify.theme.currentTheme.accent
|
||||
this.$vuetify.theme.currentTheme.background
|
||||
);
|
||||
localStorage.setItem("darkTheme", isDark);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="accent">
|
||||
<div class="background">
|
||||
<!-- Video Loading Animation -->
|
||||
<vid-load-renderer v-if="renderer.length <= 0" />
|
||||
<sectionListRenderer :render="renderer" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="accent">
|
||||
<div class="background">
|
||||
<videoPlayer :vid-src="vidSrc" />
|
||||
<v-card v-if="loaded" class="ml-2 mr-2 accent" flat>
|
||||
<v-card v-if="loaded" class="ml-2 mr-2 background" flat>
|
||||
<v-card-title
|
||||
class="mt-2"
|
||||
style="
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
<!-- <v-bottom-sheet
|
||||
v-model="showMore"
|
||||
color="accent"
|
||||
color="background"
|
||||
style="z-index: 9999999"
|
||||
>
|
||||
<v-sheet style="padding: 1em">
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
</div>
|
||||
</v-sheet>
|
||||
</v-bottom-sheet> -->
|
||||
<!-- <v-bottom-sheet v-model="share" color="accent" style="z-index: 9999999">
|
||||
<!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
|
||||
<v-sheet style="padding: 1em">
|
||||
<div class="scroll-y">
|
||||
{{ description }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue