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

ISSUES CLOSED: #1050
This commit is contained in:
PiEgg
2022-12-31 11:29:36 +08:00
parent 95556498f7
commit f0787d3ec2
16 changed files with 76 additions and 44 deletions

View File

@@ -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",

View File

@@ -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>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -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({

View File

@@ -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()

View File

@@ -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!,
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()

View File

@@ -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()

View File

@@ -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])

View File

@@ -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

View File

@@ -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) {

View File

@@ -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,
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

View File

@@ -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>

View File

@@ -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: '',
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 = () => {

View File

@@ -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'

View File

@@ -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{

View File

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

View File

@@ -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"