lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Use the CMGroup component to render sub menus

This commit is contained in:
Samuel Elliott 2018-08-22 21:35:50 +01:00
parent 3ff077ea04
commit cf71f89077
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
3 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/ui/components/BdContextMenu.vue
View File

@ -9,7 +9,7 @@
*/
<template>
<div ref="root" class="bd-cm" :class="{'bd-cmRenderLeft': renderLeft}" v-if="activeMenu && activeMenu.menu" :style="calculatePosition()">
<div 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" :left="left" :top="top" @close="hide" />
</div>
</template>
@ -47,9 +47,7 @@
this.activeMenu.menu = null;
},
clickHide(e) {
if (!this.$refs.root) return;
if (this.$refs.root.contains(e.target)) return;
this.hide();
if (!this.$el.contains(e.target)) this.hide();
}
}
}

10
client/src/ui/components/BdSettingsWrapper.vue
View File

@ -28,6 +28,13 @@
export default {
data() {
const subMenu = {
type: 'sub',
text: 'Sub menu',
items: []
};
subMenu.items.push(subMenu);
return {
loaded: false,
updating: false,
@ -49,7 +56,8 @@
if (this.updating === 2) Updater.update();
else if (this.updating !== 0) Updater.checkForUpdates();
}
}
},
subMenu
]
}
]

34
client/src/ui/components/contextmenu/Group.vue
View File

@ -9,20 +9,17 @@
*/
<template>
<div class="bd-cmGroup" ref="test">
<div class="bd-cmGroup">
<template v-for="(item, index) in items">
<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)">
<CMToggle v-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="subMenuMouseEnter($event, index, item)" @mouseleave="subMenuMouseLeave($event, 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" @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 class="bd-cm" v-if="index === visibleSub" :style="subStyle">
<CMGroup :items="item.items" :top="subTop" :left="left" @close="$emit('close')" />
</div>
</div>
<CMButton v-else :item="item" @click="item.onClick ? item.onClick($event) : undefined; item.type === 'button' ? $emit('close') : undefined" />
</template>
</div>
</template>
@ -34,23 +31,26 @@
import { MiChevronDown } from '../common';
export default {
name: 'CMGroup',
components: {
CMButton, CMToggle, MiChevronDown
},
props: ['items', 'left', 'top'],
data() {
return {
visibleSub: -1,
subStyle: {}
}
},
props: ['items', 'left', 'top'],
components: {
CMButton, CMToggle, MiChevronDown
subStyle: {},
subTop: 0,
subLeft: 0
};
},
methods: {
subMenuMouseEnter(e, index, sub) {
const subHeight = sub.items.length > 9 ? 270 : sub.items.length * e.target.offsetHeight;
const top = this.top + subHeight + e.target.offsetTop > window.innerHeight ?
this.subTop = this.top + subHeight + e.target.offsetTop > window.innerHeight ?
this.top - subHeight + e.target.offsetTop + e.target.offsetHeight :
this.top + e.target.offsetTop;
this.subStyle = { top: `${top}px`, left: `${this.left}px` };
this.subStyle = { top: `${this.subTop}px`, left: `${this.left}px` };
this.visibleSub = index;
},
subMenuMouseLeave(e, index, sub) {