mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-10 13:35:07 +00:00
MASSIVE UI overhaul
This commit is contained in:
Kenny
parent
748ae00651
commit
db9e588461
8 changed files with 109 additions and 81 deletions
|
|
@ -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-menu offset-y content-class="mt-8">
|
||||
<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-btn text class="toolbarAction fill-height" color="white" v-show="!search" to="/settings"><v-icon>mdi-dots-vertical</v-icon></v-btn>
|
||||
|
||||
</v-card>
|
||||
|
||||
|
|
@ -60,10 +53,10 @@ html, body {
|
|||
}
|
||||
|
||||
p, span, div {
|
||||
/* -webkit-user-select: none; /* Safari */
|
||||
/* -moz-user-select: none; /* Firefox */
|
||||
/* -ms-user-select: none; /* IE10+/Edge */
|
||||
/* user-select: none; /* Standard */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE10+/Edge */
|
||||
user-select: none; /* Standard */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -106,13 +99,6 @@ export default {
|
|||
data: () => ({
|
||||
search: false,
|
||||
|
||||
dropdownMenu: [
|
||||
{ title: "Settings", link: "/settings" },
|
||||
{ title: "Updates", link: "/updates" },
|
||||
{ title: "About", link: "/about" },
|
||||
{ title: "Logs", link: "/logs" }
|
||||
],
|
||||
|
||||
text: null,
|
||||
response: [],
|
||||
}),
|
||||
|
|
@ -147,7 +133,8 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
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);
|
||||
return pageName || "Home";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@
|
|||
"vue-server-renderer": "^2.6.14",
|
||||
"vue-template-compiler": "^2.6.14",
|
||||
"vuetify": "^2.6.1",
|
||||
"webpack": "^4.46.0"
|
||||
"webpack": "^4.46.0",
|
||||
"ytdl-core": "^4.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxtjs/vuetify": "^1.12.3"
|
||||
|
|
|
|||
|
|
@ -12,8 +12,7 @@
|
|||
|
||||
<h3 style="margin-top: 1em;">Device Information</h3>
|
||||
<div>Platform: {{ deviceInfo.platform }}</div>
|
||||
<div>OS: {{ deviceInfo.operatingSystem }}</div>
|
||||
<div>OS Version: {{ deviceInfo.osVersion }}</div>
|
||||
<div>OS: {{ deviceInfo.operatingSystem }} ({{ deviceInfo.osVersion }})</div>
|
||||
<div>Model: {{ deviceInfo.model }}</div>
|
||||
<div>Manufacturer: {{ deviceInfo.manufacturer }}</div>
|
||||
<div>Virtual: {{ deviceInfo.isVirtual }}</div>
|
||||
66
NUXT/pages/mods/theme.vue
Normal file
66
NUXT/pages/mods/theme.vue
Normal file
|
|
@ -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>
|
||||
<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-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 text class="entry text-left" :to="item.to" :disabled="item.disabled">
|
||||
<v-icon v-text="item.icon" size="30px" class="icon" />
|
||||
{{ item.name }}
|
||||
</v-btn>
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
|
||||
</v-list-item>
|
||||
</div>
|
||||
</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>
|
||||
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)
|
||||
data() {
|
||||
return {
|
||||
settingsItems: [
|
||||
{ name: "General", icon: "mdi-cog", to: "", disabled: true },
|
||||
{ name: "Theme", icon: "mdi-brush-variant", to: "/mods/theme" },
|
||||
{ name: "Player", icon: "mdi-motion-play-outline", to: "", disabled: true },
|
||||
{ name: "UI Tweaker", icon: "mdi-television-guide", to: "", disabled: true },
|
||||
{ name: "Updates", icon: "mdi-cloud-download-outline", to: "/mods/updates" },
|
||||
{ name: "Logs", icon: "mdi-text-box-outline", to: "/mods/logs" },
|
||||
{ name: "About", icon: "mdi-information-outline", to: "/mods/about" },
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-card {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 0 1em 1em 1em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
"@capacitor/browser": "^1.0.7",
|
||||
"@capacitor/cli": "^3.4.0",
|
||||
"@capacitor/core": "^3.4.0",
|
||||
"@capacitor/device": "^1.1.2",
|
||||
"ytdl-core": "^4.11.0"
|
||||
"@capacitor/device": "^1.1.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue