Settings

slanatech · Apr 23, 2020 · dcb9219 · dcb9219
1 parent 9dade86
commit dcb9219
Show file tree

Hide file tree

Showing 15 changed files with 503 additions and 1,894 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,4 @@
 {
   "singleQuote": true,
-  "printWidth": 240
+  "printWidth": 160
 }
diff --git a/public/images/avatars/female/1.png b/public/images/avatars/female/1.png
diff --git a/public/images/avatars/male/1.png b/public/images/avatars/male/1.png
diff --git a/src/components/menu/menudrawer.vue b/src/components/menu/menudrawer.vue
@@ -1,5 +1,16 @@
 <template>
-  <q-drawer ref="drawer" show-if-above :mini="miniState" v-model="shown" :side="side" bordered @on-layout="handleLayout" :mini-to-overlay="miniToOverlay" @mouseover="handleMouseOver" @mouseout="handleMouseOut">
+  <q-drawer
+    ref="drawer"
+    show-if-above
+    :mini="miniState"
+    v-model="shown"
+    :side="side"
+    bordered
+    @on-layout="handleLayout"
+    :mini-to-overlay="miniToOverlay"
+    @mouseover="handleMouseOver"
+    @mouseout="handleMouseOut"
+  >
     <div class="fit ub-box">
       <q-scroll-area class="ub-row ub-box-expand">
         <slot name="menu"></slot>

diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
@@ -1,30 +1,13 @@
 <template>
   <div class="q-pa-md" style="max-width: 350px">
-    <q-list bordered padding>
-      <q-item-label header>User Controls</q-item-label>
-
-      <q-item clickable v-ripple>
-        <q-item-section>
-          <q-item-label>Content filtering</q-item-label>
-          <q-item-label caption>
-            Set the content filtering level to restrict apps that can be downloaded
-          </q-item-label>
-        </q-item-section>
-      </q-item>
-
-      <q-item clickable v-ripple>
-        <q-item-section>
-          <q-item-label>Password</q-item-label>
-          <q-item-label caption>
-            Require password for purchase or use password to restrict purchase
-          </q-item-label>
-        </q-item-section>
-      </q-item>
-
-      <q-separator spaced />
-      <q-item-label header>General</q-item-label>
-
-      <q-item tag="label" v-ripple>
+    <q-bar class="bg-none">
+      Settings
+      <q-space />
+      <q-btn dense flat round icon="close" @click="onClose" />
+    </q-bar>
+
+    <q-list padding>
+      <!--<q-item tag="label" v-ripple>
         <q-item-section side top>
           <q-checkbox v-model="check1" />
         </q-item-section>
@@ -65,35 +48,32 @@
 
       <q-separator spaced />
       <q-item-label header>Notifications</q-item-label>
+      -->
 
       <q-item tag="label" v-ripple>
         <q-item-section>
-          <q-item-label>Battery too low</q-item-label>
+          <q-item-label>Dark Mode</q-item-label>
         </q-item-section>
         <q-item-section side>
-          <q-toggle color="blue" v-model="notif1" val="battery" />
+          <q-toggle v-model="dark" icon="brightness_medium" />
         </q-item-section>
       </q-item>
 
       <q-item tag="label" v-ripple>
         <q-item-section>
-          <q-item-label>Friend request</q-item-label>
-          <q-item-label caption>Allow notification</q-item-label>
+          <q-item-label>Expand Menu</q-item-label>
+          <q-item-label caption>Auto expand menu when hovering</q-item-label>
         </q-item-section>
         <q-item-section side top>
-          <q-toggle color="green" v-model="notif2" val="friend" />
+          <q-toggle v-model="menuAutoExpand" icon="menu" />
         </q-item-section>
       </q-item>
 
-      <q-item tag="label" v-ripple>
-        <q-item-section>
-          <q-item-label>Picture uploaded</q-item-label>
-          <q-item-label caption>Allow notification when uploading images</q-item-label>
-        </q-item-section>
-        <q-item-section side top>
-          <q-toggle color="red" v-model="notif3" val="picture" />
-        </q-item-section>
-      </q-item>
+      <q-separator spaced />
+      <q-item-label header>TODO Chart Colors</q-item-label>
+
+      <q-separator spaced />
+      <q-item-label header>TODO Banner Colors, Backgounds</q-item-label>
 
       <q-separator spaced />
       <q-item-label header>Other settings</q-item-label>
@@ -131,6 +111,7 @@
   </div>
 </template>
 <script>
+import { mapActions, mapState } from 'vuex';
 export default {
   name: 'Settings',
   components: {},
@@ -150,8 +131,33 @@ export default {
       mic: 8
     };
   },
-  computed: {},
+  computed: {
+    dark: {
+      get() {
+        return this.$store.state.layout.dark;
+      },
+      set(value) {
+        this.setDark({ dark: value });
+      }
+    },
+    menuAutoExpand: {
+      get() {
+        return this.$store.state.layout.menuAutoExpand;
+      },
+      set(value) {
+        this.setMenuAutoExpand({ menuAutoExpand: value });
+      }
+    }
+  },
   watch: {},
-  methods: {}
+  methods: {
+    ...mapActions({
+      setDark: 'layout/setDark',
+      setMenuAutoExpand: 'layout/setMenuAutoExpand'
+    }),
+    onClose() {
+      this.$emit('close');
+    }
+  }
 };
 </script>
diff --git a/src/components/user/messages.vue b/src/components/user/messages.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="q-pa-md" style="max-width: 700px">
+    <q-bar class="bg-none">
+      Messages
+      <q-space />
+      <q-btn dense flat round icon="close" @click="onClose" />
+    </q-bar>
+
+    <q-list style="width: 600px">
+      <q-item>
+        <q-item-section avatar top>
+          <q-icon name="account_tree" color="black" size="34px" />
+        </q-item-section>
+
+        <q-item-section top class="col-2 gt-sm">
+          <q-item-label class="q-mt-sm">GitHub</q-item-label>
+        </q-item-section>
+
+        <q-item-section top>
+          <q-item-label lines="1">
+            <span class="text-weight-medium">[quasarframework/quasar]</span>
+            <span class="text-grey-8"> - GitHub repository</span>
+          </q-item-label>
+          <q-item-label caption lines="1">
+            @rstoenescu in #3: > Generic type parameter for props
+          </q-item-label>
+          <q-item-label lines="1" class="q-mt-xs text-body2 text-weight-bold text-primary text-uppercase">
+            <span class="cursor-pointer">Open in GitHub</span>
+          </q-item-label>
+        </q-item-section>
+
+        <q-item-section top side>
+          <div class="text-grey-8 q-gutter-xs">
+            <q-btn class="gt-xs" size="12px" flat dense round icon="delete" />
+            <q-btn class="gt-xs" size="12px" flat dense round icon="done" />
+            <!--<q-btn size="12px" flat dense round icon="more_vert" />-->
+          </div>
+        </q-item-section>
+      </q-item>
+
+      <q-separator spaced />
+
+      <q-item>
+        <q-item-section avatar top>
+          <q-icon name="account_tree" color="black" size="34px" />
+        </q-item-section>
+
+        <q-item-section top class="col-2 gt-sm">
+          <q-item-label class="q-mt-sm">GitHub</q-item-label>
+        </q-item-section>
+
+        <q-item-section top>
+          <q-item-label lines="1">
+            <span class="text-weight-medium">[quasarframework/quasar]</span>
+            <span class="text-grey-8"> - GitHub repository</span>
+          </q-item-label>
+          <q-item-label caption lines="1">
+            @rstoenescu in #1: > The build system
+          </q-item-label>
+          <q-item-label lines="1" class="q-mt-xs text-body2 text-weight-bold text-primary text-uppercase">
+            <span class="cursor-pointer">Open in GitHub</span>
+          </q-item-label>
+        </q-item-section>
+
+        <q-item-section top side>
+          <div class="text-grey-8 q-gutter-xs">
+            <q-btn class="gt-xs" size="12px" flat dense round icon="delete" />
+            <q-btn class="gt-xs" size="12px" flat dense round icon="done" />
+            <!--<q-btn size="12px" flat dense round icon="more_vert" />-->
+          </div>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Messages',
+  components: {},
+  props: {},
+  data() {
+    return {
+      check1: true,
+      check2: false,
+      check3: false,
+
+      notif1: true,
+      notif2: true,
+      notif3: false,
+
+      volume: 6,
+      brightness: 3,
+      mic: 8
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    onClose() {
+      this.$emit('close');
+    }
+  }
+};
+</script>