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

Add SCSS support to the CSS editor

This commit is contained in:
Samuel Elliott 2018-02-13 19:56:01 +00:00
parent cbc727f951
commit 5ca04f0652
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
12 changed files with 161 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
client/src/modules/csseditor.js
View File

@ -13,14 +13,53 @@ import { DOM } from 'ui';
export default class {
static async show() {
const t = await ClientIPC.send('openCssEditor', {});
ClientIPC.send('setCss', { css: DOM.getStyleCss('bd-customcss') });
static init() {
ClientIPC.on('bd-get-scss', () => this.sendToEditor('set-scss', { scss: this.scss }));
ClientIPC.on('bd-update-scss', (e, scss) => this.updateScss(scss));
ClientIPC.on('bd-update-css', this.updateCss);
ClientIPC.on('bd-save-scss', async (e, scss) => {
this.updateScss(scss);
e.reply(await this.save(scss));
});
}
static updateCss(e, css) {
static async show() {
await ClientIPC.send('openCssEditor', {});
}
static updateScss(scss) {
this.compile(scss).then(css => {
this.css = css;
this._scss = scss;
this.sendToEditor('scss-error', null);
}).catch(err => {
this.sendToEditor('scss-error', err);
});
}
static async save(scss) {
console.log('Saving SCSS:', scss);
}
static async compile(scss) {
return await ClientIPC.send('bd-compileSass', { data: scss });
}
static async sendToEditor(channel, data) {
return await ClientIPC.send('sendToCssEditor', { channel, data });
}
static get scss() {
return this._scss || '';
}
static set scss(scss) {
this.sendToEditor('set-scss', { scss: this.scss });
this.updateScss(scss);
}
static set css(css) {
DOM.injectStyle(css, 'bd-customcss');
}
}

5
client/src/modules/modulemanager.js
View File

@ -10,7 +10,7 @@
/*Module Manager initializes all modules when everything is ready*/
import { Events, SocketProxy, EventHook } from 'modules';
import { Events, SocketProxy, EventHook, CssEditor } from 'modules';
import { ProfileBadges } from 'ui';
export default class {
@ -19,7 +19,8 @@ export default class {
return this._modules ? this._modules : (this._modules = [
new ProfileBadges(),
new SocketProxy(),
new EventHook()
new EventHook(),
CssEditor
]);
}

6
client/src/modules/thememanager.js
View File

@ -101,7 +101,7 @@ class Theme {
let css = '';
if (this.info.type === 'sass') {
css = await ClientIPC.send('bd-compileSass', {
scss: ThemeManager.getConfigAsSCSS(this.themeConfig),
data: ThemeManager.getConfigAsSCSS(this.themeConfig),
path: this.paths.mainPath.replace(/\\/g, '/')
});
console.log(css);
@ -195,11 +195,11 @@ export default class ThemeManager extends ContentManager {
}
if (typeof value === 'boolean' || typeof value === 'number') {
return `$${name}: ${value};`;
return `$${name}: ${value};`;
}
if (typeof value === 'string') {
return `$${name}: ${setting.scss_raw ? value : `'${setting.value.replace(/\\/g, '\\\\').replace(/'/g, '\\\'')}'`};`;
return `$${name}: ${setting.scss_raw ? value : `'${setting.value.replace(/\\/g, '\\\\').replace(/'/g, '\\\'')}'`};`;
}
}

14
core/src/main.js
View File

@ -55,7 +55,7 @@ class Comms {
});
BDIpc.on('bd-openCssEditor', o => CSSEditor.openEditor(o));
BDIpc.on('bd-setCss', o => CSSEditor.setCSS(o.args));
BDIpc.on('bd-sendToCssEditor', o => CSSEditor.send(o.args.channel, o.args.data));
BDIpc.on('bd-readFile', this.readFile);
BDIpc.on('bd-readJson', o => this.readFile(o, true));
@ -67,11 +67,13 @@ class Comms {
});
BDIpc.on('bd-compileSass', o => {
const { scss, path } = o.args;
if (!scss && !path) return;
const data = scss ? `${scss} @import '${path}';` : `@import '${path}';`;
if (!o.args.data && !o.args.path) return;
if (o.args.path && o.args.data) {
o.args.data = `${o.args.data} @import '${o.args.path}';`;
o.args.path = undefined;
}
sass.render({ data }, (err, result) => {
sass.render(o.args, (err, result) => {
if (err) {
o.reply({ err });
return;
@ -180,4 +182,4 @@ class BetterDiscord {
module.exports = {
BetterDiscord
}
};

20
core/src/modules/csseditor.js
View File

@ -12,6 +12,7 @@ const path = require('path');
const { BrowserWindow } = require('electron');
const { Module } = require('./modulebase');
const { WindowUtils } = require('./utils');
class CSSEditor extends Module {
@ -26,25 +27,30 @@ class CSSEditor extends Module {
}
this.editor = new BrowserWindow(this.options);
this.editor.loadURL(`file://${this.editorPath}/index.html`);
this.editor.open = true;
this.editor.loadURL('about:blank');
this.editor.setSheetOffset(33);
this.editorUtils = new WindowUtils({ window: this.editor });
this.editor.webContents.on('close', () => {
this.editor = null;
});
this.editor.once('ready-to-show', () => {
this.editor.show()
this.editor.show();
});
this.editor.webContents.on('did-finish-load', () => {
this.editorUtils.injectScript(path.join(this.editorPath, 'csseditor.js'));
o.reply(true);
});
}
setCSS(css) {
this.editor.webContents.send("set-css", css);
setSCSS(scss) {
this.send('set-scss', scss);
}
send(channel, data) {
this.editor.webContents.send(channel, data);
}
set alwaysOnTop(state) {
@ -69,4 +75,6 @@ class CSSEditor extends Module {
}
module.exports = { 'CSSEditor': new CSSEditor() };
module.exports = {
CSSEditor: new CSSEditor()
};

10
core/src/modules/utils.js
View File

@ -133,8 +133,12 @@ class WindowUtils extends Module {
injectScript(fpath, variable) {
console.log(`Injecting: ${fpath}`);
if (variable) this.executeJavascript(`${variable} = require("${fpath}");`);
else this.executeJavascript(`require("${fpath}");`);
const escaped_path = fpath.replace(/\\/g, '\\\\').replace(/"/g, '\\\"');
const escaped_variable = variable ? variable.replace(/\\/g, '\\\\').replace(/"/g, '\\\"') : null;
if (variable) this.executeJavascript(`window["${escaped_variable}"] = require("${escaped_path}");`);
else this.executeJavascript(`require("${escaped_path}");`);
}
events(event, callback) {
@ -152,4 +156,4 @@ module.exports = {
Utils,
FileUtils,
WindowUtils
}
};

8
csseditor/src/BDIpc.js
View File

@ -1,6 +1,6 @@
const { ipcRenderer } = window.require('electron');
class BDIpc {
export default class {
static on(channel, cb) {
ipcRenderer.on(channel, (event, args) => cb(event, args));
@ -21,6 +21,8 @@ class BDIpc {
});
}
}
static sendToDiscord(channel, message) {
this.send('bd-sendToDiscord', { channel, message });
}
module.exports = { BDIpc };
}

111
csseditor/src/Editor.vue
View File

@ -8,7 +8,7 @@
<div class="title">CSS Editor</div>
<div class="flex-spacer"></div>
<div class="controls">
<button :class="{active: alwaysOnTop}"ref="aot" title="Toggle always on top" @click="toggleaot">P</button>
<button :class="{active: alwaysOnTop}" ref="aot" title="Toggle always on top" @click="toggleaot">P</button>
<button title="Close CSS Editor" @click="close">X</button>
</div>
</div>
@ -16,19 +16,16 @@
<div class="valign">Loading Please Wait...</div>
</div>
<div id="editor" class="editor">
<codemirror
ref="mycm"
:options="cmOptions"
@input="cmOnChange"
/>
<codemirror ref="mycm" :options="cmOptions" @input="cmOnChange" />
</div>
<div class="parser-error" v-if="error">{{ error.formatted }}</div>
<div class="tools">
<div class="flex-row">
<button @click="save">Save</button>
<button @click="update">Update</button>
<div class="flex-spacer"></div>
<div id="chkboxLiveUpdate">
<input type="checkbox" @click="toggleLiveUpdate" :checked="liveUpdate"><span>Live Update</span>
<input type="checkbox" @click="toggleLiveUpdate" :checked="liveUpdate" /><span>Live Update</span>
</div>
</div>
</div>
@ -45,11 +42,9 @@
import '../../node_modules/codemirror/addon/dialog/dialog.js';
import '../../node_modules/codemirror/addon/hint/show-hint.js';
import BDIpc from './BDIpc';
const { remote } = window.require('electron');
const { BDIpc } = require('./BDIpc');
function sendToDiscord(channel, message) {
BDIpc.send('bd-sendToDiscord', { channel, message });
}
const ExcludedIntelliSenseTriggerKeys = {
'8': 'backspace',
@ -103,49 +98,7 @@
'222': 'quote'
};
/*Methods*/
function save() {
const css = this.codemirror.getValue();
sendToDiscord('save-css', css);
}
function update() {
const css = this.codemirror.getValue();
sendToDiscord('update-css', css);
}
function toggleaot() {
this.alwaysOnTop = !this.alwaysOnTop;
remote.getCurrentWindow().setAlwaysOnTop(this.alwaysOnTop);
}
function close() {
window.close();
}
function setCss(css) {
this.loading = false;
this.codemirror.setValue(css || '');
}
function cmOnChange(value) {
if(this.liveUpdate) sendToDiscord('update-css', value);
}
function cmOnKeyUp(editor, event) {
if (event.ctrlKey) return;
if (ExcludedIntelliSenseTriggerKeys[event.keyCode]) return;
cmCommands.autocomplete(editor, null, { completeSingle: false });
}
function toggleLiveUpdate(e) {
this.liveUpdate = !this.liveUpdate;
}
const methods = { save, update, toggleaot, close, setCss, cmOnChange, cmOnKeyUp, toggleLiveUpdate };
export default {
methods,
data() {
return {
loading: true,
@ -155,7 +108,7 @@
cmOptions: {
indentUnit: 4,
tabSize: 4,
mode: 'css',
mode: 'text/x-scss',
lineNumbers: true,
theme: 'material',
scrollbarStyle: 'overlay',
@ -165,7 +118,8 @@
dialog: {
'position': 'bottom'
}
}
},
error: null
}
},
computed: {
@ -176,18 +130,57 @@
return this.$refs.mycm;
}
},
mounted: function () {
mounted() {
this.codemirror.on('keyup', this.cmOnKeyUp);
BDIpc.on('set-css', (_, data) => {
BDIpc.on('set-scss', (_, data) => {
if (data.error) {
console.log(data.error);
return;
}
console.log(data);
this.setCss(data.css);
this.setScss(data.scss);
});
BDIpc.send('get-css');
BDIpc.sendToDiscord('get-scss');
BDIpc.on('scss-error', (_, err) => {
this.error = err;
this.$forceUpdate();
if (err)
console.error('SCSS parse error:', err);
});
},
methods: {
save() {
const scss = this.codemirror.getValue();
BDIpc.sendToDiscord('save-scss', scss);
},
update() {
const scss = this.codemirror.getValue();
BDIpc.sendToDiscord('update-scss', scss);
},
toggleaot() {
this.alwaysOnTop = !this.alwaysOnTop;
remote.getCurrentWindow().setAlwaysOnTop(this.alwaysOnTop);
},
close() {
window.close();
},
setScss(scss) {
this.loading = false;
this.codemirror.setValue(scss || '');
},
cmOnChange(value) {
if(this.liveUpdate) BDIpc.sendToDiscord('update-scss', value);
},
cmOnKeyUp(editor, event) {
if (event.ctrlKey) return;
if (ExcludedIntelliSenseTriggerKeys[event.keyCode]) return;
cmCommands.autocomplete(editor, null, { completeSingle: false });
},
toggleLiveUpdate(e) {
this.liveUpdate = !this.liveUpdate;
}
}
}
</script>

14
csseditor/src/index.js
View File

@ -1,15 +1,21 @@
const styles = require('./styles/index.scss');
// const styles = require('./styles/index.scss');
import Vue from 'vue';
import VueCodemirror from 'vue-codemirror';
import Editor from './Editor.vue';
import VueCodemirror from 'vue-codemirror'
import styles from './styles/index.scss';
Vue.use(VueCodemirror, {});
window.cmCommands = VueCodemirror.CodeMirror.commands;
new Vue({
el: '#root',
const mount = document.createElement('div');
mount.classList.add('container');
document.body.appendChild(mount);
const vue = new Vue({
el: mount,
components: { Editor },
template: '<Editor/>'
});

14
csseditor/src/styles/tools.scss
View File

@ -1,3 +1,13 @@
.parser-error {
padding: 4px 6px;
background: #292b2f;
border-top: 1px solid hsla(218,5%,47%,.3);
color: #d84040;
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
white-space: pre-wrap;
font-size: 12px;
}
.tools {
height: 36px;
background: #292b2f;
@ -24,16 +34,18 @@
cursor: pointer;
border: 0;
margin-right: 4px;
flex: 0 0 auto;
&:hover {
background: #44474e;
color: #FFF;
color: #fff;
}
}
#chkboxLiveUpdate {
padding: 3px 10px;
line-height: 22px;
flex: 0 0 auto;
input[type="checkbox"] {
margin: 0 6px 0 0;

2
csseditor/webpack.config.js
View File

@ -26,4 +26,4 @@ module.exports = {
vue$: path.resolve('..', 'node_modules', 'vue', 'dist', 'vue.esm.js')
}
}
};
};

1
package.json
View File

@ -49,6 +49,7 @@
"build": "npm run build --prefix client && npm run build --prefix core && npm run build --prefix csseditor",
"watch_client": "npm run watch --prefix client",
"watch_core": "npm run watch --prefix core",
"watch_csseditor": "npm run watch --prefix csseditor",
"lint": "eslint -f unix client/src core/src csseditor/src",
"test": "npm run build && npm run lint",
"build_node-sass": "node scripts/build-node-sass.js"