From 0761e4d5a43b130250cf0769d1a887d38e8b690f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 12 Apr 2021 19:39:59 +0100
Subject: [PATCH] Refactors OpeningMethod icons into their own component

---
 src/components/Item.vue               | 41 ++++++------------------
 src/components/ItemOpenMethodIcon.vue | 46 +++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 32 deletions(-)
 create mode 100644 src/components/ItemOpenMethodIcon.vue

diff --git a/src/components/Item.vue b/src/components/Item.vue
index 3c9970b1..02056cac 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -15,20 +15,14 @@
       </div>
       <!-- Item Icon -->
       <Icon :icon="icon" :url="url" />
-      <div :class="`opening-method-icon  ${!icon? 'short': ''}`">
-        <NewTabOpenIcon v-if="target === 'newtab'" />
-        <SameTabOpenIcon v-else-if="target === 'sametab'" />
-        <IframeOpenIcon v-else-if="target === 'iframe'" />
-      </div>
+      <!-- Small icon, showing opening method on hover -->
+      <ItemOpenMethodIcon class="opening-method-icon" :openingMethod="target" :isSmall="!icon" />
     </a>
 </template>
 
 <script>
 import Icon from '@/components/ItemIcon.vue';
-
-import NewTabOpenIcon from '@/assets/icons/open-new-tab.svg';
-import SameTabOpenIcon from '@/assets/icons/open-current-tab.svg';
-import IframeOpenIcon from '@/assets/icons/open-iframe.svg';
+import ItemOpenMethodIcon from '@/components/ItemOpenMethodIcon';
 
 export default {
   name: 'Item',
@@ -54,9 +48,7 @@ export default {
   },
   components: {
     Icon,
-    NewTabOpenIcon,
-    SameTabOpenIcon,
-    IframeOpenIcon,
+    ItemOpenMethodIcon,
   },
   methods: {
     /* Called when an item is clicked, manages the opening of iframe & resets the search field */
@@ -176,10 +168,14 @@ export default {
   }
 }
 
+.opening-method-icon {
+  display: none; // Hidden by default, visible on hover
+}
+
 /* Manage hover and focus actions */
 .item:hover, .item:focus {
   /* Show opening-method icon */
-  .opening-method-icon svg {
+  .opening-method-icon {
     display: block;
   }
 
@@ -213,25 +209,6 @@ export default {
   width: 56px;
 }
 
-/* Opening-method icon */
-.opening-method-icon {
-  svg {
-    position: absolute;
-    display: none;
-    width: 1rem;
-    margin: 2px;
-    right: 0;
-    top: 0;
-    path {
-      fill: var(--primary-transparent);
-    }
-  }
-  &.short svg {
-    width: 0.5rem;
-    margin: 0;
-  }
-}
-
 </style>
 
 <!-- An un-scoped style tag, since tooltip is outside this DOM tree -->
diff --git a/src/components/ItemOpenMethodIcon.vue b/src/components/ItemOpenMethodIcon.vue
new file mode 100644
index 00000000..f92fdd1b
--- /dev/null
+++ b/src/components/ItemOpenMethodIcon.vue
@@ -0,0 +1,46 @@
+<template>
+  <div :class="`opening-method-icon  ${isSmall? 'short': ''}`">
+    <NewTabOpenIcon v-if="openingMethod === 'newtab'" />
+    <SameTabOpenIcon v-else-if="openingMethod === 'sametab'" />
+    <IframeOpenIcon v-else-if="openingMethod === 'iframe'" />
+  </div>
+</template>
+
+<script>
+import NewTabOpenIcon from '@/assets/icons/open-new-tab.svg';
+import SameTabOpenIcon from '@/assets/icons/open-current-tab.svg';
+import IframeOpenIcon from '@/assets/icons/open-iframe.svg';
+
+export default {
+  name: 'ItemOpenMethodIcon',
+  props: {
+    openingMethod: String,
+    isSmall: Boolean,
+  },
+  components: {
+    NewTabOpenIcon,
+    SameTabOpenIcon,
+    IframeOpenIcon,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.opening-method-icon {
+  svg {
+    position: absolute;
+    width: 1rem;
+    margin: 2px;
+    right: 0;
+    top: 0;
+    path {
+      fill: var(--primary-transparent);
+    }
+  }
+  &.short svg {
+    width: 0.5rem;
+    margin: 0;
+  }
+}
+
+</style>