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

Cleanup and template splitting

This commit is contained in:
Jiiks 2018-01-20 12:52:00 +02:00
parent 992aa63cd8
commit b42f17437c
19 changed files with 180 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
client/src/modules/ui/vue/components/BdSettings.vue Normal file
View File

@ -0,0 +1,67 @@
<template src="./templates/BdSettings.html"></template>
<script>
/*Imports*/
import { SidebarView, Sidebar, SidebarItem } from './sidebar';
const components = { SidebarView, Sidebar, SidebarItem };
/*Constants*/
const sidebarItems = [
{ text: 'Internal', _type: 'header' },
{ id: 0, contentid: "core", text: 'Core', active: false, _type: 'button' },
{ id: 1, contentid: "ui", text: 'UI', active: false, _type: 'button' },
{ id: 2, contentid: "emotes", text: 'Emotes', active: false, _type: 'button' },
{ id: 3, contentid: "css", text: 'CSS Editor', active: false, _type: 'button' },
{ text: 'External', _type: 'header' },
{ id: 4, contentid: "plugins", text: 'Plugins', active: false, _type: 'button' },
{ id: 5, contentid: "themes", text: 'Themes', active: false, _type: 'button' }
];
/*Methods*/
function itemOnClick(id) {
if (this.animating || id === this.activeIndex) return;
if (this.activeIndex >= 0) this.sidebarItems.find(item => item.id === this.activeIndex).active = false;
this.sidebarItems.find(item => item.id === id).active = true;
this.animating = true;
this.lastActiveIndex = this.activeIndex;
this.activeIndex = id;
if (this.first) {
this.first = false;
}
setTimeout(() => {
this.animating = false;
this.lastActiveIndex = -1;
}, 400);
}
function animatingContent(s) {
const item = this.sidebarItems.find(item => item.contentid === s);
if (!item) return false;
return item.id === this.lastActiveIndex;
}
function activeContent(s) {
const item = this.sidebarItems.find(item => item.contentid === s);
if (!item) return false;
return item.id === this.activeIndex;
}
const methods = { itemOnClick, animatingContent, activeContent };
export default {
components,
props: ['active', 'close'],
methods,
data() {
return {
sidebarItems,
activeIndex: -1,
lastActiveIndex: -1,
animating: false,
first: true
}
}
}
</script>

20
client/src/modules/ui/vue/components/BdSettingsWrapper.vue Normal file
View File

@ -0,0 +1,20 @@
<template src="./templates/BdSettingsWrapper.html"></template>
<script>
/*Imports*/
import BdSettings from './BdSettings.vue';
const components = { BdSettings };
/*Methods*/
function showSettings() { this.active = true; }
function hideSettings() { this.active = false; }
const methods = { showSettings, hideSettings };
export default {
components,
methods,
data() {
return { active: false }
}
}
</script>

2
client/src/modules/ui/vue/components/generic/ScrollerWrap.vue Normal file
View File

@ -0,0 +1,2 @@
<template src="./templates/ScrollerWrap.html"></template>
<script>export default {}</script>

1
client/src/modules/ui/vue/components/generic/index.js Normal file
View File

@ -0,0 +1 @@
export { default as ScrollerWrap } from './ScrollerWrap.vue';

5
client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html Normal file
View File

@ -0,0 +1,5 @@
<div class="bd-scroller-wrap">
<div class="bd-scroller">
<slot/>
</div>
</div>

6
client/src/modules/ui/vue/components/sidebar/Button.vue Normal file
View File

@ -0,0 +1,6 @@
<template src="./templates/Button.html"></template>
<script>
export default {
props: ['item', 'onClick']
}
</script>

6
client/src/modules/ui/vue/components/sidebar/Header.vue Normal file
View File

@ -0,0 +1,6 @@
<template src="./templates/Header.html"></template>
<script>
export default {
props: ['item']
}
</script>

11
client/src/modules/ui/vue/components/sidebar/Item.vue Normal file
View File

@ -0,0 +1,11 @@
<template src="./templates/Item.html"></template>
<script>
/*Imports*/
import { SidebarHeader, SidebarButton } from './';
const components = { SidebarHeader, SidebarButton };
export default {
components,
props: ['item', 'onClick']
}
</script>

2
client/src/modules/ui/vue/components/sidebar/Sidebar.vue Normal file
View File

@ -0,0 +1,2 @@
<template src="./templates/Sidebar.html"></template>
<script> export default {}</script>

11
client/src/modules/ui/vue/components/sidebar/View.vue Normal file
View File

@ -0,0 +1,11 @@
<template src="./templates/View.html"></template>
<script>
/*Imports =>*/
import { ScrollerWrap } from '../generic';
const components = { ScrollerWrap };
/*<= Imports*/
export default {
components
}
</script>

5
client/src/modules/ui/vue/components/sidebar/index.js Normal file
View File

@ -0,0 +1,5 @@
export { default as SidebarView } from './View.vue';
export { default as Sidebar } from './Sidebar.vue';
export { default as SidebarHeader } from './Header.vue';
export { default as SidebarButton } from './Button.vue';
export { default as SidebarItem } from './Item.vue';

1
client/src/modules/ui/vue/components/sidebar/templates/Button.html Normal file
View File

@ -0,0 +1 @@
<div class="bd-item" :class="{active: item.active}" @click="onClick(item.id)">{{item.text}}</div>

1
client/src/modules/ui/vue/components/sidebar/templates/Header.html Normal file
View File

@ -0,0 +1 @@
<div class='bd-header'>{{item.text}}</div>

2
client/src/modules/ui/vue/components/sidebar/templates/Item.html Normal file
View File

@ -0,0 +1,2 @@
<SidebarButton v-if="item._type == 'button'" :item="item" :onClick="onClick" />
<SidebarHeader v-else-if="item._type == 'header'" :item="item" />

3
client/src/modules/ui/vue/components/sidebar/templates/Sidebar.html Normal file
View File

@ -0,0 +1,3 @@
<div class="bd-sidebar">
<slot/>
</div>

14
client/src/modules/ui/vue/components/sidebar/templates/View.html Normal file
View File

@ -0,0 +1,14 @@
<div class="bd-sidebar-view">
<div class="bd-sidebar-region">
<div class="bd-settingsWrap">
<ScrollerWrap>
<slot name="sidebar"/>
</ScrollerWrap>
</div>
</div>
<div class="bd-content-region">
<ScrollerWrap>
<slot name="content"/>
</ScrollerWrap>
</div>
</div>

10
client/src/modules/ui/vue/components/templates/BdSettings.html Normal file
View File

@ -0,0 +1,10 @@
<div class="bd-settings" :class="{active: active}">
<SidebarView>
<Sidebar slot="sidebar">
<div class="bd-settings-x" @click="close">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 12 12"><g fill="none" fill-rule="evenodd"><path d="M0 0h12v12H0"></path><path class="fill" fill="#dcddde" d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path></g></svg>
</div>
<SidebarItem v-for="item in sidebarItems" :item="item" :key="item.id" :onClick="itemOnClick"/>
</Sidebar>
</SidebarView>
</div>

6
client/src/modules/ui/vue/components/templates/BdSettingsWrapper.html Normal file
View File

@ -0,0 +1,6 @@
<div class="bd-settings-wrapper" :class="{active: active}">
<div class="bd-settings-button" :class="{active: active}" @click="showSettings">
<div class="bd-settings-button-btn"></div>
</div>
<BdSettings :active="active" :close="hideSettings"/>
</div>

15
client/src/modules/ui/vueui.js
View File

@ -11,19 +11,18 @@
const $ = require('jquery');
const Vue = require('vue');
const BdButton = (require('./components/bdbutton.vue')).default;
const BdSettingsWrapper = (require('./vue/components/BdSettingsWrapper.vue')).default;
class UI {
constructor() {
$('body').append($('<div/>', {
class: 'bd-settingsbutton',
id: 'bd-settingsbutton'
}));
$('body').append($('<bdbody/>').append($('<div/>', {
id: 'bd-settings'
})));
this.vueInstance = new Vue.default({
el: '#bd-settingsbutton',
template: '<BdButton/>',
components: { BdButton }
el: '#bd-settings',
template: '<BdSettingsWrapper/>',
components: { BdSettingsWrapper }
});
}