Merge pull request #34 from samuelthomas2774/css-editor
CSS editor tweaks Fixes #14
This commit is contained in:
Alexei Stukov
GitHub
commit
43fb6eb2c9
|
|
@ -5,7 +5,7 @@
|
|||
* https://github.com/JsSucks - 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.
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const path = require('path');
|
||||
|
|
@ -16,7 +16,9 @@ const { Module } = require('./modulebase');
|
|||
class CSSEditor extends Module {
|
||||
|
||||
openEditor(o) {
|
||||
if (this.editor && this.editor.open) {
|
||||
if (this.editor) {
|
||||
if (this.editor.isFocused()) return;
|
||||
|
||||
this.editor.focus();
|
||||
this.editor.flashFrame(true);
|
||||
o.reply(true);
|
||||
|
|
@ -26,9 +28,10 @@ class CSSEditor extends Module {
|
|||
this.editor = new BrowserWindow(this.options);
|
||||
this.editor.loadURL(`file://${this.editorPath}/index.html`);
|
||||
this.editor.open = true;
|
||||
this.editor.setSheetOffset(33);
|
||||
|
||||
this.editor.webContents.on('close', () => {
|
||||
this.editor.open = false;
|
||||
this.editor = null;
|
||||
});
|
||||
|
||||
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() };
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export { BDIpc } from './bdipc';
|
||||
export { Utils, FileUtils, WindowUtils } from './utils';
|
||||
export { Config } from './config';
|
||||
export { CSSEditor } from './csseditor';
|
||||
export { CSSEditor } from './csseditor';
|
||||
|
|
|
|||
|
|
@ -34,12 +34,13 @@
|
|||
"gulp-babel": "^7.0.0",
|
||||
"pump": "^2.0.0",
|
||||
"gulp-plumber": "^1.2.0",
|
||||
"gulp-watch": "^5.0.0"
|
||||
"gulp-watch": "^5.0.0",
|
||||
"codemirror": "^5.23.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cd ./client && npm run build && cd ../core && npm run build",
|
||||
"watch_client": "cd ./client && npm run watch",
|
||||
"watch_core": "cd ./core && npm run watch",
|
||||
"test": "npm run build"
|
||||
"test": "npm run build"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<html>
|
||||
<head>
|
||||
<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="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/theme/material.min.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/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="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/hint/show-hint.min.css" />
|
||||
<link rel="stylesheet" href="../../node_modules/codemirror/lib/codemirror.css" />
|
||||
<link rel="stylesheet" href="../../node_modules/codemirror/theme/material.css" />
|
||||
<link rel="stylesheet" href="../../node_modules/codemirror/addon/scroll/simplescrollbars.css" />
|
||||
<link rel="stylesheet" href="../../node_modules/codemirror/addon/dialog/dialog.css" />
|
||||
<link rel="stylesheet" href="../../node_modules/codemirror/addon/hint/show-hint.css" />
|
||||
<link rel="stylesheet" href="./main.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -29,23 +29,22 @@
|
|||
<div class="flex-row">
|
||||
<button id="btnSave">Save</button>
|
||||
<button id="btnUpdate">Update</button>
|
||||
<div class="flex-spacer"></div>
|
||||
<div id="chkboxLiveUpdate"><input type="checkbox"><span>Live Update</span></div>
|
||||
</div>
|
||||
<div class="flex-row">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/codemirror.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/css/css.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/scroll/simplescrollbars.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/search/search.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/search/searchcursor.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/search/jump-to-line.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/dialog/dialog.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/hint/show-hint.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/hint/css-hint.min.js"></script>
|
||||
<script>const $ = require('../../node_modules/jquery/dist/jquery.min.js');</script>
|
||||
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
|
||||
<script src="../../node_modules/codemirror/mode/css/css.js"></script>
|
||||
<script src="../../node_modules/codemirror/addon/scroll/simplescrollbars.js"></script>
|
||||
<script src="../../node_modules/codemirror/addon/search/search.js"></script>
|
||||
<script src="../../node_modules/codemirror/addon/search/searchcursor.js"></script>
|
||||
<script src="../../node_modules/codemirror/addon/search/jump-to-line.js"></script>
|
||||
<script src="../../node_modules/codemirror/addon/dialog/dialog.js"></script>
|
||||
<script src="../../node_modules/codemirror/addon/hint/show-hint.js"></script>
|
||||
<script src="../../node_modules/codemirror/addon/hint/css-hint.js"></script>
|
||||
<script src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -37,21 +37,24 @@ html, body {
|
|||
|
||||
.titlebar {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
height: 25px;
|
||||
padding: 4px 5px;
|
||||
background: #292b2f;
|
||||
border-bottom: 1px solid hsla(218,5%,47%,.3);
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.titlebar .icon {
|
||||
width: 45px;
|
||||
height: 40px;
|
||||
width: 31px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.titlebar .icon .inner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
background-size: 30px 30px;
|
||||
background-size: 22px 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
|
@ -59,11 +62,13 @@ html, body {
|
|||
.titlebar .title {
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
line-height: 41px;
|
||||
line-height: 25px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.titlebar .controls {
|
||||
margin: 4px 4px 0 0;
|
||||
margin: 0 0 0 2px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.titlebar .controls button {
|
||||
|
|
@ -77,12 +82,12 @@ html, body {
|
|||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
transition: background-color .2s ease;
|
||||
cursor: pointer;
|
||||
cursor: default;
|
||||
border: 0;
|
||||
height: 25px;
|
||||
z-index: 900062;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
|
||||
.titlebar .controls button:hover {
|
||||
|
|
@ -95,18 +100,18 @@ html, body {
|
|||
}
|
||||
|
||||
.titlebar .draggable {
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
right: 62px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 63px;
|
||||
position: absolute;
|
||||
height: 36px;
|
||||
height: 33px;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
#spinner {
|
||||
background: rgba(51, 48, 48, 0.41);
|
||||
position: absolute;
|
||||
top: 41px;
|
||||
top: 34px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -115,6 +120,7 @@ html, body {
|
|||
font-weight: 600;
|
||||
font-size: 2em;
|
||||
z-index: 90000;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.editor {
|
||||
|
|
@ -129,16 +135,17 @@ html, body {
|
|||
}
|
||||
|
||||
.tools {
|
||||
height: 60px;
|
||||
height: 36px;
|
||||
background: #292b2f;
|
||||
border-top: 1px solid hsla(218,5%,47%,.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tools .flex-row {
|
||||
flex-grow: 1;
|
||||
padding: 3px 0;
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
.tools button {
|
||||
|
|
@ -153,7 +160,7 @@ html, body {
|
|||
transition: background-color .2s ease;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
margin-left: 5px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.tools button:hover {
|
||||
|
|
@ -161,15 +168,29 @@ html, body {
|
|||
color: #FFF;
|
||||
}
|
||||
|
||||
.tools #chkboxLiveUpdate span {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
.tools #chkboxLiveUpdate {
|
||||
padding: 3px 10px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.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-scroll {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler {
|
||||
background: #38444a;
|
||||
}
|
||||
|
|
@ -179,12 +200,12 @@ html, body {
|
|||
background: rgb(41, 43, 47);
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-horizontal ,
|
||||
.CodeMirror-overlayscroll-horizontal,
|
||||
.CodeMirror-overlayscroll-horizontal div {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-vertical ,
|
||||
.CodeMirror-overlayscroll-vertical,
|
||||
.CodeMirror-overlayscroll-vertical div {
|
||||
width: 10px;
|
||||
}
|
||||
|
|
@ -199,10 +220,20 @@ html, body {
|
|||
background: #36393f;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-gutters {
|
||||
background: #292b2f;
|
||||
}
|
||||
|
||||
.CodeMirror-gutter {
|
||||
min-width: 34px;
|
||||
border-right: 1px solid hsla(218,5%,47%,.3);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.CodeMirror-hints {
|
||||
/*background: #1e262a;*/
|
||||
background: #292b2f;
|
||||
|
|
@ -232,6 +263,15 @@ html, body {
|
|||
border-color: transparent;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber,
|
||||
.CodeMirror-line {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-linenumber {
|
||||
color: #f6f6f7;
|
||||
}
|
||||
|
|
@ -251,4 +291,4 @@ li.CodeMirror-hint-active {
|
|||
top: auto;
|
||||
border: none;
|
||||
background: #1e262a;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,14 +29,14 @@ $closeeditor.on('click', e => window.close());
|
|||
|
||||
$btnSave.on('click', () => sendToDiscord("save-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) => {
|
||||
if (data.error) {
|
||||
alert(data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
setCss(data.css);
|
||||
$spinner.hide();
|
||||
});
|
||||
|
|
@ -47,14 +47,6 @@ function setCss(css) {
|
|||
|
||||
function alert(message) {}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const codeMirror = CodeMirror($editor[0], {
|
||||
lineNumbers: true,
|
||||
mode: 'css',
|
||||
|
|
@ -66,7 +58,7 @@ const codeMirror = CodeMirror($editor[0], {
|
|||
});
|
||||
|
||||
codeMirror.on('change', () => {
|
||||
if (options.liveUpdate)
|
||||
if (options.liveUpdate)
|
||||
sendToDiscord("update-css", codeMirror.getValue());
|
||||
});
|
||||
|
||||
|
|
@ -76,7 +68,6 @@ codeMirror.on('keyup', function (editor, event) {
|
|||
CodeMirror.commands.autocomplete(editor, null, { completeSingle: false });
|
||||
});
|
||||
|
||||
|
||||
const ExcludedIntelliSenseTriggerKeys = {
|
||||
'8': 'backspace',
|
||||
'9': 'tab',
|
||||
|
|
@ -127,4 +118,6 @@ const ExcludedIntelliSenseTriggerKeys = {
|
|||
'192': 'graveaccent',
|
||||
'220': 'backslash',
|
||||
'222': 'quote'
|
||||
}
|
||||
};
|
||||
|
||||
BDIpc.send('bd-get-css');
|
||||
|
|
|
|||
Loading…
Reference in New Issue