From 41ff3c0d22f54618dc8cc0d571f5bb507423dfdb Mon Sep 17 00:00:00 2001 From: sairina Date: Mon, 30 Nov 2020 19:16:31 -0800 Subject: [PATCH 01/11] adds boolean prop openInNewTab --- lib/buttons-and-links/KExternalLink.vue | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue index 2ac368506..d3ec83208 100644 --- a/lib/buttons-and-links/KExternalLink.vue +++ b/lib/buttons-and-links/KExternalLink.vue @@ -5,6 +5,8 @@ :class="buttonClasses" :href="href" :download="download" + :openInNewTab="openInNewTab" + :target="openInNewTab ? '_blank' : false" dir="auto" @mouseenter="hovering = true" @mouseleave="hovering = false" @@ -70,6 +72,13 @@ type: String, required: false, }, + /** + * If provided, opens link in new tab + */ + openInNewTab: { + type: Boolean, + required: false, + }, }, data() { return { From 3e76a9a7520c67b17a32422fc6b3b4e20262d2d9 Mon Sep 17 00:00:00 2001 From: Sairina Date: Tue, 1 Dec 2020 09:49:17 -0800 Subject: [PATCH 02/11] Update lib/buttons-and-links/KExternalLink.vue Co-authored-by: Devon Rueckner --- lib/buttons-and-links/KExternalLink.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue index d3ec83208..b5e5d0cc1 100644 --- a/lib/buttons-and-links/KExternalLink.vue +++ b/lib/buttons-and-links/KExternalLink.vue @@ -77,7 +77,7 @@ */ openInNewTab: { type: Boolean, - required: false, + default: false, }, }, data() { From eaa61672d500bc387c8c4502cb106e792f275d3b Mon Sep 17 00:00:00 2001 From: sairina Date: Thu, 3 Dec 2020 21:13:25 -0800 Subject: [PATCH 03/11] Add noopener noreferrer attr --- lib/buttons-and-links/KExternalLink.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue index b5e5d0cc1..1edafaf0a 100644 --- a/lib/buttons-and-links/KExternalLink.vue +++ b/lib/buttons-and-links/KExternalLink.vue @@ -7,6 +7,7 @@ :download="download" :openInNewTab="openInNewTab" :target="openInNewTab ? '_blank' : false" + rel="noopener noreferrer" dir="auto" @mouseenter="hovering = true" @mouseleave="hovering = false" From dfa66a6fe8a71da34e451a60cf789d06042f6037 Mon Sep 17 00:00:00 2001 From: sairina Date: Wed, 23 Dec 2020 22:32:46 -0800 Subject: [PATCH 04/11] Add noopener noreferrer attr and icon --- lib/buttons-and-links/KExternalLink.vue | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue index 1edafaf0a..79e362b98 100644 --- a/lib/buttons-and-links/KExternalLink.vue +++ b/lib/buttons-and-links/KExternalLink.vue @@ -12,19 +12,11 @@ @mouseenter="hovering = true" @mouseleave="hovering = false" > - - - {{ text }} - + From eb6660a2955ee4f522605eadfc44b6313463d288 Mon Sep 17 00:00:00 2001 From: sairina Date: Wed, 23 Dec 2020 23:23:02 -0800 Subject: [PATCH 05/11] Fix linting error --- lib/buttons-and-links/KExternalLink.vue | 7 ------- 1 file changed, 7 deletions(-) diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue index 79e362b98..eaea85347 100644 --- a/lib/buttons-and-links/KExternalLink.vue +++ b/lib/buttons-and-links/KExternalLink.vue @@ -58,13 +58,6 @@ type: String, required: false, }, - /** - * If provided, shows a KIcon after the text - */ - iconAfter: { - type: String, - required: false, - }, /** * If provided, opens link in new tab */ From c062a77b2852ba79f492d69212885e6d506dfa66 Mon Sep 17 00:00:00 2001 From: Sairina Date: Thu, 24 Dec 2020 19:18:23 -0800 Subject: [PATCH 06/11] Update lib/buttons-and-links/KExternalLink.vue Fixes comment's icon description Co-authored-by: Devon Rueckner --- lib/buttons-and-links/KExternalLink.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue index eaea85347..458f5ba10 100644 --- a/lib/buttons-and-links/KExternalLink.vue +++ b/lib/buttons-and-links/KExternalLink.vue @@ -59,7 +59,7 @@ required: false, }, /** - * If provided, opens link in new tab + * If provided, opens link in new tab and displays a "pop out" icon */ openInNewTab: { type: Boolean, From cd3b1744ea3a7e06b5bd176e7844c130dc81c23d Mon Sep 17 00:00:00 2001 From: sairina Date: Thu, 24 Dec 2020 19:21:28 -0800 Subject: [PATCH 07/11] Add rtlFlip to make mirror-image of icon for rtl langs --- lib/KIcon/iconDefinitions.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/KIcon/iconDefinitions.js b/lib/KIcon/iconDefinitions.js index 045449950..7f6248262 100644 --- a/lib/KIcon/iconDefinitions.js +++ b/lib/KIcon/iconDefinitions.js @@ -262,7 +262,10 @@ const KolibriIcons = { icon: require('./precompiled-icons/material-icons/keyboard_arrow_right/baseline.vue').default, }, pdf: { icon: require('./precompiled-icons/material-icons/picture_as_pdf/baseline.vue').default }, - openNewTab: { icon: require('./precompiled-icons/material-icons/launch/baseline.vue').default }, + openNewTab: { + icon: require('./precompiled-icons/material-icons/launch/baseline.vue').default, + rtlFlip: true, + }, history: { icon: require('./precompiled-icons/material-icons/restore/baseline.vue').default }, myLocation: { icon: require('./precompiled-icons/material-icons/gps_fixed/baseline.vue').default, From 70a766af0c366b098037fc66c1d91b6f920930cf Mon Sep 17 00:00:00 2001 From: sairina Date: Thu, 24 Dec 2020 20:39:30 -0800 Subject: [PATCH 08/11] Remove icon prop and add space between icon and text --- lib/buttons-and-links/KExternalLink.vue | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue index 458f5ba10..3c6067e41 100644 --- a/lib/buttons-and-links/KExternalLink.vue +++ b/lib/buttons-and-links/KExternalLink.vue @@ -51,13 +51,6 @@ type: String, required: false, }, - /** - * If provided, shows a KIcon in front of the text - */ - icon: { - type: String, - required: false, - }, /** * If provided, opens link in new tab and displays a "pop out" icon */ @@ -73,18 +66,18 @@ }, computed: { /** - * If icon is provided, add 8px margin between the icon and the text + * If link opens in new tab, add 8px margin between the icon and the text */ spanStyle() { - if (this.icon) { - if (this.isRtl) { - return { marginRight: '8px' }; - } else { - return { marginLeft: '8px' }; - } + let styles = {}; + let leftLtr = this.isRtl ? 'marginRight' : 'marginLeft'; + let rightLtr = this.isRtl ? 'marginLeft' : 'marginRight'; + if (this.openInNewTab) { + styles[rightLtr] = '8px'; } else { - return {}; + styles[leftLtr] = '8px'; } + return { ...styles }; }, }, }; From 7bfa8338d3f674ce047e380765a5ae7e2b7534bc Mon Sep 17 00:00:00 2001 From: sairina Date: Mon, 4 Jan 2021 14:56:16 -0800 Subject: [PATCH 09/11] Add check for whether or not is true to fix margin when link does not open new tab --- lib/buttons-and-links/KExternalLink.vue | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue index 3c6067e41..8e4a56d31 100644 --- a/lib/buttons-and-links/KExternalLink.vue +++ b/lib/buttons-and-links/KExternalLink.vue @@ -72,11 +72,15 @@ let styles = {}; let leftLtr = this.isRtl ? 'marginRight' : 'marginLeft'; let rightLtr = this.isRtl ? 'marginLeft' : 'marginRight'; - if (this.openInNewTab) { - styles[rightLtr] = '8px'; - } else { - styles[leftLtr] = '8px'; - } + + if (this.openInNewTab) { + if(this.isRtl){ + styles[leftLtr] = '8px'; + } else { + styles[rightLtr] = '8px'; + } + } + return { ...styles }; }, }, From fb5c1b5223234a62ee25c8f1babe357500c651dc Mon Sep 17 00:00:00 2001 From: sairina Date: Mon, 4 Jan 2021 15:51:20 -0800 Subject: [PATCH 10/11] Fix linting --- lib/buttons-and-links/KExternalLink.vue | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue index 8e4a56d31..7f7dc4737 100644 --- a/lib/buttons-and-links/KExternalLink.vue +++ b/lib/buttons-and-links/KExternalLink.vue @@ -72,15 +72,13 @@ let styles = {}; let leftLtr = this.isRtl ? 'marginRight' : 'marginLeft'; let rightLtr = this.isRtl ? 'marginLeft' : 'marginRight'; - - if (this.openInNewTab) { - if(this.isRtl){ - styles[leftLtr] = '8px'; - } else { - styles[rightLtr] = '8px'; - } + if (this.openInNewTab) { + if (this.isRtl) { + styles[leftLtr] = '8px'; + } else { + styles[rightLtr] = '8px'; } - + } return { ...styles }; }, }, From 2d6a3dc181686776816b9a8555a7e6864d0a22cf Mon Sep 17 00:00:00 2001 From: sairina Date: Mon, 4 Jan 2021 22:42:10 -0800 Subject: [PATCH 11/11] Fix margins for RTL-lang external links --- lib/buttons-and-links/KExternalLink.vue | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue index 7f7dc4737..967c8687b 100644 --- a/lib/buttons-and-links/KExternalLink.vue +++ b/lib/buttons-and-links/KExternalLink.vue @@ -70,13 +70,16 @@ */ spanStyle() { let styles = {}; - let leftLtr = this.isRtl ? 'marginRight' : 'marginLeft'; - let rightLtr = this.isRtl ? 'marginLeft' : 'marginRight'; if (this.openInNewTab) { if (this.isRtl) { - styles[leftLtr] = '8px'; + // If RTL-language, but English link, displays correct margins + styles['marginRight'] = '8px'; + if (this.text !== this.href) { + styles['marginRight'] = '0px'; + styles['marginLeft'] = '8px'; + } } else { - styles[rightLtr] = '8px'; + styles['marginLeft'] = '8px'; } } return { ...styles };