Merge pull request #34 from samuelthomas2774/css-editor

CSS editor tweaks Fixes #14
2018-01-22 08:43:36 +02:00 · 2018-01-22 08:43:36 +02:00 · 43fb6eb2c9
parent 5d07d9b429 10ea33f270
commit 43fb6eb2c9
6 changed files with 101 additions and 65 deletions
--- a/core/src/modules/csseditor.js
+++ b/core/src/modules/csseditor.js
@ -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', () => {
--- 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"
  }
 }
--- a/tests/csseditor/index.html
+++ b/tests/csseditor/index.html
@ -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>
--- 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;
 }
--- a/tests/csseditor/main.js
+++ b/tests/csseditor/main.js
@ -29,7 +29,7 @@ $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) {
@ -47,14 +47,6 @@ function setCss(css) {

 function alert(message) {}

-
-
-
-
-
-
-
-
 const codeMirror = CodeMirror($editor[0], {
    lineNumbers: true,
    mode: 'css',
@ -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');