From f0787d3ec25899e36f61cd5c766056f3da319446 Mon Sep 17 00:00:00 2001 From: PiEgg Date: Sat, 31 Dec 2022 11:29:36 +0800 Subject: [PATCH] :sparkles: Feature: add file-name in gallery & add unknown-file-type placholder image ISSUES CLOSED: #1050 --- package.json | 1 + public/unknown-file-type.svg | 1 + src/main.ts | 4 +++- src/main/apis/app/system/index.ts | 4 ++-- src/main/apis/app/uploader/apis.ts | 8 +++---- src/main/apis/gui/index.ts | 4 ++-- src/main/events/ipcList.ts | 4 ++-- src/main/events/picgoCoreIPC.ts | 8 ------- src/main/utils/common.ts | 4 ++-- src/renderer/pages/Gallery.vue | 22 ++++++++++++++----- src/renderer/pages/Plugin.vue | 12 +---------- src/renderer/pages/TrayPage.vue | 6 ++---- src/universal/events/constants.ts | 1 - src/universal/types/types.d.ts | 2 +- tsconfig.json | 5 ++++- yarn.lock | 34 ++++++++++++++++++++++++++++++ 16 files changed, 76 insertions(+), 44 deletions(-) create mode 100644 public/unknown-file-type.svg diff --git a/package.json b/package.json index 71d5ed66..c8df278b 100644 --- a/package.json +++ b/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", diff --git a/public/unknown-file-type.svg b/public/unknown-file-type.svg new file mode 100644 index 00000000..a90c6793 --- /dev/null +++ b/public/unknown-file-type.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index b5bf972e..a2faf04b 100644 --- a/src/main.ts +++ b/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({ diff --git a/src/main/apis/app/system/index.ts b/src/main/apis/app/system/index.ts index d38748f2..79486d79 100644 --- a/src/main/apis/app/system/index.ts +++ b/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!, - icon: files[i] + body: imgs[i].imgUrl! + // icon: files[i] }) setTimeout(() => { notification.show() diff --git a/src/main/apis/app/uploader/apis.ts b/src/main/apis/app/uploader/apis.ts index 1fd0927a..f2ea4f20 100644 --- a/src/main/apis/app/uploader/apis.ts +++ b/src/main/apis/app/uploader/apis.ts @@ -30,8 +30,8 @@ export const uploadClipboardFiles = async (): Promise => { handleCopyUrl(pasteTemplate(pasteStyle, img[0], db.get('settings.customLink'))) const notification = new Notification({ title: T('UPLOAD_SUCCEED'), - body: img[0].imgUrl!, - icon: img[0].imgUrl + body: 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!, - icon: files[i].path + body: imgs[i].imgUrl! + // icon: files[i].path }) setTimeout(() => { notification.show() diff --git a/src/main/apis/gui/index.ts b/src/main/apis/gui/index.ts index 341c488f..18a6d4d4 100644 --- a/src/main/apis/gui/index.ts +++ b/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, - icon: imgs[i].imgUrl + body: imgs[i].imgUrl as string + // icon: imgs[i].imgUrl }) setTimeout(() => { notification.show() diff --git a/src/main/events/ipcList.ts b/src/main/events/ipcList.ts index 8a69261d..abf11c2f 100644 --- a/src/main/events/ipcList.ts +++ b/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]) diff --git a/src/main/events/picgoCoreIPC.ts b/src/main/events/picgoCoreIPC.ts index 20036a84..e5518c6c 100644 --- a/src/main/events/picgoCoreIPC.ts +++ b/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 diff --git a/src/main/utils/common.ts b/src/main/utils/common.ts index 1ab07192..3ecc9fd5 100644 --- a/src/main/utils/common.ts +++ b/src/main/utils/common.ts @@ -21,8 +21,8 @@ export const showNotification = (options: IPrivateShowNotificationOption = { }) => { const notification = new Notification({ title: options.title, - body: options.body, - icon: options.icon || undefined + body: options.body + // icon: options.icon || undefined }) const handleClick = () => { if (options.clickToCopy) { diff --git a/src/renderer/pages/Gallery.vue b/src/renderer/pages/Gallery.vue index 0671929e..fba5d226 100644 --- a/src/renderer/pages/Gallery.vue +++ b/src/renderer/pages/Gallery.vue @@ -83,6 +83,9 @@ > +
+ {{ item.fileName }} +
@@ -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, - icon: item.url || item.imgUrl + body: copyLink + // 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, - icon: this.imgInfo.imgUrl + body: 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 diff --git a/src/renderer/pages/Plugin.vue b/src/renderer/pages/Plugin.vue index 4ba31f74..346741f1 100644 --- a/src/renderer/pages/Plugin.vue +++ b/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('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) } } diff --git a/src/renderer/pages/TrayPage.vue b/src/renderer/pages/TrayPage.vue index 493379d6..a0383ed7 100644 --- a/src/renderer/pages/TrayPage.vue +++ b/src/renderer/pages/TrayPage.vue @@ -17,7 +17,7 @@
{{ $T('ALREADY_UPLOAD') }}
- +
@@ -41,8 +41,7 @@ export default class extends Vue { files: IResult[] = [] notification = { title: this.$T('COPY_LINK_SUCCEED'), - body: '', - icon: '' + body: '' } 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 = () => { diff --git a/src/universal/events/constants.ts b/src/universal/events/constants.ts index 7cb4a2b3..7a8d5758 100644 --- a/src/universal/events/constants.ts +++ b/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' diff --git a/src/universal/types/types.d.ts b/src/universal/types/types.d.ts index 7cb12b0b..5858f453 100644 --- a/src/universal/types/types.d.ts +++ b/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{ diff --git a/tsconfig.json b/tsconfig.json index 11a99023..ba329bfd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -54,5 +54,8 @@ ], "exclude": [ "node_modules" - ] + ], + "vueCompilerOptions": { + "target": 2, + } } diff --git a/yarn.lock b/yarn.lock index 75b9c35c..476273ba 100644 --- a/yarn.lock +++ b/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"