feat(share): Adds icons to share tab

- Icons provided by @mccouman, thanks!
- #486

build/webpack.config.base.js

@@ -31,6 +31,7 @@ const baseConfig = [
   }),
 
   resolve({
+    extensions: ['*', '.js', '.vue', '.json'],
     alias: {
       'vue$': 'vue/dist/vue.common.js',
       store: path.resolve(sourceDir, 'store'),

src/components/icons/ShareChapterIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" ratio="1">
+    <rect x="6" y="4" width="12" height="1" :fill="color || 'currentColor'"></rect>
+    <rect x="6" y="9" width="12" height="1" :fill="color || 'currentColor'"></rect>
+    <rect x="6" y="14" width="12" height="1" :fill="color || 'currentColor'"></rect>
+    <rect x="2" y="4" width="2" height="1" :fill="color || 'currentColor'"></rect>
+    <rect x="2" y="9" width="2" height="1" :fill="color || 'currentColor'"></rect>
+    <rect x="2" y="14" width="2" height="1" :fill="color || 'currentColor'"></rect>
+  </svg>
+</template>
+
+<script>
+  export default {
+    props: ['color']
+  }
+</script>

src/components/icons/ShareEpisodeIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path fill="none" :stroke="color || 'currentColor'" stroke-width=".82229346" d="M2.7270036 9.5946722h16.035961v8.6017895H2.7270036z"/>
+    <path fill="none" :stroke="color || 'currentColor'" stroke-width=".79365057" d="M.93963873 6.5861716h16.42688v2.0641451h-16.42688z" transform="matrix(.96632 -.25733 .22394 .9746 0 0)"/>
+    <path fill="#fff" fill-rule="evenodd" :stroke="color || 'currentColor'" stroke-width=".82200003" d="M3.3859545 8.5247829a.84745765.80508476 0 0 1-.7612853.8781919.84745765.80508476 0 0 1-.9256172-.7218293.84745765.80508476 0 0 1 .7583533-.8804784.84745765.80508476 0 0 1 .9280194.71904" stroke-linecap="round"/>
+    <path fill="#fff" fill-rule="evenodd" :stroke="color || 'currentColor'" stroke-width=".72010225" d="M2.6609156 9.4405775h16.118847v2.2205417H2.6609156z" stroke-linecap="round"/>
+    <path fill="none" :stroke="color || 'currentColor'" stroke-width="1.10197592" d="M6.0140037 11.598303l1.9198581-2.2124744M3.3868851 11.598303l1.9198581-2.2124744m3.1648876 2.3819664l1.9198582-2.2124749m.70726 2.1277289l1.919858-2.2124747m.792007 2.1277287l1.919858-2.2124745m.622514 2.2124745l1.919858-2.2124745"/>
+  </svg>
+</template>
+
+<script>
+  export default {
+    props: ['color']
+  }
+</script>

src/components/icons/SharePlaytimeIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" ratio="1">
+    <polygon fill="none" :stroke="color || 'currentColor'" stroke-width="1.1" points="8.5 7 13.5 10 8.5 13"></polygon>
+    <circle fill="none" :stroke="color || 'currentColor'" stroke-width="1.1" cx="10" cy="10" r="9"></circle>
+  </svg>
+</template>
+
+<script>
+  export default {
+    props: ['color']
+  }
+</script>

src/components/icons/ShareShowIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" ratio="1">
+    <polygon fill="none" :stroke="color || 'currentColor'" stroke-width="1.01" points="10 2 12.63 7.27 18.5 8.12 14.25 12.22 15.25 18 10 15.27 4.75 18 5.75 12.22 1.5 8.12 7.37 7.27"></polygon>
+  </svg>
+</template>
+
+<script>
+  export default {
+    props: ['color']
+  }
+</script>

src/components/tabs/share/ShareContent.vue

@@ -1,21 +1,25 @@
 <template>
   <div class="content">
     <div class="content-option" :class="{active: isActive('show')}" :style="isActive('show') ? activeContentStyle : {}" @click="setContent('show')">
+      <share-show-icon class="icon"></share-show-icon>
       <span class="type">{{ $t('SHARE.CONTENT.SHOW') }}</span>
       <span class="title truncate">{{ show.title }}</span>
       <span class="active-indicator" :style="triangleStyle"></span>
     </div>
     <div class="content-option" :class="{active: isActive('episode')}" :style="isActive('episode') ? activeContentStyle : {}" @click="setContent('episode')">
+      <share-episode-icon class="icon"></share-episode-icon>
       <span class="type">{{ $t('SHARE.CONTENT.EPISODE') }}</span>
       <span class="title truncate">{{ episode.title }}</span>
       <span class="active-indicator" :style="triangleStyle"></span>
     </div>
     <div class="content-option" v-if="currentChapter" :class="{active: isActive('chapter')}" :style="isActive('chapter') ? activeContentStyle : {}" @click="setContent('chapter')">
+      <share-chapter-icon class="icon"></share-chapter-icon>
       <span class="type">{{ $t('SHARE.CONTENT.CHAPTER') }}</span>
       <span class="title truncate">{{ currentChapter }}</span>
       <span class="active-indicator" :style="triangleStyle"></span>
     </div>
     <div class="content-option" :class="{active: isActive('time')}" :style="isActive('time') ? activeContentStyle : {}" @click="setContent('time')">
+      <share-playtime-icon class="icon"></share-playtime-icon>
       <span class="type">{{ $t('SHARE.CONTENT.TIME') }}</span>
       <span class="title truncate">{{ fromPlayerTime(playtime) }}</span>
       <span class="active-indicator" :style="triangleStyle"></span>
@@ -30,6 +34,11 @@
   import { currentChapter } from 'utils/chapters'
   import { fromPlayerTime } from 'utils/time'
 
+  import ShareShowIcon from 'icons/ShareShowIcon'
+  import ShareEpisodeIcon from 'icons/ShareEpisodeIcon'
+  import ShareChapterIcon from 'icons/ShareChapterIcon'
+  import SharePlaytimeIcon from 'icons/SharePlaytimeIcon'
+
   export default {
     data () {
       return {
@@ -71,6 +80,13 @@
       },
 
       fromPlayerTime
+    },
+
+    components: {
+      ShareShowIcon,
+      ShareEpisodeIcon,
+      ShareChapterIcon,
+      SharePlaytimeIcon
     }
   }
 </script>
@@ -103,6 +119,10 @@
       margin-bottom: $margin;
     }
 
+    .icon {
+      margin-bottom: $margin / 2;
+    }
+
     .type {
       text-transform: uppercase;
     }