2018-01-29 19:15:58 +01:00
|
|
|
/**
|
|
|
|
* BetterDiscord Settings Component
|
|
|
|
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
|
|
|
|
* All rights reserved.
|
|
|
|
* https://betterdiscord.net
|
|
|
|
*
|
|
|
|
* This source code is licensed under the MIT license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree.
|
|
|
|
*/
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div class="bd-settings" :class="{active: active}" @keyup="close">
|
2018-01-30 10:28:28 +01:00
|
|
|
<SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating">
|
|
|
|
<Sidebar slot="sidebar">
|
|
|
|
<div class="bd-settings-x" @click="close">
|
2018-02-03 01:17:35 +01:00
|
|
|
<MiClose size="17"/>
|
|
|
|
<span class="bd-x-text">ESC</span>
|
2018-01-30 10:28:28 +01:00
|
|
|
</div>
|
|
|
|
<SidebarItem v-for="item in sidebarItems" :item="item" :key="item.id" :onClick="itemOnClick" />
|
|
|
|
</Sidebar>
|
2018-02-03 06:38:28 +01:00
|
|
|
<div slot="sidebarfooter" class="bd-info">
|
|
|
|
<span class="bd-vtext">v2.0.0a by Jiiks/JsSucks</span>
|
|
|
|
<div @click="openGithub" v-tooltip="'Github'" class="bd-material-button">
|
|
|
|
<MiGithubCircle size="16" />
|
|
|
|
</div>
|
2018-02-03 06:44:18 +01:00
|
|
|
<div @click="openTwitter" v-tooltip="'@Jiiksi'" class="bd-material-button">
|
|
|
|
<MiTwitterCircle size="16" />
|
|
|
|
</div>
|
2018-02-03 06:38:28 +01:00
|
|
|
<div @click="openWebsite" v-tooltip="'BetterDiscord'" class="bd-material-button">
|
|
|
|
<MiWeb size="16" />
|
|
|
|
</div>
|
|
|
|
</div>
|
2018-01-30 10:28:28 +01:00
|
|
|
<ContentColumn slot="content">
|
|
|
|
<div v-if="activeContent('core') || animatingContent('core')" :class="{active: activeContent('core'), animating: animatingContent('core')}">
|
|
|
|
<CoreSettings :settings="coreSettings" :enableSetting="enableSetting" :disableSetting="disableSetting" />
|
|
|
|
</div>
|
|
|
|
<div v-if="activeContent('ui') || animatingContent('ui')" :class="{active: activeContent('ui'), animating: animatingContent('ui')}">
|
|
|
|
<UISettings />
|
|
|
|
</div>
|
|
|
|
<div v-if="activeContent('css') || animatingContent('css')" :class="{active: activeContent('css'), animating: animatingContent('css')}">
|
|
|
|
<CssEditorView />
|
|
|
|
</div>
|
|
|
|
<div v-if="activeContent('emotes') || animatingContent('emotes')" :class="{active: activeContent('emotes'), animating: animatingContent('emotes')}">
|
|
|
|
<EmoteSettings />
|
|
|
|
</div>
|
|
|
|
<div v-if="activeContent('plugins') || animatingContent('plugins')" :class="{active: activeContent('plugins'), animating: animatingContent('plugins')}">
|
|
|
|
<PluginsView />
|
|
|
|
</div>
|
|
|
|
</ContentColumn>
|
|
|
|
</SidebarView>
|
2018-01-29 19:15:58 +01:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
2018-01-30 10:28:28 +01:00
|
|
|
// Imports
|
2018-02-02 14:23:02 +01:00
|
|
|
import { shell } from 'electron';
|
2018-01-30 14:20:24 +01:00
|
|
|
import { Settings } from 'modules';
|
2018-01-30 10:28:28 +01:00
|
|
|
import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
|
2018-01-30 16:59:27 +01:00
|
|
|
import { CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView } from './bd';
|
2018-02-03 06:44:18 +01:00
|
|
|
import { SvgX, MiGithubCircle, MiWeb, MiClose, MiTwitterCircle } from './common';
|
2018-01-30 10:28:28 +01:00
|
|
|
|
|
|
|
// 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' }
|
|
|
|
];
|
|
|
|
|
2018-01-29 19:15:58 +01:00
|
|
|
export default {
|
2018-01-30 10:28:28 +01:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
sidebarItems,
|
|
|
|
activeIndex: -1,
|
|
|
|
lastActiveIndex: -1,
|
|
|
|
animating: false,
|
2018-01-30 11:01:24 +01:00
|
|
|
first: true,
|
|
|
|
settings: Settings.getSettings
|
2018-01-30 10:28:28 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
props: ['active', 'close'],
|
2018-01-30 11:01:24 +01:00
|
|
|
computed: {
|
|
|
|
coreSettings() {
|
|
|
|
return this.settings.find(settingset => settingset.id === 'core').settings;
|
|
|
|
}
|
|
|
|
},
|
2018-01-30 10:28:28 +01:00
|
|
|
components: {
|
2018-01-30 11:01:24 +01:00
|
|
|
SidebarView, Sidebar, SidebarItem, ContentColumn,
|
2018-02-03 06:44:18 +01:00
|
|
|
CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView,
|
|
|
|
MiGithubCircle, MiWeb, MiClose, MiTwitterCircle
|
2018-01-30 10:28:28 +01:00
|
|
|
},
|
|
|
|
methods: {
|
2018-01-30 11:01:24 +01:00
|
|
|
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;
|
|
|
|
}
|
2018-01-29 19:15:58 +01:00
|
|
|
|
2018-01-30 11:01:24 +01:00
|
|
|
setTimeout(() => {
|
|
|
|
this.animating = false;
|
|
|
|
this.lastActiveIndex = -1;
|
|
|
|
}, 400);
|
2018-01-30 10:28:28 +01:00
|
|
|
},
|
2018-01-30 11:01:24 +01:00
|
|
|
activeContent(s) {
|
|
|
|
const item = this.sidebarItems.find(item => item.contentid === s);
|
|
|
|
if (!item) return false;
|
|
|
|
return item.id === this.activeIndex;
|
2018-01-30 10:28:28 +01:00
|
|
|
},
|
2018-01-30 11:01:24 +01:00
|
|
|
animatingContent(s) {
|
|
|
|
const item = this.sidebarItems.find(item => item.contentid === s);
|
|
|
|
if (!item) return false;
|
|
|
|
return item.id === this.lastActiveIndex;
|
2018-01-30 12:14:16 +01:00
|
|
|
},
|
|
|
|
enableSetting(cat, id) {
|
|
|
|
switch (cat) {
|
|
|
|
case 'core':
|
|
|
|
return this.coreSettings.find(setting => setting.id === id).enabled = true;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
disableSetting(cat, id) {
|
|
|
|
switch (cat) {
|
|
|
|
case 'core':
|
|
|
|
return this.coreSettings.find(setting => setting.id === id).enabled = false;
|
|
|
|
}
|
2018-02-02 14:23:02 +01:00
|
|
|
},
|
|
|
|
openGithub() {
|
|
|
|
console.log('open github?');
|
|
|
|
shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
|
|
|
|
},
|
|
|
|
openWebsite() {
|
|
|
|
shell.openExternal('https://betterdiscord.net');
|
2018-02-03 06:44:18 +01:00
|
|
|
},
|
|
|
|
openTwitter() {
|
|
|
|
shell.openExternal('https://twitter.coom/Jiiksi');
|
2018-01-30 10:28:28 +01:00
|
|
|
}
|
|
|
|
}
|
2018-01-29 19:15:58 +01:00
|
|
|
}
|
2018-01-30 11:01:24 +01:00
|
|
|
</script>
|