Allow HTML Injection into ft-icon-button component

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;
+}

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')

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

@@ -13,22 +13,31 @@
       @click="handleIconClick"
     />
     <div
-      v-if="dropdownNames.length > 0 && showDropdown"
+      v-if="showDropdown"
       class="iconDropdown"
       :class="{
-        left: dropdownPosition === 'left',
-        right: dropdownPosition === 'right',
-        center: dropdownPosition === 'center'
+        left: dropdownPositionX === 'left',
+        right: dropdownPositionX === 'right',
+        center: dropdownPositionX === 'center',
+        bottom: dropdownPositionY === 'bottom',
+        top: dropdownPositionY === 'top'
       }"
+    >
+      <slot>
+        <div
+          v-if="dropdownNames.length > 0"
         >
           <p
             v-for="(label, index) in dropdownNames"
             :key="index"
+            class="dropdownItem
             @click="handleDropdownClick(index)"
           >
             {{ label }}
           </p>
         </div>
+      </slot>
+    </div>
   </div>
 </template>
 

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"