Add ft-icon-button component

src/renderer/components/ft-icon-button/ft-icon-button.css

@@ -0,0 +1,113 @@
+.ftIconButton {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  position: relative;
+}
+
+.iconButton {
+  width: 1em;
+  height: 1em;
+  padding: 10px;
+  font-size: 20px;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgba(0,0,0,.5);
+  cursor: pointer;
+  -moz-transition: background 0.2s ease-out;
+  -o-transition: background 0.2s ease-out;
+  transition: background 0.2s ease-out;
+}
+
+.iconButton:hover {
+  -moz-transition: background 0.2s ease-in;
+  -o-transition: background 0.2s ease-in;
+  transition: background 0.2s ease-in;
+}
+
+.base {
+  background-color: var(--card-bg-color);
+  color: var(--primary-text-color);
+}
+
+.base:hover {
+  background-color: var(--side-nav-hover-color);
+}
+
+.base:active {
+  background-color: var(--side-nav-active-color);
+}
+
+.primary {
+  background-color: var(--primary-color);
+  color: var(--text-with-main-color);
+}
+
+.primary:hover {
+  background-color: var(--primary-color-hover);
+}
+
+.primary:active {
+  background-color: var(--primary-color-active);
+}
+
+.secondary {
+  background-color: var(--accent-color);
+  color: var(--text-with-accent-color);
+}
+
+.secondary:hover {
+  background-color: var(--accent-color-hover);
+}
+
+.secondary:active {
+  background-color: var(--accent-color-active);
+}
+
+.iconDropdown {
+  position: absolute;
+  text-align: center;
+  list-style-type: none;
+  z-index: 100;
+  margin-top: 45px;
+  font-size: 12px;
+  box-shadow: 0 1px 2px rgba(0,0,0,.5);
+  background-color: var(--card-bg-color);
+  color: var(--secondary-text-color);
+}
+
+.iconDropdown p {
+    padding: 10px;
+    margin: 0;
+    white-space: nowrap;
+    cursor: pointer;
+    -moz-transition: background 0.2s ease-out;
+    -o-transition: background 0.2s ease-out;
+    transition: background 0.2s ease-out;
+}
+
+.iconDropdown p:hover {
+  background-color: var(--side-nav-hover-color);
+  -moz-transition: background 0.2s ease-in;
+  -o-transition: background 0.2s ease-in;
+  transition: background 0.2s ease-in;
+}
+
+.iconDropdown p:active {
+  background-color: var(--side-nav-active-color);
+  -moz-transition: background 0.1s ease-in;
+  -o-transition: background 0.1s ease-in;
+  transition: background 0.1s ease-in;
+}
+
+.iconDropdown p a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.left {
+  right: 100%;
+}
+
+.right {
+  left: 100%;
+}

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -0,0 +1,54 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'FtIconButton',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: 'ellipsis-v'
+    },
+    theme: {
+      type: String,
+      default: 'base'
+    },
+    dropdownPosition: {
+      type: String,
+      default: 'center'
+    },
+    dropdownNames: {
+      type: Array,
+      default: () => { return [] }
+    },
+    dropdownValues: {
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  data: function () {
+    return {
+      showDropdown: false
+    }
+  },
+  methods: {
+    toggleDropdown: function () {
+      this.showDropdown = !this.showDropdown
+    },
+
+    handleIconClick: function () {
+      if (this.dropdownNames.length > 0 && this.dropdownValues.length > 0) {
+        this.toggleDropdown()
+      } else {
+        this.$emit('click')
+      }
+    },
+
+    handleDropdownClick: function (index) {
+      this.toggleDropdown()
+      this.$emit('click', this.dropdownValues[index])
+    }
+  }
+})

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="ftIconButton">
+    <font-awesome-icon
+      class="iconButton"
+      :title="title"
+      :icon="icon"
+      :class="{
+        base: theme === 'base',
+        primary: theme === 'primary',
+        secondary: theme === 'secondary'
+      }"
+      @click="handleIconClick"
+    />
+    <div
+      v-if="dropdownNames.length > 0 && showDropdown"
+      class="iconDropdown"
+      :class="{
+        left: dropdownPosition === 'left',
+        right: dropdownPosition === 'right',
+        center: dropdownPosition === 'center'
+      }"
+    >
+      <p
+        v-for="(label, index) in dropdownNames"
+        :key="index"
+        @click="handleDropdownClick(index)"
+      >
+        {{ label }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script src="./ft-icon-button.js" />
+<style scoped src="./ft-icon-button.css" />

src/renderer/components/watch-video-info/watch-video-info.css

@@ -89,27 +89,12 @@
   position: absolute;
   right: 15px;
   top: 20px;
-  width: 550px;
-}
-
-.theatreModeButton {
-  height: 30px;
-  line-height: 10px;
-  position: relative;
-  bottom: 5px;
-}
-
-.formatTypeDropdown {
-  width: 150px;
-}
-
-.shareDropdown {
   width: 175px;
 }
 
 @media only screen and (max-width: 1500px) {
   .videoOptions {
-    width: 350px;
+    width: 175px;
   }
 
   .watchVideoInfo {
@@ -127,6 +112,6 @@
   }
 
   .videoOptions {
-    width: 350px;
+    width: 120px;
   }
 }

src/renderer/components/watch-video-info/watch-video-info.js

@@ -3,6 +3,7 @@ import FtCard from '../ft-card/ft-card.vue'
 import FtButton from '../ft-button/ft-button.vue'
 import FtListDropdown from '../ft-list-dropdown/ft-list-dropdown.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 // import { shell } from 'electron'
 
 export default Vue.extend({
@@ -11,7 +12,8 @@ export default Vue.extend({
     'ft-card': FtCard,
     'ft-button': FtButton,
     'ft-list-dropdown': FtListDropdown,
-    'ft-flex-box': FtFlexBox
+    'ft-flex-box': FtFlexBox,
+    'ft-icon-button': FtIconButton
   },
   props: {
     id: {

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -27,23 +27,27 @@
       />
     </div>
     <ft-flex-box class="videoOptions">
-      <ft-button
+      <ft-icon-button
-        label="Toggle Theatre Mode"
+        title="Toggle Theatre Mode"
         class="theatreModeButton"
+        icon="expand-alt"
+        theme="secondary"
         @click="$emit('theatreMode')"
       />
-      <ft-list-dropdown
+      <ft-icon-button
-        :title="formatTypeLabel"
+        title="Change Video Formats"
-        :label-names="formatTypeNames"
+        theme="secondary"
-        :label-values="formatTypeValues"
+        icon="file-video"
-        class="formatTypeDropdown"
+        :dropdown-names="formatTypeNames"
+        :dropdown-values="formatTypeValues"
         @click="handleFormatChange"
       />
-      <ft-list-dropdown
+      <ft-icon-button
-        :title="shareLabel"
+        title="Share Video"
-        :label-names="shareNames"
+        theme="secondary"
-        :label-values="shareValues"
+        icon="share-alt"
-        class="shareDropdown"
+        :dropdown-names="shareNames"
+        :dropdown-values="shareValues"
         @click="handleShare"
       />
     </ft-flex-box>

src/renderer/themes.css

@@ -200,6 +200,8 @@
 
 .secRed {
   --accent-color: #f44336;
+  --accent-color-hover: #e53935;
+  --accent-color-active: #c62828;
   --accent-color-light: #ef9a9a;
   --text-with-accent-color: #FFFFFF;
   --accent-color-opacity1: rgba(244,67,54,0.04);
@@ -210,6 +212,8 @@
 
 .secPink {
   --accent-color: #E91E63;
+  --accent-color-hover: #D81B60;
+  --accent-color-active: #AD1457;
   --accent-color-light: #F48FB1;
   --text-with-accent-color: #FFFFFF;
   --accent-color-opacity1: rgba(233,30,99,0.04);
@@ -220,6 +224,8 @@
 
 .secPurple {
   --accent-color: #9C27B0;
+  --accent-color-hover: #8E24AA;
+  --accent-color-active: #6A1B9A;
   --accent-color-light: #CE93D8;
   --text-with-accent-color: #FFFFFF;
   --accent-color-opacity1: rgba(156,39,176,0.04);
@@ -230,6 +236,8 @@
 
 .secDeepPurple {
   --accent-color: #673AB7;
+  --accent-color-hover: #5E35B1;
+  --accent-color-active: #4527A0;
   --accent-color-light: #B39DDB;
   --text-with-accent-color: #FFFFFF;
   --accent-color-opacity1: rgba(103,58,183,0.04);
@@ -240,6 +248,8 @@
 
 .secIndigo {
   --accent-color: #3F51B5;
+  --accent-color-hover: #3949AB;
+  --accent-color-active: #283593;
   --accent-color-light: #9FA8DA;
   --text-with-accent-color: #FFFFFF;
   --accent-color-opacity1: rgba(63,81,181,0.04);
@@ -250,6 +260,8 @@
 
 .secBlue {
   --accent-color: #2196F3;
+  --accent-color-hover: #1E88E5;
+  --accent-color-active: #1565C0;
   --accent-color-light: #90CAF9;
   --text-with-accent-color: #FFFFFF;
   --accent-color-opacity1: rgba(33,150,243,0.04);
@@ -260,6 +272,8 @@
 
 .secLightBlue {
   --accent-color: #03A9F4;
+  --accent-color-hover: #039BE5;
+  --accent-color-active: #0277BD;
   --accent-color-light: #81D4FA;
   --text-with-accent-color: #FFFFFF;
   --accent-color-opacity1: rgba(3,169,244,0.04);
@@ -270,6 +284,8 @@
 
 .secCyan {
   --accent-color: #00BCD4;
+  --accent-color-hover: #00ACC1;
+  --accent-color-active: #00838F;
   --accent-color-light: #80DEEA;
   --text-with-accent-color: #FFFFFF;
   --accent-color-opacity1: rgba(0,188,212,0.04);
@@ -280,6 +296,8 @@
 
 .secTeal {
   --accent-color: #009688;
+  --accent-color-hover: #00897B;
+  --accent-color-active: #00695C;
   --accent-color-light: #80CBC4;
   --text-with-accent-color: #FFFFFF;
   --accent-color-opacity1: rgba(0,150,136,0.04);
@@ -290,6 +308,8 @@
 
 .secGreen {
   --accent-color: #4CAF50;
+  --accent-color-hover: #43A047;
+  --accent-color-active: #2E7D32;
   --accent-color-light: #A5D6A7;
   --text-with-accent-color: #FFFFFF;
   --accent-color-opacity1: rgba(76,175,80,0.04);
@@ -300,6 +320,8 @@
 
 .secLightGreen {
   --accent-color: #8BC34A;
+  --accent-color-hover: #7CB342;
+  --accent-color-active: #558B2F;
   --accent-color-light: #C5E1A5;
   --text-with-accent-color: #000000;
   --accent-color-opacity1: rgba(139,195,74,0.04);
@@ -310,6 +332,8 @@
 
 .secLime {
   --accent-color: #CDDC39;
+  --accent-color-hover: #C0CA33;
+  --accent-color-active: #9E9D24;
   --accent-color-light: #E6EE9C;
   --text-with-accent-color: #000000;
   --accent-color-opacity1: rgba(205,220,57,0.04);
@@ -320,6 +344,8 @@
 
 .secYellow {
   --accent-color: #FFEB3B;
+  --accent-color-hover: #FDD835;
+  --accent-color-active: #F9A825;
   --accent-color-light: #FFF59D;
   --text-with-accent-color: #000000;
   --accent-color-opacity1: rgba(255,235,59,0.04);
@@ -330,6 +356,8 @@
 
 .secAmber {
   --accent-color: #FFC107;
+  --accent-color-hover: #FFB300;
+  --accent-color-active: #FF8F00;
   --accent-color-light: #FFE082;
   --text-with-accent-color: #000000;
   --accent-color-opacity1: rgba(255,193,7,0.04);
@@ -340,6 +368,8 @@
 
 .secOrange {
   --accent-color: #FF9800;
+  --accent-color-hover: #FB8C00;
+  --accent-color-active: #EF6C00;
   --accent-color-light: #FFCC80;
   --text-with-accent-color: #000000;
   --accent-color-opacity1: rgba(255,152,0,0.04);
@@ -350,6 +380,8 @@
 
 .secDeepOrange {
   --accent-color: #FF5722;
+  --accent-color-hover: #F4511E;
+  --accent-color-active: #D84315;
   --accent-color-light: #FFAB91;
   --text-with-accent-color: #000000;
   --accent-color-opacity1: rgba(255,87,34,0.04);