Add ft-icon-button component

2020-06-05 23:15:44 -04:00 · 2020-06-05 23:15:44 -04:00 · e155b65c08
parent 650cc4c0ba
commit e155b65c08
7 changed files with 255 additions and 30 deletions
--- a/src/renderer/components/ft-icon-button/ft-icon-button.css
+++ b/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%;
+}
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/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])
+    }
+  }
+})
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/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" />
--- a/src/renderer/components/watch-video-info/watch-video-info.css
+++ b/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;
  }
 }
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/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: {
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@ -27,23 +27,27 @@
      />
    </div>
    <ft-flex-box class="videoOptions">
-      <ft-button
-        label="Toggle Theatre Mode"
+      <ft-icon-button
+        title="Toggle Theatre Mode"
        class="theatreModeButton"
+        icon="expand-alt"
+        theme="secondary"
        @click="$emit('theatreMode')"
      />
-      <ft-list-dropdown
-        :title="formatTypeLabel"
-        :label-names="formatTypeNames"
-        :label-values="formatTypeValues"
-        class="formatTypeDropdown"
+      <ft-icon-button
+        title="Change Video Formats"
+        theme="secondary"
+        icon="file-video"
+        :dropdown-names="formatTypeNames"
+        :dropdown-values="formatTypeValues"
        @click="handleFormatChange"
      />
-      <ft-list-dropdown
-        :title="shareLabel"
-        :label-names="shareNames"
-        :label-values="shareValues"
-        class="shareDropdown"
+      <ft-icon-button
+        title="Share Video"
+        theme="secondary"
+        icon="share-alt"
+        :dropdown-names="shareNames"
+        :dropdown-values="shareValues"
        @click="handleShare"
      />
    </ft-flex-box>
--- a/src/renderer/themes.css
+++ b/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);