Finished: miniwindow

src/main/index.js

@@ -75,7 +75,6 @@ function createTray () {
         } else {
           settingWindow.show()
           settingWindow.focus()
-          miniWindow.show()
         }
       }
     },
@@ -196,10 +195,13 @@ const createWindow = () => {
 }
 
 const createMiniWidow = () => {
+  if (miniWindow) {
+    return false
+  }
   miniWindow = new BrowserWindow({
     height: 64,
-    width: 64, // 196
-    show: true,
+    width: 64,
+    show: false,
     frame: false,
     fullscreenable: false,
     resizable: false,
@@ -432,6 +434,23 @@ ipcMain.on('autoStart', (evt, val) => {
   })
 })
 
+ipcMain.on('openSettingWindow', (evt) => {
+  if (!settingWindow) {
+    createSettingWindow()
+  } else {
+    settingWindow.show()
+  }
+  miniWindow.hide()
+})
+
+ipcMain.on('openMiniWindow', (evt) => {
+  if (!miniWindow) {
+    createMiniWidow()
+  }
+  miniWindow.show()
+  settingWindow.hide()
+})
+
 const shortKeyHash = {
   upload: uploadClipboardFiles
 }

src/renderer/components/MiniPage.vue

@@ -25,7 +25,13 @@ export default {
       dragover: false,
       progress: 0,
       showProgress: false,
-      showError: false
+      showError: false,
+      dragging: false,
+      wX: '',
+      wY: '',
+      screenX: '',
+      screenY: '',
+      menu: null
     }
   },
   mounted () {
@@ -38,6 +44,10 @@ export default {
         this.showError = true
       }
     })
+    this.buildMenu()
+    window.addEventListener('mousedown', this.handleMouseDown, false)
+    window.addEventListener('mousemove', this.handleMouseMove, false)
+    window.addEventListener('mouseup', this.handleMouseUp, false)
   },
   watch: {
     progress (val) {
@@ -74,10 +84,58 @@ export default {
         sendFiles.push(obj)
       })
       this.$electron.ipcRenderer.send('uploadChoosedFiles', sendFiles)
+    },
+    handleMouseDown (e) {
+      this.dragging = true
+      this.wX = e.pageX
+      this.wY = e.pageY
+      this.screenX = e.screenX
+      this.screenY = e.screenY
+    },
+    handleMouseMove (e) {
+      e.preventDefault()
+      e.stopPropagation()
+      if (this.dragging) {
+        const xLoc = e.screenX - this.wX
+        const yLoc = e.screenY - this.wY
+        this.$electron.remote.BrowserWindow.getFocusedWindow().setPosition(xLoc, yLoc)
+      }
+    },
+    handleMouseUp (e) {
+      this.dragging = false
+      if (this.screenX === e.screenX && this.screenY === e.screenY) {
+        if (e.button === 0) { // left mouse
+          this.openUplodWindow()
+        } else {
+          this.openContextMenu()
+        }
+      }
+    },
+    openContextMenu () {
+      this.menu.popup(this.$electron.remote.getCurrentWindow())
+    },
+    buildMenu () {
+      const _this = this
+      const template = [
+        {
+          label: '打开详细窗口',
+          click () {
+            _this.$electron.ipcRenderer.send('openSettingWindow')
+          }
+        },
+        {
+          role: 'quit',
+          label: '退出'
+        }
+      ]
+      this.menu = this.$electron.remote.Menu.buildFromTemplate(template)
     }
   },
   beforeDestroy () {
     this.$electron.ipcRenderer.removeAllListeners('uploadProgress')
+    window.removeEventListener('mousedown', this.handleMouseDown, false)
+    window.removeEventListener('mousemove', this.handleMouseMove, false)
+    window.removeEventListener('mouseup', this.handleMouseUp, false)
   }
 }
 </script>
@@ -87,7 +145,6 @@ export default {
     color #FFF
     height 100vh
     width 100vw
-    -webkit-app-region: drag
     border-radius 50%
     text-align center
     line-height 100vh
@@ -98,6 +155,7 @@ export default {
     position relative
     border 4px solid #fff
     box-sizing border-box
+    cursor pointer
     #upload-area
       height 100%
       width 100%

src/renderer/components/SettingPage.vue

@@ -4,6 +4,7 @@
       PicGo - {{ version }}
       <div class="handle-bar" v-if="os !== 'darwin'">
         <i class="el-icon-minus" @click="minimizeWindow"></i>
+        <i class="el-icon-circle-plus-outline" @click="openMiniWindow"></i>
         <i class="el-icon-close" @click="closeWindow"></i>
       </div>
     </div>
@@ -205,7 +206,7 @@ export default {
       this.menu = Menu.buildFromTemplate(template)
     },
     openDialog () {
-      this.menu.popup(remote.getCurrentWindow)
+      this.menu.popup(remote.getCurrentWindow())
     },
     keyDetect (type, event) {
       this.shortKey[type] = keyDetect(event).join('+')
@@ -234,6 +235,9 @@ export default {
           return false
         }
       })
+    },
+    openMiniWindow () {
+      this.$electron.ipcRenderer.send('openMiniWindow')
     }
   },
   beforeRouteEnter: (to, from, next) => {
@@ -259,7 +263,7 @@ export default {
       position absolute
       top 2px
       right 4px
-      width 40px
+      width 60px
       z-index 10000
       -webkit-app-region no-drag
       i
@@ -271,6 +275,9 @@ export default {
       .el-icon-close
         &:hover
           color #F15140
+      .el-icon-circle-plus-outline
+        &:hover
+          color #69C282
   .side-bar-menu
     position fixed
     height calc(100vh - 22px)

src/renderer/components/SettingView/Gallery.vue

@@ -288,6 +288,7 @@ export default {
     position absolute
     top: 38px
     transition all .2s ease-in-out .1s
+    width 100%
     &.small
       height: 245px
       top: 152px