From d74aab1b7afaeda19345402f8d3ca526d5a44fb2 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sat, 29 Jun 2019 13:39:20 +0200
Subject: [PATCH] Moved sidebar html to a separate component

---
 index.html                             |  2 +-
 src/components/Movie.vue               | 44 +++++-------
 src/components/movie/SidebarAction.vue | 95 ++++++++++++++++++++++++++
 3 files changed, 112 insertions(+), 29 deletions(-)
 create mode 100644 src/components/movie/SidebarAction.vue

diff --git a/index.html b/index.html
index f7f8d01..b37da37 100644
--- a/index.html
+++ b/index.html
@@ -98,7 +98,7 @@
         <title>Does not exsits</title>
         <path d="M18.916 8.792c0.443 0.511 0.695 1.355 0.695 2.159 0 0.531-0.115 0.996-0.333 1.345-0.284 0.454-0.738 0.704-1.278 0.704h-2.618c1.425 2.591 1.785 4.543 1.070 5.807-0.499 0.881-1.413 1.193-2.045 1.193-0.25 0-0.462-0.185-0.495-0.433-0.179-1.319-1.188-2.893-2.768-4.318-1.514-1.365-3.374-2.456-5.286-3.11-0.241 0.508-0.758 0.86-1.356 0.86h-3c-0.827 0-1.5-0.673-1.5-1.5v-9c0-0.827 0.673-1.5 1.5-1.5h3c0.634 0 1.176 0.395 1.396 0.952 1.961-0.246 2.699-0.64 3.414-1.022 0.895-0.478 1.739-0.93 4.503-0.93 0.72 0 1.398 0.188 1.91 0.529 0.5 0.333 0.82 0.801 0.926 1.343 0.399 0.162 0.753 0.536 1.024 1.092 0.264 0.541 0.435 1.232 0.435 1.761 0 0.099-0.006 0.19-0.017 0.274 0.253 0.186 0.48 0.473 0.667 0.851 0.27 0.545 0.432 1.228 0.432 1.826 0 0.424-0.079 0.777-0.234 1.051-0.013 0.022-0.026 0.044-0.039 0.065zM4.5 2h-3c-0.276 0-0.5 0.224-0.5 0.5v9c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5v-8.999c0-0 0-0.001 0-0.001-0-0.276-0.224-0.5-0.5-0.5zM18.339 9.726c-0.151-0.304-0.304-0.414-0.37-0.414-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5c0.042 0 0.072 0 0.117-0.078 0.066-0.117 0.104-0.32 0.104-0.558 0-0.445-0.126-0.974-0.328-1.382-0.198-0.399-0.399-0.544-0.487-0.544-0.276 0-0.5-0.224-0.5-0.5 0-0.177 0.092-0.333 0.231-0.422 0.031-0.317-0.117-1.165-0.501-1.718-0.145-0.209-0.298-0.329-0.418-0.329-0.276 0-0.5-0.224-0.5-0.5 0-0.88-0.972-1.281-1.875-1.281-2.513 0-3.217 0.376-4.032 0.812-0.762 0.407-1.618 0.865-3.781 1.134v8.187c2.101 0.689 4.152 1.877 5.812 3.373 1.593 1.436 2.639 2.988 2.994 4.426 0.272-0.087 0.579-0.271 0.776-0.618 0.334-0.59 0.584-2.096-1.493-5.557-0.093-0.154-0.095-0.347-0.006-0.504s0.255-0.254 0.435-0.254h3.483c0.199 0 0.327-0.070 0.43-0.234 0.117-0.187 0.181-0.477 0.181-0.815 0-0.424-0.102-0.882-0.272-1.225z" fill-rule="nozero" transform="scale(1.4)"></path>
       </symbol>
-      <symbol id="iconExsits" viewBox="0 0 30 26">
+      <symbol id="iconExists" viewBox="0 0 30 26">
         <title>Exsists</title>
         <path d="M18.916 11.208c0.443-0.511 0.695-1.355 0.695-2.159 0-0.531-0.115-0.996-0.333-1.345-0.284-0.454-0.738-0.704-1.278-0.704h-2.618c1.425-2.591 1.785-4.543 1.070-5.807-0.499-0.881-1.413-1.193-2.045-1.193-0.25 0-0.462 0.185-0.495 0.433-0.179 1.319-1.188 2.893-2.768 4.318-1.514 1.365-3.374 2.456-5.286 3.11-0.241-0.508-0.758-0.86-1.356-0.86h-3c-0.827 0-1.5 0.673-1.5 1.5v9c0 0.827 0.673 1.5 1.5 1.5h3c0.634 0 1.176-0.395 1.396-0.952 1.961 0.246 2.699 0.64 3.414 1.022 0.895 0.478 1.739 0.93 4.503 0.93 0.72 0 1.398-0.188 1.91-0.529 0.5-0.333 0.82-0.801 0.926-1.343 0.399-0.162 0.753-0.536 1.024-1.092 0.264-0.541 0.435-1.232 0.435-1.761 0-0.099-0.006-0.19-0.017-0.274 0.253-0.186 0.48-0.473 0.667-0.851 0.27-0.545 0.432-1.228 0.432-1.826 0-0.424-0.079-0.777-0.234-1.051-0.013-0.022-0.026-0.044-0.039-0.065zM4.5 18h-3c-0.276 0-0.5-0.224-0.5-0.5v-9c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5v8.999c0 0 0 0.001 0 0.001-0 0.276-0.224 0.5-0.5 0.5zM18.339 10.274c-0.151 0.304-0.304 0.414-0.37 0.414-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5c0.042 0 0.072 0 0.117 0.078 0.066 0.117 0.104 0.32 0.104 0.558 0 0.445-0.126 0.974-0.328 1.382-0.198 0.399-0.399 0.544-0.487 0.544-0.276 0-0.5 0.224-0.5 0.5 0 0.177 0.092 0.333 0.231 0.422 0.031 0.317-0.117 1.165-0.501 1.718-0.145 0.209-0.298 0.329-0.418 0.329-0.276 0-0.5 0.224-0.5 0.5 0 0.88-0.972 1.281-1.875 1.281-2.513 0-3.217-0.376-4.032-0.812-0.762-0.407-1.618-0.865-3.781-1.134v-8.187c2.101-0.689 4.152-1.877 5.812-3.373 1.593-1.436 2.639-2.988 2.994-4.426 0.272 0.087 0.579 0.271 0.776 0.618 0.334 0.59 0.584 2.096-1.493 5.557-0.093 0.154-0.095 0.347-0.006 0.504s0.255 0.254 0.435 0.254h3.483c0.199 0 0.327 0.070 0.43 0.234 0.117 0.187 0.181 0.477 0.181 0.815 0 0.424-0.102 0.882-0.272 1.225z" fill-rule="nozero" transform="scale(1.4)"></path>
       </symbol>
diff --git a/src/components/Movie.vue b/src/components/Movie.vue
index 3b42468..fb892e4 100644
--- a/src/components/Movie.vue
+++ b/src/components/Movie.vue
@@ -32,33 +32,20 @@
         <!-- SIDEBAR ACTIONS -->
         <div class="movie__actions" v-if="movie">
 
-          <a class="movie__actions-link" v-if="matched" :class="{'active' : matched}">
-            <svg class="movie__actions-icon"><use xlink:href="#iconExsits"></use></svg>
-            <span class="movie__actions-text"> Already in plex &nbsp;🎉</span>
-          </a>
-          <a class="movie__actions-link" v-else="matched">
-            <svg class="movie__actions-icon"><use xlink:href="#iconNot_exsits"></use></svg>
-            <span class="movie__actions-text"> Not in plex yet</span>
-          </a>
-
-          <a class="movie__actions-link" :class="{'active' : requested}" v-if="this.requested">
-            <svg class="movie__actions-icon"><use xlink:href="#iconSent"></use></svg>
-            <span class="movie__actions-text"> Requested to be downloaded</span>
-          </a>
-          <a class="movie__actions-link" v-else="this.requested"  @click.prevent="sendRequest">
-            <svg class="movie__actions-icon" :class="{'waiting' : requested}"><use xlink:href="#iconUnmatched"></use></svg>
-            <span class="movie__actions-text"> Request to be downloaded?</span>
-          </a>
-
-          <a class="movie__actions-link" @click="showTorrents=!showTorrents" v-if="admin==='true'" :class="{'active' : showTorrents}">
-            <svg class="movie__actions-icon"><use xlink:href="#icon_torrents"></use></svg>
-            <span class="movie__actions-text"> Search for torrents</span>
-          </a>
-
-          <a class="movie__actions-link" @click.prevent="openTmdb">
-            <svg class="movie__actions-icon"><use xlink:href="#icon_info"></use></svg>
-            <span class="movie__actions-text"> See more info</span>
-          </a>
+          <sidebar-action
+            :text="'Not yet in plex'" :iconRef="'#iconNot_exsits'"
+            :textActive="'Already in plex 🎉'" :iconRefActive="'#iconExists'"
+            :active="matched"></sidebar-action>
+          <sidebar-action
+            :text="'Request to be downloaded?'" :iconRef="'#iconSent'"
+            :textActive="'Requested to be downloaded'"
+            :active="requested"></sidebar-action>
+          <sidebar-action
+            v-if="admin" @click="showTorrents=!showTorrents"
+            :text="'Search for torrents'" :iconRef="'#icon_torrents'"
+            :active="showTorrents"></sidebar-action>
+          <sidebar-action
+            :iconRef="'#icon_info'" :text="'See more info'"></sidebar-action>
         </div>
 
         <!-- Loading placeholder -->
@@ -126,6 +113,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 LoadingPlaceholder from './ui/LoadingPlaceholder.vue'
 
@@ -133,7 +121,7 @@ import { getMovie, getShow, request, getRequestStatus } from '@/api.js'
 
 export default {
   props: ['id', 'type'],
-  components: { TorrentList, Person, LoadingPlaceholder },
+  components: { TorrentList, Person, LoadingPlaceholder, SidebarAction },
   directives: { img: img }, // TODO decide to remove or use
   data(){
     return{
diff --git a/src/components/movie/SidebarAction.vue b/src/components/movie/SidebarAction.vue
new file mode 100644
index 0000000..ba6c6e8
--- /dev/null
+++ b/src/components/movie/SidebarAction.vue
@@ -0,0 +1,95 @@
+<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> 
+    </a>
+  </div>
+</template>
+
+<script>
+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
+    }
+  }
+}
+</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>