Renamed movie/sidebarAction.vue to ui/sidebarListElem.vue. Completly rewrote the component. Uses slots for text, way better semantic html elements used and logic is moved from the dom to computed functions.

src/components/Movie.vue

@@ -32,22 +32,25 @@
         <!-- SIDEBAR ACTIONS -->
         <div class="movie__actions" v-if="movie">
 
-          <sidebar-action
+          <sidebar-list-element :iconRef="'#iconNot_exsits'" :active="matched"
-            :text="'Not yet in plex'" :iconRef="'#iconNot_exsits'"
+            :iconRefActive="'#iconExists'" :textActive="'Already in plex 🎉'">
-            :textActive="'Already in plex 🎉'" :iconRefActive="'#iconExists'"
+
-            :active="matched"></sidebar-action>
+            Not yet in plex
-          <sidebar-action
+          </sidebar-list-element>
-            @click="sendRequest"
+          <sidebar-list-element @click="sendRequest" :iconRef="'#iconSent'"
-            :text="'Request to be downloaded?'" :iconRef="'#iconSent'"
+            :active="requested" :textActive="'Requested to be downloaded'">
-            :textActive="'Requested to be downloaded'"
+
-            :active="requested"></sidebar-action>
+            Request to be downloaded?
-          <sidebar-action
+          </sidebar-list-element>
-            v-if="admin" @click="showTorrents=!showTorrents"
+          <sidebar-list-element v-if="admin" @click="showTorrents=!showTorrents"
-            :text="'Search for torrents'" :iconRef="'#icon_torrents'"
+            :iconRef="'#icon_torrents'" :active="showTorrents"
-            :active="showTorrents"></sidebar-action>
+            :supplementaryText="'23 results'">
-          <sidebar-action
+
-            @click="openTmdb()"
+            Search for torrents
-            :iconRef="'#icon_info'" :text="'See more info'"></sidebar-action>
+          </sidebar-list-element>
+          <sidebar-list-element @click="openTmdb" :iconRef="'#icon_info'">
+            See more info
+          </sidebar-list-element>
         </div>
 
         <!-- Loading placeholder -->
@@ -115,7 +118,7 @@ import storage from '@/storage.js'
 import img from '@/directives/v-image.js'
 import TorrentList from './TorrentList.vue'
 import Person from './Person.vue'
-import SidebarAction from './movie/SidebarAction.vue'
+import SidebarListElement from './ui/sidebarListElem.vue'
 
 import LoadingPlaceholder from './ui/LoadingPlaceholder.vue'
 
@@ -123,7 +126,7 @@ import { getMovie, getShow, request, getRequestStatus } from '@/api.js'
 
 export default {
   props: ['id', 'type'],
-  components: { TorrentList, Person, LoadingPlaceholder, SidebarAction },
+  components: { TorrentList, Person, LoadingPlaceholder, SidebarListElement },
   directives: { img: img }, // TODO decide to remove or use
   data(){
     return{

src/components/movie/SidebarAction.vue

@@ -1,111 +0,0 @@
-<template>
-  <div class="action">
-    <a class="action-link" :class="{'active': active}" @click="$emit('click')">
-      <svg class="action-icon">
-        <use v-if="active && iconRefActive" :xlink:href="iconRefActive"></use>
-        <use v-else :xlink:href="iconRef"></use>
-      </svg>
-      <span class="action-text">{{ active && textActive ? textActive : text }}</span> 
-      <div v-if="torrentResults"
-            style="display: flex;
-                   flex-grow: 2;
-                   width: 2rem;
-                   ">
-        <span style="width: 100%; text-align: right;" v-if="getTorrentResultCount !== null">{{ getTorrentResultCount }} results</span></div>
-    </a>
-  </div>
-</template>
-
-<script>
-import store from '@/store'
-
-export default {
-  props: {
-    iconRef: {
-      type: String,
-      required: true
-    },
-    iconRefActive: {
-      type: String,
-      required: false
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    text: {
-      type: String,
-      required: true
-    },
-    textActive: {
-      type: String,
-      required: false
-    }
-  },
-  computed: {
-    torrentResults() {
-      return this.text.toLowerCase().includes('torrents')
-    },
-    getTorrentResultCount() {
-      return store.getters['torrentModule/resultCount']
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./src/scss/loading-placeholder";
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-
-.action {
-  &-link {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    text-transform: uppercase;
-    color: rgba($c-dark, 0.5);
-    transition: color 0.5s ease;
-    font-size: 11px;
-    padding: 5px 0;
-    border-bottom: 1px solid rgba($c-dark, 0.05);
-    &:hover {
-      color: rgba($c-dark, 0.75);
-    }
-    &.active {
-      color: $c-dark;
-    }
-    &.pending {
-      color: #f8bd2d;
-    }
-  }
-  &-icon {
-    width: 18px;
-    height: 18px;
-    margin: 0 10px 0 0;
-    fill: rgba($c-dark, 0.5);
-    transition: fill 0.5s ease, transform 0.5s ease;
-    &.waiting {
-      transform: scale(0.8, 0.8);
-    }
-    &.pending {
-      fill: #f8bd2d;
-    }
-  }
-  &-link:hover &-icon {
-    fill: rgba($c-dark, 0.75);
-    cursor: pointer;
-  }
-  &-link.active &-icon {
-    fill: $c-green;
-  }
-  &-text {
-    display: block;
-    padding-top: 2px;
-    cursor: pointer;
-    margin:4.4px;
-    margin-left: -3px;
-  }
-}
-
-</style>

src/components/ui/sidebarListElem.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <a @click="$emit('click')"><li>
+      <figure :class="activeClassIfActive">
+        <svg><use :xlink:href="iconRefNameIfActive"/></svg>
+      </figure>
+
+      <span :class="activeClassIfActive">{{ contentTextToDisplay }}</span>
+
+      <span v-if="supplementaryText" class="supplementary-text">
+        {{ supplementaryText }}
+      </span>
+    </li></a>
+  </div>
+</template>
+
+<script>
+  // TODO if a image is hovered and we can't set the hover color we want to
+  // go into it and change the fill
+export default {
+  props: {
+    iconRef: {
+      type: String,
+      required: true
+    },
+    iconRefActive: {
+      type: String,
+      required: false
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    textActive: {
+      type: String,
+      required: false
+    },
+    supplementaryText: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    iconRefNameIfActive() {
+      const { iconRefActive, iconRef, active } = this
+
+      if ((iconRefActive && iconRef) & active) {
+        return iconRefActive
+      }
+      return iconRef
+    },
+    contentTextToDisplay() {
+      const { textActive, active, $slots } = this
+
+      if (textActive && active)
+        return textActive
+
+      if ($slots.default && $slots.default.length > 0)
+        return $slots.default[0].text
+
+      return ''
+    },
+    activeClassIfActive() {
+      return this.active ? 'active' : ''
+    }
+    // torrentResults() {
+    //   return this.text.toLowerCase().includes('torrents')
+    // },
+    // getTorrentResultCount() {
+    //   return store.getters['torrentModule/resultCount']
+    // }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+li {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: rgba($c-dark, 0.5);
+  transition: color 0.5s ease;
+  font-size: 11px;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba($c-dark, 0.05);
+
+  &:hover {
+    color: rgba($c-dark, 0.80);
+    cursor: pointer;
+  }
+  .active {
+    color: $c-dark;
+  }
+  .pending {
+    color: #f8bd2d;
+  }
+
+  .supplementary-text {
+    flex-grow: 1;
+    text-align: right;
+  }
+
+  figure, figure > svg {
+    width: 18px;
+    height: 18px;
+    margin: 0 7px 0 0;
+    fill: rgba($c-dark, 0.5);
+    transition: fill 0.5s ease, transform 0.5s ease;
+    &.waiting {
+      transform: scale(0.8, 0.8);
+    }
+    &.pending {
+      fill: #f8bd2d;
+    }
+    &:hover &-icon {
+      fill: rgba($c-dark, 0.75);
+      cursor: pointer;
+    }
+    &.active {
+      color: $c-green;
+
+      > svg {
+        fill: $c-green;
+      }
+    }
+  }
+}
+</style>