diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.css b/src/renderer/components/ft-icon-button/ft-icon-button.css index 89e3fb62..bd65f661 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.css +++ b/src/renderer/components/ft-icon-button/ft-icon-button.css @@ -78,7 +78,7 @@ color: var(--secondary-text-color); } -.iconDropdown p { +.iconDropdown .dropdownItem { padding: 10px; margin: 0; white-space: nowrap; @@ -88,21 +88,21 @@ transition: background 0.2s ease-out; } -.iconDropdown p:hover { +.iconDropdown .dropdownItem: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 { +.iconDropdown .dropdownItem: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 { +.iconDropdown .dropdownItem a { text-decoration: none; color: inherit; } @@ -114,3 +114,8 @@ .right { left: 50%; } + +.top { + margin-top: 0px; + bottom: 60px; +} diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js index 9e4f7f79..7449fbfd 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.js +++ b/src/renderer/components/ft-icon-button/ft-icon-button.js @@ -19,10 +19,18 @@ export default Vue.extend({ type: Boolean, default: true }, - dropdownPosition: { + forceDropdown: { + type: Boolean, + default: false + }, + dropdownPositionX: { type: String, default: 'center' }, + dropdownPositionY: { + type: String, + default: 'bottom' + }, dropdownNames: { type: Array, default: () => { return [] } @@ -43,7 +51,7 @@ export default Vue.extend({ }, handleIconClick: function () { - if (this.dropdownNames.length > 0 && this.dropdownValues.length > 0) { + if (this.forceDropdown || (this.dropdownNames.length > 0 && this.dropdownValues.length > 0)) { this.toggleDropdown() } else { this.$emit('click') diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue index 098e4398..913dc8e3 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.vue +++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue @@ -13,21 +13,30 @@ @click="handleIconClick" />
-

- {{ label }} -

+ +
+ +
+
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue index 09503a05..1018a95b 100644 --- a/src/renderer/components/ft-list-video/ft-list-video.vue +++ b/src/renderer/components/ft-list-video/ft-list-video.vue @@ -42,7 +42,7 @@ title="More Options" theme="base" :use-shadow="false" - dropdown-position="left" + dropdown-position-x="left" :dropdown-names="optionsNames" :dropdown-values="optionsValues" @click="handleOptionsClick"