✨ Feature: add file-name in gallery & add unknown-file-type placholder image

ISSUES CLOSED: #1050

package.json

@@ -78,6 +78,7 @@
     "@vue/cli-service": "^4.0.0",
     "@vue/eslint-config-standard": "^6.1.0",
     "@vue/eslint-config-typescript": "^7.0.0",
+    "@vue/runtime-dom": "^3.2.45",
     "conventional-changelog": "^3.1.18",
     "cz-customizable": "^6.2.0",
     "dotenv": "^16.0.1",

public/unknown-file-type.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1672454579182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2800" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M160 0h512l256 256v704c0 35.3472-28.6528 64-64 64H160c-35.3472 0-64-28.6528-64-64V64c0-35.3472 28.6528-64 64-64z" fill="#CCCCCC" p-id="2801"></path><path d="M672 0l256 256h-192c-35.3472 0-64-28.6528-64-64V0z" fill="#EAEAEA" p-id="2802"></path><path d="M384 499.2c0-25.6 5.12-46.08 10.24-58.88 5.12-12.8 15.36-25.6 28.16-35.84 12.8-12.8 25.6-20.48 43.52-25.6 15.36-5.12 30.72-7.68 48.64-7.68 35.84 0 64 10.24 89.6 30.72C627.2 422.4 640 448 640 481.28c0 15.36-5.12 28.16-10.24 40.96s-17.92 28.16-38.4 46.08-28.16 30.72-35.84 38.4c-7.68 7.68-10.24 17.92-15.36 28.16-5.12 10.24-2.56 17.92-2.56 43.52h-51.2c0-25.6 2.56-38.4 5.12-51.2s7.68-23.04 15.36-33.28 15.36-23.04 33.28-40.96c17.92-17.92 30.72-30.72 35.84-38.4 5.12-7.68 10.24-20.48 10.24-38.4s-7.68-30.72-20.48-43.52-30.72-20.48-53.76-20.48c-51.2 0-76.8 35.84-76.8 87.04h-51.2z m153.6 281.6h-51.2v-51.2h51.2v51.2z" fill="#FFFFFF" p-id="2803"></path></svg>

src/main.ts

@@ -36,7 +36,9 @@ Vue.prototype.$T = T
 Vue.prototype.$i18n = i18nManager
 
 Vue.use(ElementUI)
-Vue.use(VueLazyLoad)
+Vue.use(VueLazyLoad, {
+  error: `file://${__static.replace(/\\/g, '/')}/unknown-file-type.svg`
+})
 Vue.mixin(mainMixin)
 
 new Vue({

src/main/apis/app/system/index.ts

@@ -247,8 +247,8 @@ export function createTray () {
           pasteText.push(pasteTemplate(pasteStyle, imgs[i], db.get('settings.customLink')))
           const notification = new Notification({
             title: T('UPLOAD_SUCCEED'),
-            body: imgs[i].imgUrl!,
+            body: imgs[i].imgUrl!
-            icon: files[i]
+            // icon: files[i]
           })
           setTimeout(() => {
             notification.show()

src/main/apis/app/uploader/apis.ts

@@ -30,8 +30,8 @@ export const uploadClipboardFiles = async (): Promise<string> => {
       handleCopyUrl(pasteTemplate(pasteStyle, img[0], db.get('settings.customLink')))
       const notification = new Notification({
         title: T('UPLOAD_SUCCEED'),
-        body: img[0].imgUrl!,
+        body: img[0].imgUrl!
-        icon: img[0].imgUrl
+        // icon: img[0].imgUrl
       })
       setTimeout(() => {
         notification.show()
@@ -68,8 +68,8 @@ export const uploadChoosedFiles = async (webContents: WebContents, files: IFileW
       pasteText.push(pasteTemplate(pasteStyle, imgs[i], db.get('settings.customLink')))
       const notification = new Notification({
         title: T('UPLOAD_SUCCEED'),
-        body: imgs[i].imgUrl!,
+        body: imgs[i].imgUrl!
-        icon: files[i].path
+        // icon: files[i].path
       })
       setTimeout(() => {
         notification.show()

src/main/apis/gui/index.ts

@@ -83,8 +83,8 @@ class GuiApi implements IGuiApi {
         pasteText.push(pasteTemplate(pasteStyle, imgs[i], db.get('settings.customLink')))
         const notification = new Notification({
           title: T('UPLOAD_SUCCEED'),
-          body: imgs[i].imgUrl as string,
+          body: imgs[i].imgUrl as string
-          icon: imgs[i].imgUrl
+          // icon: imgs[i].imgUrl
         })
         setTimeout(() => {
           notification.show()

src/main/events/ipcList.ts

@@ -55,9 +55,9 @@ export default {
         handleCopyUrl(pasteTemplate(pasteStyle, img[0], db.get('settings.customLink')))
         const notification = new Notification({
           title: T('UPLOAD_SUCCEED'),
-          body: img[0].imgUrl!,
+          body: img[0].imgUrl!
           // icon: file[0]
-          icon: img[0].imgUrl
+          // icon: img[0].imgUrl
         })
         notification.show()
         await GalleryDB.getInstance().insert(img[0])

src/main/events/picgoCoreIPC.ts

@@ -27,7 +27,6 @@ import {
   PICGO_OPEN_FILE,
   PASTE_TEXT,
   OPEN_WINDOW,
-  DEFAULT_LOGO,
   GET_LANGUAGE_LIST,
   SET_CURRENT_LANGUAGE,
   GET_CURRENT_LANGUAGE
@@ -370,12 +369,6 @@ const handleOpenWindow = () => {
   })
 }
 
-const handleDefaultLogo = () => {
-  ipcMain.on(DEFAULT_LOGO, (event: IpcMainEvent) => {
-    event.sender.send(DEFAULT_LOGO, path.join(__static, 'roundLogo.png'))
-  })
-}
-
 const handleI18n = () => {
   ipcMain.on(GET_LANGUAGE_LIST, (event: IpcMainEvent) => {
     event.sender.send(GET_LANGUAGE_LIST, i18nManager.languageList)
@@ -415,7 +408,6 @@ export default {
     handleImportLocalPlugin()
     handleOpenFile()
     handleOpenWindow()
-    handleDefaultLogo()
     handleI18n()
   },
   // TODO: separate to single file

src/main/utils/common.ts

@@ -21,8 +21,8 @@ export const showNotification = (options: IPrivateShowNotificationOption = {
 }) => {
   const notification = new Notification({
     title: options.title,
-    body: options.body,
+    body: options.body
-    icon: options.icon || undefined
+    // icon: options.icon || undefined
   })
   const handleClick = () => {
     if (options.clickToCopy) {

src/renderer/pages/Gallery.vue

@@ -83,6 +83,9 @@
             >
               <img v-lazy="item.imgUrl" class="gallery-list__item-img">
             </div>
+            <div class="gallery-list__file-name" :title="item.fileName">
+              {{ item.fileName }}
+            </div>
             <div class="gallery-list__tool-panel">
               <i class="el-icon-document" @click="copy(item)"></i>
               <i class="el-icon-edit-outline" @click="openDialog(item)"></i>
@@ -285,8 +288,9 @@ export default class extends Vue {
     const copyLink = await ipcRenderer.invoke(PASTE_TEXT, item)
     const obj = {
       title: this.$T('COPY_LINK_SUCCEED'),
-      body: copyLink,
+      body: copyLink
-      icon: item.url || item.imgUrl
+      // sometimes will cause lagging
+      // icon: item.url || item.imgUrl
     }
     const myNotification = new Notification(obj.title, obj)
     myNotification.onclick = () => {
@@ -332,8 +336,8 @@ export default class extends Vue {
     })
     const obj = {
       title: this.$T('CHANGE_IMAGE_URL_SUCCEED'),
-      body: this.imgInfo.imgUrl,
+      body: this.imgInfo.imgUrl
-      icon: this.imgInfo.imgUrl
+      // icon: this.imgInfo.imgUrl
     }
     const myNotification = new Notification(obj.title, obj)
     myNotification.onclick = () => {
@@ -527,7 +531,7 @@ export default class extends Vue {
       height 120px
       transition all .2s ease-in-out
       cursor pointer
-      margin-bottom 8px
+      margin-bottom 4px
       overflow hidden
       display flex
       &-fake
@@ -544,6 +548,7 @@ export default class extends Vue {
         object-fit fill
     &__tool-panel
       color #ddd
+      margin-bottom 4px
       i
         cursor pointer
         transition all .2s ease-in-out
@@ -556,6 +561,13 @@ export default class extends Vue {
         &.el-icon-delete
           &:hover
             color #F15140
+    &__file-name
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
+      color #ddd
+      font-size 14px
+      margin-bottom 4px
   .handle-bar
     color #ddd
     margin-bottom 10px

src/renderer/pages/Plugin.vue

@@ -121,7 +121,6 @@ import {
   PICGO_HANDLE_PLUGIN_ING,
   PICGO_TOGGLE_PLUGIN,
   SHOW_PLUGIN_PAGE_MENU,
-  DEFAULT_LOGO,
   GET_PICBEDS
 } from '#/events/constants'
 
@@ -146,7 +145,7 @@ export default class extends Vue {
   importLocalPluginToolTip = this.$T('PLUGIN_IMPORT_LOCAL')
   id = ''
   os = ''
-  defaultLogo: string = ''
+  defaultLogo: string = `this.src="file://${__static.replace(/\\/g, '/')}/roundLogo.png"`
   get npmSearchText () {
     return this.searchText.match('picgo-plugin-')
       ? this.searchText
@@ -249,19 +248,11 @@ export default class extends Vue {
         this.needReload = true
       }
     })
-    ipcRenderer.on(DEFAULT_LOGO, (evt: IpcRendererEvent, logoPath) => {
-      this.defaultLogo = `this.src="file://${logoPath.replace(/\\/g, '/')}"`
-    })
     this.getPluginList()
     this.getSearchResult = debounce(this.getSearchResult, 50)
-    this.getDefaultLogo()
     this.needReload = await this.getConfig<boolean>('needReload') || false
   }
 
-  getDefaultLogo () {
-    ipcRenderer.send(DEFAULT_LOGO)
-  }
-
   async buildContextMenu (plugin: IPicGoPlugin) {
     ipcRenderer.send(SHOW_PLUGIN_PAGE_MENU, plugin)
   }
@@ -449,7 +440,6 @@ export default class extends Vue {
     ipcRenderer.removeAllListeners('uninstallSuccess')
     ipcRenderer.removeAllListeners('updateSuccess')
     ipcRenderer.removeAllListeners('hideLoading')
-    ipcRenderer.removeAllListeners(DEFAULT_LOGO)
   }
 }
 </script>

src/renderer/pages/TrayPage.vue

@@ -17,7 +17,7 @@
         <div class="list-title">{{ $T('ALREADY_UPLOAD') }}</div>
         <div v-for="item in files" :key="item.imgUrl" class="img-list">
           <div class="upload-img__container" @click="copyTheLink(item)">
-            <img :src="item.imgUrl" class="upload-img">
+            <img v-lazy="item.imgUrl" class="upload-img">
           </div>
         </div>
       </div>
@@ -41,8 +41,7 @@ export default class extends Vue {
   files: IResult<ImgInfo>[] = []
   notification = {
     title: this.$T('COPY_LINK_SUCCEED'),
-    body: '',
+    body: ''
-    icon: ''
   }
 
   clipboardFiles: ImgInfo[] = []
@@ -61,7 +60,6 @@ export default class extends Vue {
 
   async copyTheLink (item: ImgInfo) {
     this.notification.body = item.imgUrl!
-    this.notification.icon = item.imgUrl!
     const myNotification = new Notification(this.notification.title, this.notification)
     ipcRenderer.invoke(PASTE_TEXT, item)
     myNotification.onclick = () => {

src/universal/events/constants.ts

@@ -33,7 +33,6 @@ 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 OPEN_WINDOW = 'OPEN_WINDOW'
-export const DEFAULT_LOGO = 'DEFAULT_LOGO'
 export const GET_PICBEDS = 'GET_PICBEDS'
 // i18n
 export const GET_CURRENT_LANGUAGE = 'GET_CURRENT_LANGUAGE'

src/universal/types/types.d.ts

@@ -211,7 +211,7 @@ type IUploadOption = string[]
 interface IShowNotificationOption {
   title: string
   body: string
-  icon?: string | import('electron').NativeImage
+  // icon?: string | import('electron').NativeImage
 }
 
 interface IPrivateShowNotificationOption extends IShowNotificationOption{

tsconfig.json

@@ -54,5 +54,8 @@
   ],
   "exclude": [
     "node_modules"
-  ]
+  ],
+  "vueCompilerOptions": {
+    "target": 2,
+  }
 }

yarn.lock

@@ -2123,6 +2123,35 @@
   resolved "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz#ceb924b4ecb3b9c43871c7a429a02f8423e621ab"
   integrity sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==
 
+"@vue/reactivity@3.2.45":
+  version "3.2.45"
+  resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.45.tgz#412a45b574de601be5a4a5d9a8cbd4dee4662ff0"
+  integrity sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==
+  dependencies:
+    "@vue/shared" "3.2.45"
+
+"@vue/runtime-core@3.2.45":
+  version "3.2.45"
+  resolved "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.2.45.tgz#7ad7ef9b2519d41062a30c6fa001ec43ac549c7f"
+  integrity sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==
+  dependencies:
+    "@vue/reactivity" "3.2.45"
+    "@vue/shared" "3.2.45"
+
+"@vue/runtime-dom@^3.2.45":
+  version "3.2.45"
+  resolved "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz#1a2ef6ee2ad876206fbbe2a884554bba2d0faf59"
+  integrity sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==
+  dependencies:
+    "@vue/runtime-core" "3.2.45"
+    "@vue/shared" "3.2.45"
+    csstype "^2.6.8"
+
+"@vue/shared@3.2.45":
+  version "3.2.45"
+  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2"
+  integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==
+
 "@vue/web-component-wrapper@^1.2.0":
   version "1.3.0"
   resolved "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
@@ -4618,6 +4647,11 @@ csso@^4.0.2:
   dependencies:
     css-tree "^1.1.2"
 
+csstype@^2.6.8:
+  version "2.6.21"
+  resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
+  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"