diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.css b/src/renderer/components/ft-icon-button/ft-icon-button.css
new file mode 100644
index 000000000..1dd1eadf6
--- /dev/null
+++ 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%;
+}
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
new file mode 100644
index 000000000..8fe06aca2
--- /dev/null
+++ 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])
+ }
+ }
+})
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
new file mode 100644
index 000000000..a0432bf44
--- /dev/null
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
diff --git a/src/renderer/components/watch-video-info/watch-video-info.css b/src/renderer/components/watch-video-info/watch-video-info.css
index 316666038..157f4d5dc 100644
--- 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;
}
}
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index 53c7cbb37..550b00675 100644
--- 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: {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 43ad7c087..3ba0f3bc2 100644
--- 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 @@
/>
-
-
-
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 67acbba1f..27b3ac37f 100644
--- 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);