Fixed: linux mini-window tranparent bug

zmwxiaoming · Jul 11, 2018 · 353f553 · 353f553
1 parent f48021d
commit 353f553
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/src/main/index.js b/src/main/index.js
@@ -204,7 +204,7 @@ const createMiniWidow = () => {
   if (miniWindow) {
     return false
   }
-  miniWindow = new BrowserWindow({
+  let obj = {
     height: 64,
     width: 64,
     show: false,
@@ -216,7 +216,13 @@ const createMiniWidow = () => {
     webPreferences: {
       backgroundThrottling: false
     }
-  })
+  }
+
+  if (process.platform === 'linux') {
+    obj.transparent = false
+  }
+
+  miniWindow = new BrowserWindow(obj)
 
   miniWindow.loadURL(miniWinURL)
 

diff --git a/src/renderer/components/MiniPage.vue b/src/renderer/components/MiniPage.vue
@@ -1,11 +1,12 @@
 <template>
   <div id="mini-page"
-    :style="{ 'backgroundImage': 'url(' + logo + ')' }"
+    :style="{ backgroundImage: 'url(' + logo + ')' }"
+    :class="{ linux: os === 'linux' }"
   >
     <!-- <i class="el-icon-upload2"></i> -->
   <div
     id="upload-area"
-    :class="{ 'is-dragover': dragover, 'uploading': showProgress }" @drop.prevent="onDrop" @dragover.prevent="dragover = true" @dragleave.prevent="dragover = false"
+    :class="{ 'is-dragover': dragover, uploading: showProgress, linux: os === 'linux' }" @drop.prevent="onDrop" @dragover.prevent="dragover = true" @dragleave.prevent="dragover = false"
     :style="{ backgroundPosition: '0 ' + progress + '%'}"
   >
     <div id="upload-dragger" @dblclick="openUplodWindow">
@@ -32,9 +33,13 @@ export default {
       wY: '',
       screenX: '',
       screenY: '',
-      menu: null
+      menu: null,
+      os: ''
     }
   },
+  created () {
+    this.os = process.platform
+  },
   mounted () {
     this.$electron.ipcRenderer.on('uploadProgress', (event, progress) => {
       if (progress !== -1) {
@@ -189,11 +194,16 @@ export default {
     border 4px solid #fff
     box-sizing border-box
     cursor pointer
+    &.linux
+      border-radius 0
+      background-size 100vh 100vw
     #upload-area
       height 100%
       width 100%
       border-radius 50%
       transition all .2s ease-in-out
+      &.linux
+        border-radius 0
       &.uploading
         background: linear-gradient(to top, #409EFF 50%, #fff 51%)
         background-size 200%