From db9e588461c4c074236fee48f8647e2d5a937cdd Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Mon, 14 Mar 2022 13:13:24 -0400
Subject: [PATCH] MASSIVE UI overhaul

---
 NUXT/layouts/default.vue          | 29 +++--------
 NUXT/package.json                 |  3 +-
 NUXT/pages/{ => mods}/about.vue   |  3 +-
 NUXT/pages/{ => mods}/logs.vue    |  0
 NUXT/pages/mods/theme.vue         | 66 ++++++++++++++++++++++++
 NUXT/pages/{ => mods}/updates.vue |  0
 NUXT/pages/settings.vue           | 86 +++++++++++--------------------
 package.json                      |  3 +-
 8 files changed, 109 insertions(+), 81 deletions(-)
 rename NUXT/pages/{ => mods}/about.vue (92%)
 rename NUXT/pages/{ => mods}/logs.vue (100%)
 create mode 100644 NUXT/pages/mods/theme.vue
 rename NUXT/pages/{ => mods}/updates.vue (100%)

diff --git a/NUXT/layouts/default.vue b/NUXT/layouts/default.vue
index 8c732ce..a66aaa8 100644
--- a/NUXT/layouts/default.vue
+++ b/NUXT/layouts/default.vue
@@ -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: [],
   }),
@@ -136,7 +122,7 @@ export default {
       //---   Back Closes Search   ---//
       if (this.search) {
         this.search = false;
-      
+
       //---   Back Goes Back   ---//
       } else if (!canGoBack){
         CapacitorApp.exitApp();
@@ -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";
     }
diff --git a/NUXT/package.json b/NUXT/package.json
index e0491d7..c254990 100644
--- a/NUXT/package.json
+++ b/NUXT/package.json
@@ -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"
diff --git a/NUXT/pages/about.vue b/NUXT/pages/mods/about.vue
similarity index 92%
rename from NUXT/pages/about.vue
rename to NUXT/pages/mods/about.vue
index 5cf4f33..ddbb9f8 100644
--- a/NUXT/pages/about.vue
+++ b/NUXT/pages/mods/about.vue
@@ -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>
diff --git a/NUXT/pages/logs.vue b/NUXT/pages/mods/logs.vue
similarity index 100%
rename from NUXT/pages/logs.vue
rename to NUXT/pages/mods/logs.vue
diff --git a/NUXT/pages/mods/theme.vue b/NUXT/pages/mods/theme.vue
new file mode 100644
index 0000000..0174358
--- /dev/null
+++ b/NUXT/pages/mods/theme.vue
@@ -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>
diff --git a/NUXT/pages/updates.vue b/NUXT/pages/mods/updates.vue
similarity index 100%
rename from NUXT/pages/updates.vue
rename to NUXT/pages/mods/updates.vue
diff --git a/NUXT/pages/settings.vue b/NUXT/pages/settings.vue
index 0174358..cc65b0f 100644
--- a/NUXT/pages/settings.vue
+++ b/NUXT/pages/settings.vue
@@ -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>
-      </v-row>
-    </v-card>
+      <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>
 
-
-  </div>
+    </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>
diff --git a/package.json b/package.json
index e021215..cacc6ce 100644
--- a/package.json
+++ b/package.json
@@ -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"
   }
 }