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 @@ + + +