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

Merge pull request #34 from samuelthomas2774/css-editor 

CSS editor tweaks
Fixes #14
This commit is contained in:
Alexei Stukov 2018-01-22 08:43:36 +02:00 committed by GitHub
parent 5d07d9b429 10ea33f270
commit 43fb6eb2c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 101 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@
* https://github.com/JsSucks - https://betterdiscord.net * https://github.com/JsSucks - https://betterdiscord.net
* *
* This source code is licensed under the MIT license found in the * This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
const path = require('path'); const path = require('path');
@ -16,7 +16,9 @@ const { Module } = require('./modulebase');
class CSSEditor extends Module { class CSSEditor extends Module {
openEditor(o) { openEditor(o) {
if (this.editor && this.editor.open) { if (this.editor) {
if (this.editor.isFocused()) return;
this.editor.focus(); this.editor.focus();
this.editor.flashFrame(true); this.editor.flashFrame(true);
o.reply(true); o.reply(true);
@ -26,9 +28,10 @@ class CSSEditor extends Module {
this.editor = new BrowserWindow(this.options); this.editor = new BrowserWindow(this.options);
this.editor.loadURL(`file://${this.editorPath}/index.html`); this.editor.loadURL(`file://${this.editorPath}/index.html`);
this.editor.open = true; this.editor.open = true;
this.editor.setSheetOffset(33);
this.editor.webContents.on('close', () => { this.editor.webContents.on('close', () => {
this.editor.open = false; this.editor = null;
}); });
this.editor.webContents.on('did-finish-load', () => { this.editor.webContents.on('did-finish-load', () => {
@ -60,4 +63,4 @@ class CSSEditor extends Module {
} }
module.exports = { 'CSSEditor': new CSSEditor() }; module.exports = { 'CSSEditor': new CSSEditor() };

2
core/src/modules/index.js
View File

@ -1,4 +1,4 @@
export { BDIpc } from './bdipc'; export { BDIpc } from './bdipc';
export { Utils, FileUtils, WindowUtils } from './utils'; export { Utils, FileUtils, WindowUtils } from './utils';
export { Config } from './config'; export { Config } from './config';
export { CSSEditor } from './csseditor'; export { CSSEditor } from './csseditor';

7
package.json
View File

@ -34,12 +34,13 @@
"gulp-babel": "^7.0.0", "gulp-babel": "^7.0.0",
"pump": "^2.0.0", "pump": "^2.0.0",
"gulp-plumber": "^1.2.0", "gulp-plumber": "^1.2.0",
"gulp-watch": "^5.0.0" "gulp-watch": "^5.0.0",
"codemirror": "^5.23.0"
}, },
"scripts": { "scripts": {
"build": "cd ./client && npm run build && cd ../core && npm run build", "build": "cd ./client && npm run build && cd ../core && npm run build",
"watch_client": "cd ./client && npm run watch", "watch_client": "cd ./client && npm run watch",
"watch_core": "cd ./core && npm run watch", "watch_core": "cd ./core && npm run watch",
"test": "npm run build" "test": "npm run build"
} }
} }

35
tests/csseditor/index.html
View File

@ -1,11 +1,11 @@
<html> <html>
<head> <head>
<title>CSS Editor</title> <title>CSS Editor</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/codemirror.min.css" /> <link rel="stylesheet" href="../../node_modules/codemirror/lib/codemirror.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/theme/material.min.css" /> <link rel="stylesheet" href="../../node_modules/codemirror/theme/material.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/scroll/simplescrollbars.css" /> <link rel="stylesheet" href="../../node_modules/codemirror/addon/scroll/simplescrollbars.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/addon/dialog/dialog.min.css" /> <link rel="stylesheet" href="../../node_modules/codemirror/addon/dialog/dialog.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/hint/show-hint.min.css" /> <link rel="stylesheet" href="../../node_modules/codemirror/addon/hint/show-hint.css" />
<link rel="stylesheet" href="./main.css" /> <link rel="stylesheet" href="./main.css" />
</head> </head>
<body> <body>
@ -29,23 +29,22 @@
<div class="flex-row"> <div class="flex-row">
<button id="btnSave">Save</button> <button id="btnSave">Save</button>
<button id="btnUpdate">Update</button> <button id="btnUpdate">Update</button>
<div class="flex-spacer"></div>
<div id="chkboxLiveUpdate"><input type="checkbox"><span>Live Update</span></div> <div id="chkboxLiveUpdate"><input type="checkbox"><span>Live Update</span></div>
</div> </div>
<div class="flex-row">
</div>
</div> </div>
</div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script>const $ = require('../../node_modules/jquery/dist/jquery.min.js');</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/codemirror.min.js"></script> <script src="../../node_modules/codemirror/lib/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/css/css.min.js"></script> <script src="../../node_modules/codemirror/mode/css/css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/scroll/simplescrollbars.min.js"></script> <script src="../../node_modules/codemirror/addon/scroll/simplescrollbars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/search/search.min.js"></script> <script src="../../node_modules/codemirror/addon/search/search.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/search/searchcursor.min.js"></script> <script src="../../node_modules/codemirror/addon/search/searchcursor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/search/jump-to-line.min.js"></script> <script src="../../node_modules/codemirror/addon/search/jump-to-line.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/dialog/dialog.min.js"></script> <script src="../../node_modules/codemirror/addon/dialog/dialog.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/hint/show-hint.min.js"></script> <script src="../../node_modules/codemirror/addon/hint/show-hint.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/hint/css-hint.min.js"></script> <script src="../../node_modules/codemirror/addon/hint/css-hint.js"></script>
<script src="./main.js"></script> <script src="./main.js"></script>
</body> </body>
</html> </html>

92
tests/csseditor/main.css
View File

@ -37,21 +37,24 @@ html, body {
.titlebar { .titlebar {
display: flex; display: flex;
height: 40px; height: 25px;
padding: 4px 5px;
background: #292b2f; background: #292b2f;
border-bottom: 1px solid hsla(218,5%,47%,.3); border-bottom: 1px solid hsla(218,5%,47%,.3);
user-select: none;
cursor: default;
} }
.titlebar .icon { .titlebar .icon {
width: 45px; width: 31px;
height: 40px; height: 25px;
} }
.titlebar .icon .inner { .titlebar .icon .inner {
width: 40px; width: 25px;
height: 40px; height: 25px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
background-size: 30px 30px; background-size: 22px 22px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
@ -59,11 +62,13 @@ html, body {
.titlebar .title { .titlebar .title {
color: #bac9d2; color: #bac9d2;
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
line-height: 41px; line-height: 25px;
font-size: 15px;
} }
.titlebar .controls { .titlebar .controls {
margin: 4px 4px 0 0; margin: 0 0 0 2px;
font-size: 0;
} }
.titlebar .controls button { .titlebar .controls button {
@ -77,12 +82,12 @@ html, body {
color: #bac9d2; color: #bac9d2;
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
transition: background-color .2s ease; transition: background-color .2s ease;
cursor: pointer; cursor: default;
border: 0; border: 0;
height: 25px; height: 25px;
z-index: 900062; z-index: 900062;
padding: 0; padding: 0;
margin: 0; margin: 0 0 0 4px;
} }
.titlebar .controls button:hover { .titlebar .controls button:hover {
@ -95,18 +100,18 @@ html, body {
} }
.titlebar .draggable { .titlebar .draggable {
top: 4px; top: 0;
left: 4px; left: 0;
right: 62px; right: 63px;
position: absolute; position: absolute;
height: 36px; height: 33px;
-webkit-app-region: drag; -webkit-app-region: drag;
} }
#spinner { #spinner {
background: rgba(51, 48, 48, 0.41); background: rgba(51, 48, 48, 0.41);
position: absolute; position: absolute;
top: 41px; top: 34px;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -115,6 +120,7 @@ html, body {
font-weight: 600; font-weight: 600;
font-size: 2em; font-size: 2em;
z-index: 90000; z-index: 90000;
user-select: none;
} }
.editor { .editor {
@ -129,16 +135,17 @@ html, body {
} }
.tools { .tools {
height: 60px; height: 36px;
background: #292b2f; background: #292b2f;
border-top: 1px solid hsla(218,5%,47%,.3); border-top: 1px solid hsla(218,5%,47%,.3);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
user-select: none;
} }
.tools .flex-row { .tools .flex-row {
flex-grow: 1; flex-grow: 1;
padding: 3px 0; padding: 4px 5px;
} }
.tools button { .tools button {
@ -153,7 +160,7 @@ html, body {
transition: background-color .2s ease; transition: background-color .2s ease;
cursor: pointer; cursor: pointer;
border: 0; border: 0;
margin-left: 5px; margin-right: 4px;
} }
.tools button:hover { .tools button:hover {
@ -161,15 +168,29 @@ html, body {
color: #FFF; color: #FFF;
} }
.tools #chkboxLiveUpdate span { .tools #chkboxLiveUpdate {
font-size: 12px; padding: 3px 10px;
font-weight: 600; line-height: 22px;
color: #bac9d2;
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
} }
.tools #chkboxLiveUpdate input[type="checkbox"] {
margin: 0 6px 0 0;
cursor: pointer;
}
.tools #chkboxLiveUpdate span {
font-size: 12px;
font-weight: 500;
color: #bac9d2;
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
cursor: default;
}
/*CodeMirror styling*/ /*CodeMirror styling*/
.CodeMirror-scroll {
cursor: text;
}
.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler { .CodeMirror-overlayscroll .CodeMirror-scrollbar-filler {
background: #38444a; background: #38444a;
} }
@ -179,12 +200,12 @@ html, body {
background: rgb(41, 43, 47); background: rgb(41, 43, 47);
} }
.CodeMirror-overlayscroll-horizontal , .CodeMirror-overlayscroll-horizontal,
.CodeMirror-overlayscroll-horizontal div { .CodeMirror-overlayscroll-horizontal div {
height: 10px; height: 10px;
} }
.CodeMirror-overlayscroll-vertical , .CodeMirror-overlayscroll-vertical,
.CodeMirror-overlayscroll-vertical div { .CodeMirror-overlayscroll-vertical div {
width: 10px; width: 10px;
} }
@ -199,10 +220,20 @@ html, body {
background: #36393f; background: #36393f;
} }
.CodeMirror-scroll {
cursor: text;
}
.cm-s-material .CodeMirror-gutters { .cm-s-material .CodeMirror-gutters {
background: #292b2f; background: #292b2f;
} }
.CodeMirror-gutter {
min-width: 34px;
border-right: 1px solid hsla(218,5%,47%,.3);
cursor: default;
}
.CodeMirror-hints { .CodeMirror-hints {
/*background: #1e262a;*/ /*background: #1e262a;*/
background: #292b2f; background: #292b2f;
@ -232,6 +263,15 @@ html, body {
border-color: transparent; border-color: transparent;
} }
.CodeMirror-linenumber,
.CodeMirror-line {
padding: 0 5px !important;
}
.CodeMirror-linenumber {
cursor: text;
}
.cm-s-material .CodeMirror-linenumber { .cm-s-material .CodeMirror-linenumber {
color: #f6f6f7; color: #f6f6f7;
} }
@ -251,4 +291,4 @@ li.CodeMirror-hint-active {
top: auto; top: auto;
border: none; border: none;
background: #1e262a; background: #1e262a;
} }

19
tests/csseditor/main.js
View File

@ -29,14 +29,14 @@ $closeeditor.on('click', e => window.close());
$btnSave.on('click', () => sendToDiscord("save-css", codeMirror.getValue())); $btnSave.on('click', () => sendToDiscord("save-css", codeMirror.getValue()));
$btnUpdate.on('click', () => sendToDiscord("update-css", codeMirror.getValue())); $btnUpdate.on('click', () => sendToDiscord("update-css", codeMirror.getValue()));
$chkboxLiveUpdate.on('click', () => options.liveUpdate = $chkboxLiveUpdate[0].checked); $chkboxLiveUpdate.on('change', () => options.liveUpdate = $chkboxLiveUpdate[0].checked);
BDIpc.on("set-css", (_, data) => { BDIpc.on("set-css", (_, data) => {
if (data.error) { if (data.error) {
alert(data.error); alert(data.error);
return; return;
} }
setCss(data.css); setCss(data.css);
$spinner.hide(); $spinner.hide();
}); });
@ -47,14 +47,6 @@ function setCss(css) {
function alert(message) {} function alert(message) {}
const codeMirror = CodeMirror($editor[0], { const codeMirror = CodeMirror($editor[0], {
lineNumbers: true, lineNumbers: true,
mode: 'css', mode: 'css',
@ -66,7 +58,7 @@ const codeMirror = CodeMirror($editor[0], {
}); });
codeMirror.on('change', () => { codeMirror.on('change', () => {
if (options.liveUpdate) if (options.liveUpdate)
sendToDiscord("update-css", codeMirror.getValue()); sendToDiscord("update-css", codeMirror.getValue());
}); });
@ -76,7 +68,6 @@ codeMirror.on('keyup', function (editor, event) {
CodeMirror.commands.autocomplete(editor, null, { completeSingle: false }); CodeMirror.commands.autocomplete(editor, null, { completeSingle: false });
}); });
const ExcludedIntelliSenseTriggerKeys = { const ExcludedIntelliSenseTriggerKeys = {
'8': 'backspace', '8': 'backspace',
'9': 'tab', '9': 'tab',
@ -127,4 +118,6 @@ const ExcludedIntelliSenseTriggerKeys = {
'192': 'graveaccent', '192': 'graveaccent',
'220': 'backslash', '220': 'backslash',
'222': 'quote' '222': 'quote'
} };
BDIpc.send('bd-get-css');