✨ Feature: tray-window add open-setting-window button

src/main/events/picgoCoreIPC.ts

@@ -25,7 +25,8 @@ import {
   PICGO_GET_BY_ID_DB,
   PICGO_REMOVE_BY_ID_DB,
   PICGO_OPEN_FILE,
-  PASTE_TEXT
+  PASTE_TEXT,
+  OPEN_WINDOW
 } from '#/events/constants'
 
 import { GalleryDB } from 'apis/core/datastore'
@@ -356,6 +357,15 @@ const handleOpenFile = () => {
   })
 }
 
+const handleOpenWindow = () => {
+  ipcMain.on(OPEN_WINDOW, (event: IpcMainEvent, windowName: IWindowList) => {
+    const window = windowManager.get(windowName)
+    if (window) {
+      window.show()
+    }
+  })
+}
+
 export default {
   listen () {
     handleGetPluginList()
@@ -368,6 +378,7 @@ export default {
     handlePicGoGalleryDB()
     handleImportLocalPlugin()
     handleOpenFile()
+    handleOpenWindow()
   },
   // TODO: separate to single file
   handlePluginUninstall,

src/renderer/pages/TrayPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="tray-page">
-    <!-- <div class="header-arrow"></div> -->
+    <div class="open-main-window" @click="openSettingWindow">{{ $T('OPEN_MAIN_WINDOW') }}</div>
     <div class="content">
       <div class="wait-upload-img" v-if="clipboardFiles.length > 0">
         <div class="list-title">{{ $T('WAIT_TO_UPLOAD') }}</div>
@@ -30,7 +30,8 @@ import { Component, Vue } from 'vue-property-decorator'
 import mixin from '@/utils/mixin'
 import { ipcRenderer } from 'electron'
 import { IResult } from '@picgo/store/dist/types'
-import { PASTE_TEXT } from '#/events/constants'
+import { PASTE_TEXT, OPEN_WINDOW } from '#/events/constants'
+import { IWindowList } from '#/types/enum'
 
 @Component({
   name: 'tray-page',
@@ -50,6 +51,10 @@ export default class extends Vue {
     return this.files.slice().reverse()
   }
 
+  openSettingWindow () {
+    this.sendToMain(OPEN_WINDOW, IWindowList.SETTING_WINDOW)
+  }
+
   async getData () {
     this.files = (await this.$$db.get<ImgInfo>({ orderBy: 'desc', limit: 5 })).data
   }
@@ -124,6 +129,18 @@ body::-webkit-scrollbar
   width 0px
 #tray-page
   background-color transparent
+  .open-main-window
+    background #000
+    height 20px
+    line-height 20px
+    text-align center
+    color #858585
+    font-size 12px
+    cursor pointer
+    transition all .2s ease-in-out
+    &:hover
+      color: #fff;
+      background #49B1F5
   .list-title
     text-align center
     color #858585
@@ -138,19 +155,19 @@ body::-webkit-scrollbar
       bottom 0
       left 18px
       background #858585
-  .header-arrow
-    position absolute
-    top 12px
-    left 50%
-    margin-left -10px
-    width: 0;
-    height: 0;
-    border-left: 10px solid transparent
-    border-right: 10px solid transparent
-    border-bottom: 10px solid rgba(255,255,255, 1)
+  // .header-arrow
+  //   position absolute
+  //   top 12px
+  //   left 50%
+  //   margin-left -10px
+  //   width: 0;
+  //   height: 0;
+  //   border-left: 10px solid transparent
+  //   border-right: 10px solid transparent
+  //   border-bottom: 10px solid rgba(255,255,255, 1)
   .content
     position absolute
-    top 0px
+    top 20px
     width 100%
   .img-list
     padding 8px 8px

src/renderer/utils/mainMixin.ts

@@ -37,4 +37,8 @@ export default class extends Vue {
   forceUpdate () {
     this.$bus.$emit(FORCE_UPDATE)
   }
+
+  sendToMain (channel: string, ...args: any[]) {
+    ipcRenderer.send(channel, ...args)
+  }
 }

src/universal/events/constants.ts

@@ -33,3 +33,4 @@ export const SHOW_MAIN_PAGE_QRCODE = 'SHOW_MAIN_PAGE_QRCODE'
 export const SHOW_MAIN_PAGE_DONATION = 'SHOW_MAIN_PAGE_DONATION'
 export const FORCE_UPDATE = 'FORCE_UPDATE'
 export const CHANGE_LANGUAGE = 'CHANGE_LANGUAGE'
+export const OPEN_WINDOW = 'OPEN_WINDOW'

src/universal/types/extra-vue.d.ts

@@ -26,5 +26,6 @@ declare module 'vue/types/vue' {
     setDefaultPicBed(picBed: string): void
     defaultPicBed: string
     forceUpdate(): void
+    sendToMain(channel: string, ...args: any[]): void
   }
 }