use frameless window

.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,8 @@ module.exports = function (ctx) {
         'QSeparator',
         'QChip',
         'QTooltip',
+        'QBar',
+        'QSpace',
       ],
 
       directives: ['Ripple'],
@@ -73,8 +75,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/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/pages/VideoList.vue

@@ -1,7 +1,8 @@
 <template>
-  <q-page padding>
+  <q-page
+    padding
+  >
     <q-scroll-area
-      style="height: calc(100vh - 198px);"
       :thumb-style="thumbStyle"
     >
       <div class="q-pa-md row items-start justify-center q-gutter-md">
@@ -16,9 +17,7 @@
             spinner-color="red"
             style="height: 200px;width: 290px"
           >
-            <div
-              class="absolute-bottom ellipsis text-subtitle1 text-center q-pa-xs"
-            >{{video.name}}</div>
+            <div class="absolute-bottom ellipsis text-subtitle1 text-center q-pa-xs">{{video.name}}</div>
             <template v-slot:error>
               <div class="absolute-full flex flex-center bg-negative text-white">
                 <span>Cannot load image</span>
@@ -62,6 +61,7 @@
         />
       </q-inner-loading>
     </q-scroll-area>
+     <q-resize-observer @resize="onResize" />
   </q-page>
 </template>
 
@@ -82,10 +82,14 @@ export default {
         page: 1,
         total: 0,
       },
+      scrollStyle: {
+        height: 0,
+      },
     };
   },
   mounted() {
     this.getVideoList(1);
+    console.log(this.layout);
   },
   watch: {
     // eslint-disable-next-line func-names
@@ -143,6 +147,9 @@ export default {
       this.setCurrentVideo(video);
       this.$router.push('/video');
     },
+    onResize(size) {
+      console.log(size);
+    },
   },
   computed: {
     ...mapGetters(['currentSite']),