Add BD button context menu
This commit is contained in:
Samuel Elliott
parent
697df8a7fe
commit
3ff077ea04
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<template>
|
||||
<div ref="root" class="bd-cm" :class="{'bd-cmRenderLeft': renderLeft}" v-if="activeMenu && activeMenu.menu" :style="calculatePosition()">
|
||||
<CMGroup v-for="(group, index) in activeMenu.menu.groups" :items="group.items" :key="index" :closeMenu="hide" :left="left" :top="top"/>
|
||||
<CMGroup v-for="(group, index) in activeMenu.menu.groups" :items="group.items" :key="index" :left="left" :top="top" @close="hide" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@
|
|||
|
||||
<template>
|
||||
<div class="bd-settingsWrapper" :class="[{'bd-active': active}, 'platform-' + this.platform]">
|
||||
<div class="bd-settingsButton" :class="{'bd-active': active, 'bd-animating': animating, 'bd-hideButton': hideButton}" @click="active = true">
|
||||
<div class="bd-settingsButton" :class="{'bd-active': active, 'bd-animating': animating, 'bd-hideButton': hideButton}" @click="active = true" v-contextmenu="buttonContextMenu">
|
||||
<div v-if="updating === 0" v-tooltip.right="'Checking for updates'" class="bd-settingsButtonBtn bd-loading"></div>
|
||||
<div v-else-if="updating === 2" v-tooltip.right="'Updates available!'" class="bd-settingsButtonBtn bd-updates"></div>
|
||||
<div v-else class="bd-settingsButtonBtn" :class="[{'bd-loading': !loaded}]"></div>
|
||||
<div v-else class="bd-settingsButtonBtn" :class="{'bd-loading': !loaded}"></div>
|
||||
</div>
|
||||
<BdSettings ref="settings" :active="active" @close="active = false" />
|
||||
</div>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
<script>
|
||||
// Imports
|
||||
import { Events, Settings } from 'modules';
|
||||
import { Events, Settings, Updater } from 'modules';
|
||||
import { Modals } from 'ui';
|
||||
import process from 'process';
|
||||
import BdSettings from './BdSettings.vue';
|
||||
|
|
@ -38,7 +38,21 @@
|
|||
eventHandlers: {},
|
||||
keybindHandler: null,
|
||||
hideButton: false,
|
||||
hideButtonToggleHandler: null
|
||||
hideButtonToggleHandler: null,
|
||||
buttonContextMenu: [
|
||||
{
|
||||
items: [
|
||||
{
|
||||
text: 'Check for updates',
|
||||
updating: false,
|
||||
onClick(event) {
|
||||
if (this.updating === 2) Updater.update();
|
||||
else if (this.updating !== 0) Updater.checkForUpdates();
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -67,6 +81,12 @@
|
|||
this.animating = false;
|
||||
this.timeout = null;
|
||||
}, 400);
|
||||
},
|
||||
updating(updating) {
|
||||
const updateItem = this.buttonContextMenu[0].items[0];
|
||||
|
||||
updateItem.updating = updating;
|
||||
updateItem.text = updating === 0 ? 'Checking for updates...' : updating === 2 ? 'Install updates' : 'Check for updates';
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-cmItem" :style="{color: item.color || ''}" @click="onClick">
|
||||
<div class="bd-cmItem" :style="{color: item.color || ''}" @click="$emit('click', $event)">
|
||||
<span>{{item.text}}</span>
|
||||
<div class="bd-cmHint" v-if="item.hint">{{item.hint}}</div>
|
||||
<img :src="item.icon" v-else-if="item.icon"/>
|
||||
|
|
@ -18,6 +18,6 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: ['item', 'onClick']
|
||||
props: ['item']
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,15 +11,15 @@
|
|||
<template>
|
||||
<div class="bd-cmGroup" ref="test">
|
||||
<template v-for="(item, index) in items">
|
||||
<CMButton v-if="!item.type || item.type === 'button'" :item="item" :onClick="() => { item.onClick(); closeMenu(); }" />
|
||||
<CMToggle v-else-if="item.type === 'toggle'" :item="item" :onClick="() => { item.checked = item.onChange(!item.checked) }" />
|
||||
<CMButton v-if="!item.type || item.type === 'button'" :item="item" @click="item.onClick ? item.onClick($event) : undefined; item.type === 'button' ? $emit('close') : undefined" />
|
||||
<CMToggle v-else-if="item.type === 'toggle'" :item="item" @click="item.checked = item.onChange(!item.checked)" />
|
||||
<div v-else-if="item.type === 'sub'" class="bd-cmItem bd-cmSub" @mouseenter="e => subMenuMouseEnter(e, index, item)" @mouseleave="e => subMenuMouseLeave(e, index, item)">
|
||||
{{item.text}}
|
||||
<MiChevronDown />
|
||||
<div ref="test2" class="bd-cm" v-if="index === visibleSub" :style="subStyle">
|
||||
<template v-for="(item, index) in item.items">
|
||||
<CMButton v-if="!item.type || item.type === 'button'" :item="item" :onClick="() => { item.onClick(); closeMenu(); }" />
|
||||
<CMToggle v-else-if="item.type === 'toggle'" :item="item" :onClick="() => { item.checked = item.onChange(!item.checked) }" />
|
||||
<CMButton v-if="!item.type || item.type === 'button'" :item="item" @click="item.onClick ? item.onClick($event) : undefined; item.type === 'button' ? $emit('close') : undefined" />
|
||||
<CMToggle v-else-if="item.type === 'toggle'" :item="item" @click="item.checked = item.onChange(!item.checked)" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,8 +40,10 @@
|
|||
subStyle: {}
|
||||
}
|
||||
},
|
||||
props: ['items', 'closeMenu', 'left', 'top'],
|
||||
components: { CMButton, CMToggle, MiChevronDown },
|
||||
props: ['items', 'left', 'top'],
|
||||
components: {
|
||||
CMButton, CMToggle, MiChevronDown
|
||||
},
|
||||
methods: {
|
||||
subMenuMouseEnter(e, index, sub) {
|
||||
const subHeight = sub.items.length > 9 ? 270 : sub.items.length * e.target.offsetHeight;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-cmItem bd-cmToggle" @click="onClick">
|
||||
<div class="bd-cmItem bd-cmToggle" @click="$emit('click', $event)">
|
||||
<div class="bd-cmLabel">{{item.text}}</div>
|
||||
<div class="bd-cmCheckbox">
|
||||
<div class="bd-cmCheckboxInner">
|
||||
|
|
|
|||
Loading…
Reference in New Issue