mirror of https://github.com/VueTubeApp/VueTube
MASSIVE UI overhaul
This commit is contained in:
parent
748ae00651
commit
db9e588461
|
@ -16,14 +16,7 @@
|
||||||
|
|
||||||
<v-btn text class="toolbarAction mr-2 fill-height" color="white" @click="search = !search"><v-icon>mdi-magnify</v-icon></v-btn>
|
<v-btn text class="toolbarAction mr-2 fill-height" color="white" @click="search = !search"><v-icon>mdi-magnify</v-icon></v-btn>
|
||||||
|
|
||||||
<v-menu offset-y content-class="mt-8">
|
<v-btn text class="toolbarAction fill-height" color="white" v-show="!search" to="/settings"><v-icon>mdi-dots-vertical</v-icon></v-btn>
|
||||||
<template v-slot:activator="{ on, attrs }"><v-btn text class="toolbarAction fill-height" v-bind="attrs" v-on="on" color="white" v-show="!search"><v-icon>mdi-dots-vertical</v-icon></v-btn></template>
|
|
||||||
<v-list style="min-width: 180px;">
|
|
||||||
<v-list-item v-for="(item, index) in dropdownMenu" :key="index">
|
|
||||||
<v-btn text :to="item.link" style="text-decoration: none; width: 100%;" class="info--text">{{ item.title }}</v-btn>
|
|
||||||
</v-list-item>
|
|
||||||
</v-list>
|
|
||||||
</v-menu>
|
|
||||||
|
|
||||||
</v-card>
|
</v-card>
|
||||||
|
|
||||||
|
@ -60,10 +53,10 @@ html, body {
|
||||||
}
|
}
|
||||||
|
|
||||||
p, span, div {
|
p, span, div {
|
||||||
/* -webkit-user-select: none; /* Safari */
|
-webkit-user-select: none; /* Safari */
|
||||||
/* -moz-user-select: none; /* Firefox */
|
-moz-user-select: none; /* Firefox */
|
||||||
/* -ms-user-select: none; /* IE10+/Edge */
|
-ms-user-select: none; /* IE10+/Edge */
|
||||||
/* user-select: none; /* Standard */
|
user-select: none; /* Standard */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
@ -106,13 +99,6 @@ export default {
|
||||||
data: () => ({
|
data: () => ({
|
||||||
search: false,
|
search: false,
|
||||||
|
|
||||||
dropdownMenu: [
|
|
||||||
{ title: "Settings", link: "/settings" },
|
|
||||||
{ title: "Updates", link: "/updates" },
|
|
||||||
{ title: "About", link: "/about" },
|
|
||||||
{ title: "Logs", link: "/logs" }
|
|
||||||
],
|
|
||||||
|
|
||||||
text: null,
|
text: null,
|
||||||
response: [],
|
response: [],
|
||||||
}),
|
}),
|
||||||
|
@ -136,7 +122,7 @@ export default {
|
||||||
//--- Back Closes Search ---//
|
//--- Back Closes Search ---//
|
||||||
if (this.search) {
|
if (this.search) {
|
||||||
this.search = false;
|
this.search = false;
|
||||||
|
|
||||||
//--- Back Goes Back ---//
|
//--- Back Goes Back ---//
|
||||||
} else if (!canGoBack){
|
} else if (!canGoBack){
|
||||||
CapacitorApp.exitApp();
|
CapacitorApp.exitApp();
|
||||||
|
@ -147,7 +133,8 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
page: function () {
|
page: function () {
|
||||||
let pageName = this.$route.path.split("/")[1];
|
const splitPath = this.$route.path.split("/");
|
||||||
|
let pageName = splitPath[splitPath.length-1];
|
||||||
pageName = pageName.charAt(0).toUpperCase() + pageName.slice(1);
|
pageName = pageName.charAt(0).toUpperCase() + pageName.slice(1);
|
||||||
return pageName || "Home";
|
return pageName || "Home";
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,7 +17,8 @@
|
||||||
"vue-server-renderer": "^2.6.14",
|
"vue-server-renderer": "^2.6.14",
|
||||||
"vue-template-compiler": "^2.6.14",
|
"vue-template-compiler": "^2.6.14",
|
||||||
"vuetify": "^2.6.1",
|
"vuetify": "^2.6.1",
|
||||||
"webpack": "^4.46.0"
|
"webpack": "^4.46.0",
|
||||||
|
"ytdl-core": "^4.11.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@nuxtjs/vuetify": "^1.12.3"
|
"@nuxtjs/vuetify": "^1.12.3"
|
||||||
|
|
|
@ -12,8 +12,7 @@
|
||||||
|
|
||||||
<h3 style="margin-top: 1em;">Device Information</h3>
|
<h3 style="margin-top: 1em;">Device Information</h3>
|
||||||
<div>Platform: {{ deviceInfo.platform }}</div>
|
<div>Platform: {{ deviceInfo.platform }}</div>
|
||||||
<div>OS: {{ deviceInfo.operatingSystem }}</div>
|
<div>OS: {{ deviceInfo.operatingSystem }} ({{ deviceInfo.osVersion }})</div>
|
||||||
<div>OS Version: {{ deviceInfo.osVersion }}</div>
|
|
||||||
<div>Model: {{ deviceInfo.model }}</div>
|
<div>Model: {{ deviceInfo.model }}</div>
|
||||||
<div>Manufacturer: {{ deviceInfo.manufacturer }}</div>
|
<div>Manufacturer: {{ deviceInfo.manufacturer }}</div>
|
||||||
<div>Virtual: {{ deviceInfo.isVirtual }}</div>
|
<div>Virtual: {{ deviceInfo.isVirtual }}</div>
|
|
@ -0,0 +1,66 @@
|
||||||
|
<template>
|
||||||
|
<div class="mainContainer pt-1">
|
||||||
|
|
||||||
|
<v-card class="pb-5">
|
||||||
|
<v-card-title>Theme</v-card-title>
|
||||||
|
<v-row class="ml-3 mr-6">
|
||||||
|
<section class="row">
|
||||||
|
<v-switch
|
||||||
|
v-model="$vuetify.theme.dark"
|
||||||
|
label="Dark Theme"
|
||||||
|
hint="Bravo Six, Going Dark."
|
||||||
|
persistent-hint
|
||||||
|
inset
|
||||||
|
@click="saveTheme($vuetify.theme.dark)"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
<v-btn v-if="$vuetify.theme.dark" text tile class="white--text black" @click="amoled" >
|
||||||
|
{{
|
||||||
|
this.$vuetify.theme.themes.dark.background === '#000'
|
||||||
|
? 'LCD'
|
||||||
|
: 'OLED'
|
||||||
|
}}
|
||||||
|
<v-icon :size="this.$vuetify.theme.themes.dark.background === '#000' ? '.5rem' : '.9rem'" class="ml-2">mdi-brightness-2</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</v-row>
|
||||||
|
</v-card>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
amoled() {
|
||||||
|
this.$vuetify.theme.themes.dark.background === '#000' ? (
|
||||||
|
this.$vuetify.theme.themes.dark.accent = '#222',
|
||||||
|
this.$vuetify.theme.themes.dark.accent2 = '#222',
|
||||||
|
this.$vuetify.theme.themes.dark.background = '#333'
|
||||||
|
) : (
|
||||||
|
this.$vuetify.theme.themes.dark.accent = '#000',
|
||||||
|
this.$vuetify.theme.themes.dark.accent2 = '#000',
|
||||||
|
this.$vuetify.theme.themes.dark.background = '#000'
|
||||||
|
)
|
||||||
|
// doesn't work 😭
|
||||||
|
// console.log(document.getElementsByClassName('v-application--wrap')[0])
|
||||||
|
// console.log(document.getElementsByClassName('v-application--wrap')[0].style)
|
||||||
|
// document.getElementsByClassName('v-application--wrap')[0].style.backgroundColor = "#000000 !important"
|
||||||
|
},
|
||||||
|
|
||||||
|
saveTheme(isDark) {
|
||||||
|
this.$auth.$storage.setLocalStorage("darkTheme", isDark)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.v-card {
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 0 1em 1em 1em;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,66 +1,42 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mainContainer pt-1">
|
<div style="padding-top: 1em;">
|
||||||
|
<v-list-item v-for="(item, index) in settingsItems" :key="index">
|
||||||
|
|
||||||
<v-card class="pb-5">
|
<v-btn text class="entry text-left" :to="item.to" :disabled="item.disabled">
|
||||||
<v-card-title>Theme</v-card-title>
|
<v-icon v-text="item.icon" size="30px" class="icon" />
|
||||||
<v-row class="ml-3 mr-6">
|
{{ item.name }}
|
||||||
<section class="row">
|
</v-btn>
|
||||||
<v-switch
|
|
||||||
v-model="$vuetify.theme.dark"
|
|
||||||
label="Dark Theme"
|
|
||||||
hint="Bravo Six, Going Dark."
|
|
||||||
persistent-hint
|
|
||||||
inset
|
|
||||||
@click="saveTheme($vuetify.theme.dark)"
|
|
||||||
/>
|
|
||||||
</section>
|
|
||||||
<v-btn v-if="$vuetify.theme.dark" text tile class="white--text black" @click="amoled" >
|
|
||||||
{{
|
|
||||||
this.$vuetify.theme.themes.dark.background === '#000'
|
|
||||||
? 'LCD'
|
|
||||||
: 'OLED'
|
|
||||||
}}
|
|
||||||
<v-icon :size="this.$vuetify.theme.themes.dark.background === '#000' ? '.5rem' : '.9rem'" class="ml-2">mdi-brightness-2</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-row>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
|
</v-list-item>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.entry {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: left !important;
|
||||||
|
font-size: 1.25em;
|
||||||
|
padding: 1.5em 0.5em 1.5em 0.5em !important;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
data() {
|
||||||
amoled() {
|
return {
|
||||||
this.$vuetify.theme.themes.dark.background === '#000' ? (
|
settingsItems: [
|
||||||
this.$vuetify.theme.themes.dark.accent = '#222',
|
{ name: "General", icon: "mdi-cog", to: "", disabled: true },
|
||||||
this.$vuetify.theme.themes.dark.accent2 = '#222',
|
{ name: "Theme", icon: "mdi-brush-variant", to: "/mods/theme" },
|
||||||
this.$vuetify.theme.themes.dark.background = '#333'
|
{ name: "Player", icon: "mdi-motion-play-outline", to: "", disabled: true },
|
||||||
) : (
|
{ name: "UI Tweaker", icon: "mdi-television-guide", to: "", disabled: true },
|
||||||
this.$vuetify.theme.themes.dark.accent = '#000',
|
{ name: "Updates", icon: "mdi-cloud-download-outline", to: "/mods/updates" },
|
||||||
this.$vuetify.theme.themes.dark.accent2 = '#000',
|
{ name: "Logs", icon: "mdi-text-box-outline", to: "/mods/logs" },
|
||||||
this.$vuetify.theme.themes.dark.background = '#000'
|
{ name: "About", icon: "mdi-information-outline", to: "/mods/about" },
|
||||||
)
|
]
|
||||||
// doesn't work 😭
|
|
||||||
// console.log(document.getElementsByClassName('v-application--wrap')[0])
|
|
||||||
// console.log(document.getElementsByClassName('v-application--wrap')[0].style)
|
|
||||||
// document.getElementsByClassName('v-application--wrap')[0].style.backgroundColor = "#000000 !important"
|
|
||||||
},
|
|
||||||
|
|
||||||
saveTheme(isDark) {
|
|
||||||
this.$auth.$storage.setLocalStorage("darkTheme", isDark)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.v-card {
|
|
||||||
margin: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
padding: 0 1em 1em 1em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -6,7 +6,6 @@
|
||||||
"@capacitor/browser": "^1.0.7",
|
"@capacitor/browser": "^1.0.7",
|
||||||
"@capacitor/cli": "^3.4.0",
|
"@capacitor/cli": "^3.4.0",
|
||||||
"@capacitor/core": "^3.4.0",
|
"@capacitor/core": "^3.4.0",
|
||||||
"@capacitor/device": "^1.1.2",
|
"@capacitor/device": "^1.1.2"
|
||||||
"ytdl-core": "^4.11.0"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue