From 731d18e4dab65cc60c461c6d5727858385217882 Mon Sep 17 00:00:00 2001 From: Samuel Elliott Date: Mon, 22 Jan 2018 00:02:19 +0000 Subject: [PATCH] CSS editor tweaks and fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Load CodeMirror locally - CSS tweaks - editor window look more native now - Fixed bug where the live update checkbox can’t be unchecked --- core/src/modules/csseditor.js | 7 ++- core/src/modules/index.js | 2 +- package.json | 7 +-- tests/csseditor/index.html | 35 +++++++------ tests/csseditor/main.css | 92 +++++++++++++++++++++++++---------- tests/csseditor/main.js | 19 +++----- 6 files changed, 99 insertions(+), 63 deletions(-) diff --git a/core/src/modules/csseditor.js b/core/src/modules/csseditor.js index 941d0ca4..e58fea32 100644 --- a/core/src/modules/csseditor.js +++ b/core/src/modules/csseditor.js @@ -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,6 +16,8 @@ const { Module } = require('./modulebase'); class CSSEditor extends Module { openEditor(o) { + if (this.editor && this.editor.isFocused()) return; + if (this.editor && this.editor.open) { this.editor.focus(); this.editor.flashFrame(true); @@ -26,6 +28,7 @@ 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; @@ -60,4 +63,4 @@ class CSSEditor extends Module { } -module.exports = { 'CSSEditor': new CSSEditor() }; \ No newline at end of file +module.exports = { 'CSSEditor': new CSSEditor() }; diff --git a/core/src/modules/index.js b/core/src/modules/index.js index 8a2670f0..a2e0d7bc 100644 --- a/core/src/modules/index.js +++ b/core/src/modules/index.js @@ -1,4 +1,4 @@ export { BDIpc } from './bdipc'; export { Utils, FileUtils, WindowUtils } from './utils'; export { Config } from './config'; -export { CSSEditor } from './csseditor'; \ No newline at end of file +export { CSSEditor } from './csseditor'; diff --git a/package.json b/package.json index c0cfc6cd..97ac790d 100644 --- a/package.json +++ b/package.json @@ -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" } -} \ No newline at end of file +} diff --git a/tests/csseditor/index.html b/tests/csseditor/index.html index c132584f..13e21507 100644 --- a/tests/csseditor/index.html +++ b/tests/csseditor/index.html @@ -1,11 +1,11 @@ CSS Editor - - - - - + + + + + @@ -29,23 +29,22 @@
+
Live Update
-
-
- - - - - - - - - - + + + + + + + + + + - \ No newline at end of file + diff --git a/tests/csseditor/main.css b/tests/csseditor/main.css index d74bb8cf..5124957f 100644 --- a/tests/csseditor/main.css +++ b/tests/csseditor/main.css @@ -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; -} \ No newline at end of file +} diff --git a/tests/csseditor/main.js b/tests/csseditor/main.js index ffd6c535..a9f23d58 100644 --- a/tests/csseditor/main.js +++ b/tests/csseditor/main.js @@ -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' -} \ No newline at end of file +}; + +BDIpc.send('bd-get-css');