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

Css editor and ipc module

This commit is contained in:
Jiiks 2018-01-30 13:14:16 +02:00
parent 9c14b44d22
commit 031e93185a
11 changed files with 208 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/index.js
View File

@ -10,10 +10,12 @@
import { DOM, BdUI } from './ui';
import BdCss from './styles/index.scss';
import { Events } from './modules';
import { Events, CssEditor } from './modules';
class BetterDiscord {
constructor() {
window.DOM = DOM;
window.cssEditorTest = CssEditor;
DOM.injectStyle(BdCss, 'bdmain');
Events.on('global-ready', this.globalReady.bind(this));
Events.emit('global-ready'); // Emit for now

26
client/src/modules/csseditor.js Normal file
View File

@ -0,0 +1,26 @@
/**
* BetterDiscord CSS Editor Module
* 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.
*/
import { ClientIPC } from '../../../common/modules';
import { DOM } from '../ui';
export default class {
static async show() {
const t = await ClientIPC.send('openCssEditor', {});
if (t === 1) ClientIPC.send('setCss', { css: DOM.getStyleCss('bd-customcss') });
ClientIPC.on('bd-update-css', this.updateCss);
}
static updateCss(e, css) {
DOM.injectStyle(css, 'bd-customcss');
}
}

1
client/src/modules/index.js
View File

@ -1,2 +1,3 @@
export { default as Events } from './events';
export { default as Settings } from './settings';
export { default as CssEditor } from './csseditor';

16
client/src/ui/components/BdSettings.vue
View File

@ -45,7 +45,7 @@
// Imports
import { Settings } from '../../modules';
import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
import { CoreSettings } from './bd';
import { CoreSettings, UISettings, EmoteSettings } from './bd';
import { SvgX } from './common';
// Constants
@ -79,7 +79,7 @@
},
components: {
SidebarView, Sidebar, SidebarItem, ContentColumn,
CoreSettings,
CoreSettings, UISettings, EmoteSettings,
SvgX
},
methods: {
@ -109,6 +109,18 @@
const item = this.sidebarItems.find(item => item.contentid === s);
if (!item) return false;
return item.id === this.lastActiveIndex;
},
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;
}
}
}
}

64
client/src/ui/components/bd/CssEditor.vue
View File

@ -8,28 +8,60 @@
* LICENSE file in the root directory of this source tree.
*/
<template src="./templates/CssEditor.html">
<template>
<SettingsWrapper headertext="CSS Editor">
<div class="bd-css-editor">
<div class="bd-form-item">
<h5>Custom Editor</h5>
<div class="bd-form-warning">
<div class="bd-text">Custom Editor is not installed!</div>
<FormButton>
Install
</FormButton>
</div>
<span style="color: #FFF; font-size: 12px; font-weight: 700;">*This is displayed if editor is not installed</span>
<FormButton :onClick="openInternalEditor">
Open
</FormButton>
</div>
<div class="bd-form-divider"></div>
<SettingSwitch :setting="dummySetting" :onClick="settingClicked" />
<div class="bd-form-item">
<h5>System Editor</h5>
<FormButton>
Open
</FormButton>
</div>
<div class="bd-form-divider"></div>
<FormButton :onClick="settingClicked">
Enabled
</FormButton>
<FormButton :disabled="true">
<span>Disabled</span>
</FormButton>
<FormButton :loading="true" />
</div>
</SettingsWrapper>
</template>
<script>
const { CssEditor } = require('../../../');
/*Imports*/
// Imports
import CssEditor from '../../';
import { SettingsWrapper } from './';
import { SettingSwitch, FormButton } from '../generic';
const components = { SettingsWrapper, SettingSwitch, FormButton };
function openInternalEditor() {
CssEditor.show();
}
function settingClicked() {
this.dummySetting.checked = !this.dummySetting.checked;
}
import { SettingSwitch, FormButton } from '../common';
export default {
components,
methods: { openInternalEditor, settingClicked },
components: {
SettingsWrapper,
SettingSwitch, FormButton
},
methods: {
openInternalEditor() {
},
settingClicked() {
}
},
data() {
return {
dummySetting: {

27
client/src/ui/components/bd/EmoteSettings.vue Normal file
View File

@ -0,0 +1,27 @@
/**
* BetterDiscord Emote 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>
<SettingsWrapper headertext="Emote Settings">
</SettingsWrapper>
</template>
<script>
// Imports
import { SettingsWrapper } from './';
import { SettingSwitch } from '../common';
export default {
components: {
SettingsWrapper,
SettingSwitch
}
}
</script>

27
client/src/ui/components/bd/UISettings.vue Normal file
View File

@ -0,0 +1,27 @@
/**
* BetterDiscord UI 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>
<SettingsWrapper headertext="UI Settings">
</SettingsWrapper>
</template>
<script>
// Imports
import { SettingsWrapper } from './';
import { SettingSwitch } from '../common';
export default {
components: {
SettingsWrapper,
SettingSwitch
}
}
</script>

3
client/src/ui/components/bd/index.js
View File

@ -1,2 +1,5 @@
export { default as SettingsWrapper } from './SettingsWrapper.vue';
export { default as CoreSettings } from './CoreSettings.vue';
export { default as UISettings } from './UISettings.vue';
export { default as EmoteSettings } from './EmoteSettings.vue';
export { default as CssEditor } from './CssEditor.vue';

5
client/src/ui/dom.js
View File

@ -69,6 +69,11 @@ class DOM {
this.bdStyles.append(this.createStyle(css, id));
}
static getStyleCss(id) {
const exists = this.getElement(`bd-styles > #${id}`);
return exists.textContent || '';
}
static deleteTheme(id) {
const exists = this.getElement(`bd-themes > #${id}`);
if (exists) exists.remove();

53
common/modules/bdipc.js Normal file
View File

@ -0,0 +1,53 @@
/**
* BetterDiscord IPC Module
* 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.
*/
const { ipcRenderer, ipcMain } = require('electron');
export class ClientIPC {
static on(channel, cb) {
ipcRenderer.on(channel, (event, message) => cb(event, message));
}
static async send(channel, message) {
channel = channel.startsWith('bd-') ? channel : `bd-${channel}`;
const __eid = Date.now().toString();
ipcRenderer.send(channel, Object.assign(message ? message : {}, { __eid }));
return new Promise((resolve, reject) => {
ipcRenderer.once(__eid, (event, arg) => resolve(arg));
});
}
}
class BDIpcEvent {
constructor(event, args) {
this.args = args;
this.ipcEvent = event;
}
bindings() {
this.send = this.send.bind(this);
this.reply = this.reply.bind(this);
}
send(message) {
this.ipcEvent.sender.send(this.args.__eid, message);
}
reply(message) {
this.send(message);
}
}
export class CoreIPC {
static on(channel, cb) {
ipcMain.on(channel, (event, args) => cb(new BDIpcEvent(event, args)));
}
}

1
common/modules/index.js Normal file
View File

@ -0,0 +1 @@
export { ClientIPC } from './bdipc';