Merge pull request #25 from ZyqGitHub1/dev

启用新ui

Author: ZyqGitHub1

.eslintrc.js

@@ -43,6 +43,7 @@ module.exports = {
     'import/no-extraneous-dependencies': 'off',
     'import/prefer-default-export': 'off',
     'prefer-promise-reject-errors': 'off',
+    'max-len': 'off',
 
     // allow console.log during development only
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

quasar.conf.js

@@ -64,6 +64,14 @@ module.exports = function (ctx) {
         'QSeparator',
         'QChip',
         'QTooltip',
+        'QBar',
+        'QSpace',
+        // table
+        'QTable',
+        'QTh',
+        'QTr',
+        'QTd',
+        'QExpansionItem',
       ],
 
       directives: ['Ripple'],
@@ -73,8 +81,8 @@ module.exports = function (ctx) {
       config: {
         loadingBar: {
           color: 'purple',
-          size: '10px',
-          position: 'top',
+          size: '5px',
+          position: 'bottom',
           skipHijack: true,
         },
       },

src-electron/main-process/electron-main.js

@@ -22,6 +22,7 @@ function createWindow() {
     width: 1000,
     height: 600,
     useContentSize: true,
+    frame: false,
     webPreferences: {
       nodeIntegration: true,
       webSecurity: false,

src/components/scrollWarp.vue

@@ -0,0 +1,14 @@
+<template>
+  <div style="flex: auto" class="scroll-warp">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScrollWarp',
+};
+</script>
+
+<style>
+</style>

src/components/viewArea.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { dom, throttle } from 'quasar';
+
+const { height } = dom;
+export default {
+  name: 'viewArea',
+  data() {
+    return {
+      style: {
+        height: '0',
+      },
+    };
+  },
+  mounted() {
+    this.setViewAreaHeight();
+    this.$nextTick(() => {
+      const config = {
+        attributes: true,
+      };
+      this.observer = new MutationObserver(throttle(this.setViewAreaHeight, 500));
+      this.observer.observe(document.querySelector('.q-page'), config);
+    });
+  },
+  methods: {
+    setViewAreaHeight() {
+      const scrollWarpElement = document.querySelector('.scroll-warp');
+      const viewAreaHeight = height(scrollWarpElement);
+      this.style.height = `${viewAreaHeight}px`;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/layouts/Home.vue

@@ -7,6 +7,43 @@
       elevated
       class="bg-primary text-white"
     >
+      <q-bar class="q-electron-drag">
+        <q-avatar
+          square
+          color="orange"
+        >H</q-avatar>
+        <div>H-PLAYER</div>
+
+        <q-space />
+
+        <q-btn
+          dense
+          flat
+          round
+          icon="settings"
+          @click="right = !right"
+        />
+
+        <q-btn
+          dense
+          flat
+          icon="minimize"
+          @click="minimize"
+        />
+        <q-btn
+          dense
+          flat
+          icon="crop_square"
+          @click="maximize"
+        />
+        <q-btn
+          dense
+          flat
+          icon="close"
+          @click="closeApp"
+        />
+      </q-bar>
+
       <q-toolbar>
         <q-btn
           dense
@@ -16,20 +53,14 @@
           @click="left = !left"
         />
 
-        <q-toolbar-title>
-          <q-avatar
-            square
-            size="24px"
-            color="orange"
-          >H</q-avatar>
-        </q-toolbar-title>
+        <q-space></q-space>
 
         <q-btn
           dense
           flat
           round
-          icon="settings"
-          @click="right = !right"
+          icon="search"
+          @click="left = !left"
         />
       </q-toolbar>
 
@@ -288,6 +319,29 @@ export default {
       this.$electronStore.clear();
       this.$router.replace('/import');
     },
+    minimize() {
+      if (process.env.MODE === 'electron') {
+        this.$q.electron.remote.BrowserWindow.getFocusedWindow().minimize();
+      }
+    },
+
+    maximize() {
+      if (process.env.MODE === 'electron') {
+        const win = this.$q.electron.remote.BrowserWindow.getFocusedWindow();
+
+        if (win.isMaximized()) {
+          win.unmaximize();
+        } else {
+          win.maximize();
+        }
+      }
+    },
+
+    closeApp() {
+      if (process.env.MODE === 'electron') {
+        this.$q.electron.remote.BrowserWindow.getFocusedWindow().close();
+      }
+    },
   },
   computed: {
     ...mapGetters(['currentSite']),
@@ -317,15 +371,14 @@ export default {
 </script>
 
 <style lang="stylus">
-.q-layout, .q-page {
-  min-height: inherit !important;
-}
-
+// .q-layout, .q-page {
+// min-height: inherit !important;
+// }
 .serch {
   margin-top: 24px;
 }
 
 .class-list {
-  height: calc(100% - 100px)
+  height: calc(100% - 100px);
 }
 </style>

src/layouts/Import.vue

@@ -2,15 +2,42 @@
   <q-layout view="hHh Lpr fFf">
     <!-- (Optional) The Header -->
     <q-header elevated>
-      <q-toolbar>
-        <q-toolbar-title>
-          <q-avatar
-            square
-            size="24px"
-            color="orange"
-          >H</q-avatar>
-        </q-toolbar-title>
-      </q-toolbar>
+      <q-bar class="q-electron-drag">
+        <q-avatar
+          square
+          color="orange"
+        >H</q-avatar>
+        <div>H-PLAYER</div>
+
+        <q-space />
+
+        <q-btn
+          dense
+          flat
+          round
+          icon="settings"
+          @click="right = !right"
+        />
+
+        <q-btn
+          dense
+          flat
+          icon="minimize"
+          @click="minimize"
+        />
+        <q-btn
+          dense
+          flat
+          icon="crop_square"
+          @click="maximize"
+        />
+        <q-btn
+          dense
+          flat
+          icon="close"
+          @click="closeApp"
+        />
+      </q-bar>
     </q-header>
     <!-- (Optional) The Footer -->
     <q-footer>
@@ -80,6 +107,29 @@ export default {
         this.$router.push('/');
       }
     },
+    minimize() {
+      if (process.env.MODE === 'electron') {
+        this.$q.electron.remote.BrowserWindow.getFocusedWindow().minimize();
+      }
+    },
+
+    maximize() {
+      if (process.env.MODE === 'electron') {
+        const win = this.$q.electron.remote.BrowserWindow.getFocusedWindow();
+
+        if (win.isMaximized()) {
+          win.unmaximize();
+        } else {
+          win.maximize();
+        }
+      }
+    },
+
+    closeApp() {
+      if (process.env.MODE === 'electron') {
+        this.$q.electron.remote.BrowserWindow.getFocusedWindow().close();
+      }
+    },
   },
 };
 </script>