From c80c4bdd4d0fc61d70ecaf8076607b5f13a3a1ac Mon Sep 17 00:00:00 2001 From: BetaHuhn Date: Tue, 12 Oct 2021 17:59:17 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Use=20middle=20click=20to=20open=20?= =?UTF-8?q?links=20and=20crates=20in=20new=20tab?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/components/Link/Item.vue | 6 ++++- client/components/Modal/Search.vue | 29 ++++++++++++++++------ client/components/SideBar/Menu.vue | 13 ++++++---- client/pages/link/_.vue | 2 +- client/plugins/helpers.js | 40 +++++++++++++++++++++++------- 5 files changed, 66 insertions(+), 24 deletions(-) diff --git a/client/components/Link/Item.vue b/client/components/Link/Item.vue index ef88ac9..ef33705 100644 --- a/client/components/Link/Item.vue +++ b/client/components/Link/Item.vue @@ -5,6 +5,7 @@ @[dragStartEvent].stop="startDrag($event)" @[dragStopEvent].stop="stopDrag($event)" @click.stop="openLinkDetails" + @click.middle="openLinkPage" >
@@ -92,12 +93,15 @@ export default { methods: { openLinkDetails() { if (window.innerWidth < 500) { - this.$switchToPageOrCrate(this.link.id, { fullPage: true, isPublic: !this.endpoint && !this.editable }) + this.openLinkPage() return } this.$modal.show('linkDetails', { link: this.link.id, editable: this.editable, endpoint: this.endpoint }) }, + openLinkPage() { + this.$switchToPageOrCrate(this.link.id, { fullPage: true, isPublic: !this.endpoint && !this.editable, newTab: true }) + }, startDrag(e) { this.drag = true e.dataTransfer.dropEffect = 'move' diff --git a/client/components/Modal/Search.vue b/client/components/Modal/Search.vue index e6ba847..6a8cee9 100644 --- a/client/components/Modal/Search.vue +++ b/client/components/Modal/Search.vue @@ -11,7 +11,14 @@

Crates

- +

Links

@@ -24,6 +31,7 @@ :icon="link.meta && link.meta.icon" :crate="link.crate && getCrate(link.crate)" @click.native.stop="openLink(link)" + @click.middle.native.stop="openLink(link, true)" />
@@ -64,6 +66,7 @@ :editable="crate.id && !crate.endpoint" :error="crate.deleted" @click.native="changeCrate(crate)" + @click.middle.native.stop="changeCrate(crate, true)" @shortkey.native="changeCrate(crate)" />
@@ -153,11 +156,11 @@ export default { } }, methods: { - changeCrate(crate) { - this.$switchToPageOrCrate(crate.id, { external: crate.endpoint !== undefined }) + changeCrate(crate, newTab = false) { + this.$switchToPageOrCrate(crate.id, { external: crate.endpoint !== undefined, newTab }) }, - changePage(page) { - this.$switchToPageOrCrate(page) + changePage(page, newTab = false) { + this.$switchToPageOrCrate(page, { newTab }) }, showModal(value) { this.$modal.show(value) diff --git a/client/pages/link/_.vue b/client/pages/link/_.vue index 6a9cdf4..6e7ab24 100644 --- a/client/pages/link/_.vue +++ b/client/pages/link/_.vue @@ -15,7 +15,7 @@ {{ crate.name }}

-
+
📭

diff --git a/client/plugins/helpers.js b/client/plugins/helpers.js index de3a0b5..192d411 100644 --- a/client/plugins/helpers.js +++ b/client/plugins/helpers.js @@ -61,21 +61,30 @@ export default ({ env, store, app }, inject) => { }) inject('switchToPageOrCrate', (pageOrCrate, opts = {}) => { - const { link, external, fullPage, crate, isPublic } = opts + const { link, external, fullPage, crate, isPublic, newTab } = opts let newPath + let newPage + let newCrate + + // Switch to home page if (pageOrCrate === undefined || pageOrCrate === 'home') { - store.commit('SET_CURRENT_PAGE', 'home') - store.commit('SET_CURRENT_CRATE', undefined) + newPage = 'home' + newCrate = undefined newPath = '/' + + // Switch to inbox page } else if (pageOrCrate === 'inbox' || pageOrCrate === 'null') { - store.commit('SET_CURRENT_PAGE', undefined) - store.commit('SET_CURRENT_CRATE', 'null') + newPage = undefined + newCrate = 'null' newPath = `/inbox` + + // Open the link page } else if (fullPage) { - store.commit('SET_CURRENT_PAGE', undefined) - store.commit('SET_CURRENT_CRATE', crate || undefined) + newPage = undefined + newCrate = crate || undefined + // Use different path depending on the type of link if (isPublic) { newPath = `/link/public/${ pageOrCrate }` } else if (external) { @@ -83,10 +92,13 @@ export default ({ env, store, app }, inject) => { } else { newPath = `/link/${ pageOrCrate }` } + + // Open a crate } else { - store.commit('SET_CURRENT_PAGE', undefined) - store.commit('SET_CURRENT_CRATE', pageOrCrate) + newPage = undefined + newCrate = pageOrCrate + // Use different path depending on the type of crate if (isPublic) { newPath = `/crate/public/${ pageOrCrate }` } else if (external) { @@ -96,10 +108,20 @@ export default ({ env, store, app }, inject) => { } } + // Open the link modal if (link !== undefined) { newPath += `/?link=${ link }` } + // Open in new tab + if (newTab) { + window.open(newPath, '_blank') + return + } + + store.commit('SET_CURRENT_PAGE', newPage) + store.commit('SET_CURRENT_CRATE', newCrate) + app.router.push(newPath) })