Update <KExternalLink> with icon and noopener noreferrer attr

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,

lib/buttons-and-links/KExternalLink.vue

@@ -5,23 +5,18 @@
     :class="buttonClasses"
     :href="href"
     :download="download"
+    :openInNewTab="openInNewTab"
+    :target="openInNewTab ? '_blank' : false"
+    rel="noopener noreferrer"
     dir="auto"
     @mouseenter="hovering = true"
     @mouseleave="hovering = false"
   >
-    <slot name="icon">
-      <KIcon
-        v-if="icon"
-        :icon="icon"
-        style="top: 4px;"
-        :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
-      />
-    </slot>
     <span class="link-text" :style="spanStyle">{{ text }}</span>
-    <slot name="iconAfter">
+    <slot name="openInNewTab">
       <KIcon
-        v-if="iconAfter"
-        :icon="iconAfter"
+        v-if="openInNewTab"
+        icon="openNewTab"
         style="top: 4px;"
         :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
       />
@@ -57,18 +52,11 @@
         required: false,
       },
       /**
-       * If provided, shows a KIcon in front of the text
-       */
-      icon: {
-        type: String,
-        required: false,
-      },
-      /**
-       * If provided, shows a KIcon after the text
+       * If provided, opens link in new tab and displays a "pop out" icon
        */
-      iconAfter: {
-        type: String,
-        required: false,
+      openInNewTab: {
+        type: Boolean,
+        default: false,
       },
     },
     data() {
@@ -78,18 +66,23 @@
     },
     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) {
+        let styles = {};
+        if (this.openInNewTab) {
           if (this.isRtl) {
-            return { marginRight: '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 {
-            return { marginLeft: '8px' };
+            styles['marginLeft'] = '8px';
           }
-        } else {
-          return {};
         }
+        return { ...styles };
       },
     },
   };