From 96d907747991c3cfd69767ff78bc41abede2e939 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Mon, 20 Jun 2022 13:42:12 +0100 Subject: [PATCH 1/7] Started design changes to the code-editor --- resources/sass/_components.scss | 47 +++++++++- .../views/pages/parts/code-editor.blade.php | 94 +++++++++---------- 2 files changed, 85 insertions(+), 56 deletions(-) diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index e3c9d5eea..aba79bac2 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -166,6 +166,9 @@ color: #FFF; padding: 8px $-m; } + &.flex-container-row { + display: flex !important; + } } body.flexbox-support #entity-selector-wrap .popup-body .form-group { height: 444px; @@ -634,14 +637,48 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { } .code-editor .lang-options { - max-width: 540px; - margin-bottom: $-s; - a { - margin-inline-end: $-xs; - text-decoration: underline; + overflow-y: scroll; +} + +.code-editor .lang-options button { + display: block; + padding: $-xs $-m; + border-bottom: 1px solid #eee; + width: 100%; + text-align: left; + font-family: $mono; + font-size: 0.7rem; + &:hover { + background-color: var(--color-primary-light); + color: var(--color-primary); } } +.code-editor label { + background-color: var(--color-primary-light); + width: 100%; + color: var(--color-primary); + padding: $-xxs $-m; +} + +.code-editor-language-list { + flex-basis: 200px; + border-right: 1px solid #DDD; + box-shadow: $bs-card; +} + +.code-editor-language-list input { + border-radius: 0; + border: 0; + border-bottom: 1px solid #DDD; +} + +.code-editor-main { + flex: 1; + height: 100%; + overflow-y: scroll; +} + @include smaller-than($m) { .code-editor .lang-options { max-width: 100%; diff --git a/resources/views/pages/parts/code-editor.blade.php b/resources/views/pages/parts/code-editor.blade.php index 8f4e7652c..676d3799f 100644 --- a/resources/views/pages/parts/code-editor.blade.php +++ b/resources/views/pages/parts/code-editor.blade.php @@ -2,69 +2,61 @@
-
+
{{ trans('components.code_editor') }}
+
+ +
    +
    -
    -
    +
    +
    -
    - - CSS - C - C++ - C# - Fortran - Go - HTML - INI - Java - JavaScript - JSON - LaTeX - Lua - MarkDown - Nginx - Pascal - Perl - PHP - Powershell - Python - Ruby - Shell/Bash - SQL - VBScript - VB.NET - XML - YAML - -
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    -
    -
    -
    - -
    -
    -
    - -
      -
      -
      -
      - -
      +
      -
      - -
      +
      +
      +
      From 77cd550faedabecf7b1073ccc9c11398851e2cae Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Mon, 20 Jun 2022 17:11:34 +0100 Subject: [PATCH 2/7] Polished up code editor design --- resources/js/components/code-editor.js | 21 +++++- resources/sass/_components.scss | 66 ++++++++++++------- .../views/pages/parts/code-editor.blade.php | 10 +-- 3 files changed, 66 insertions(+), 31 deletions(-) diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js index 4ee3531c5..27ff56395 100644 --- a/resources/js/components/code-editor.js +++ b/resources/js/components/code-editor.js @@ -33,10 +33,11 @@ class CodeEditor { onSelect(this.languageLinks, event => { const language = event.target.dataset.lang; this.languageInput.value = language; - this.updateEditorMode(language); + this.languageInputChange(language); }); onEnterPress(this.languageInput, e => this.save()); + this.languageInput.addEventListener('input', e => this.languageInputChange(this.languageInput.value)); onSelect(this.saveButton, e => this.save()); onChildEvent(this.historyList, 'button', 'click', (event, elem) => { @@ -60,7 +61,7 @@ class CodeEditor { this.callback = callback; this.show() - .then(() => this.updateEditorMode(language)) + .then(() => this.languageInputChange(language)) .then(() => window.importVersioned('code')) .then(Code => Code.setContent(this.editor, code)); } @@ -90,6 +91,22 @@ class CodeEditor { Code.setMode(this.editor, language, this.editor.getValue()); } + languageInputChange(language) { + this.updateEditorMode(language); + const inputLang = language.toLowerCase(); + let matched = false; + + for (const link of this.languageLinks) { + const lang = link.dataset.lang.toLowerCase().trim(); + const isMatch = inputLang && lang.startsWith(inputLang); + link.classList.toggle('active', isMatch); + if (isMatch && !matched) { + link.scrollIntoView({block: "center", behavior: "smooth"}); + matched = true; + } + } + } + loadHistory() { this.history = JSON.parse(window.sessionStorage.getItem(this.historyKey) || '{}'); const historyKeys = Object.keys(this.history).reverse(); diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index aba79bac2..c0a418a8e 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -1,3 +1,4 @@ + // System wide notifications [notification] { position: fixed; @@ -137,33 +138,47 @@ } } -.popup-footer button, .popup-header-close { - position: absolute; - top: 0; - right: 0; +.popup-header button, .popup-footer button { margin: 0; - height: 40px; border-radius: 0; box-shadow: none; - &:active { - outline: 0; + color: #FFF; + padding: $-xs $-m; +} + +.popup-header button:not(.popup-header-close) { + font-size: 0.8rem; +} + +.popup-header button:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +.popup-footer { + justify-content: end; + button { + padding: 10px $-m; } } + .popup-header-close { - background-color: transparent; border: 0; color: #FFF; font-size: 16px; - padding: 0 $-m; + cursor: pointer; + svg { + margin-right: 0; + } } .popup-header, .popup-footer { - display: block !important; + display: flex; position: relative; height: 40px; - flex: none !important; + flex: 0; .popup-title { color: #FFF; + margin-right: auto; padding: 8px $-m; } &.flex-container-row { @@ -633,11 +648,15 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { } .code-editor .CodeMirror { - height: 400px; + height: auto; + min-height: 50vh; + border-bottom: 0; } .code-editor .lang-options { overflow-y: scroll; + flex-basis: 200px; + flex-grow: 1; } .code-editor .lang-options button { @@ -648,7 +667,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { text-align: left; font-family: $mono; font-size: 0.7rem; - &:hover { + &:hover, &.active { background-color: var(--color-primary-light); color: var(--color-primary); } @@ -659,32 +678,31 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { width: 100%; color: var(--color-primary); padding: $-xxs $-m; + margin-bottom: 0; } .code-editor-language-list { + position: relative; flex-basis: 200px; - border-right: 1px solid #DDD; - box-shadow: $bs-card; + z-index: 2; + align-items: stretch; } .code-editor-language-list input { border-radius: 0; border: 0; border-bottom: 1px solid #DDD; + padding: $-xs $-m; } .code-editor-main { flex: 1; - height: 100%; - overflow-y: scroll; -} - -@include smaller-than($m) { - .code-editor .lang-options { + min-width: 0; + .CodeMirror { + margin-bottom: 0; + z-index: 1; max-width: 100%; - } - .code-editor .CodeMirror { - height: 200px; + width: 100%; } } diff --git a/resources/views/pages/parts/code-editor.blade.php b/resources/views/pages/parts/code-editor.blade.php index 676d3799f..2224209b1 100644 --- a/resources/views/pages/parts/code-editor.blade.php +++ b/resources/views/pages/parts/code-editor.blade.php @@ -4,17 +4,17 @@
      {{ trans('components.code_editor') }}
      -
      -
        - +
        -
        +
        @@ -49,7 +49,7 @@
        -
        +
        From f39b565a1cb2a330c33c497f8a49295a1d087cc1 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Mon, 20 Jun 2022 17:16:28 +0100 Subject: [PATCH 3/7] Tweaked code editor sidebar side to be smaller --- resources/sass/_components.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index c0a418a8e..0f584c408 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -683,7 +683,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { .code-editor-language-list { position: relative; - flex-basis: 200px; + width: 160px; z-index: 2; align-items: stretch; } From 1e41546e51cbb11540af09a814c05c80ed172b30 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Mon, 20 Jun 2022 17:49:56 +0100 Subject: [PATCH 4/7] Updated code editor language lists To align and update supported languages. Related to #3511 and #3494 --- resources/js/code.mjs | 16 ++++++++++------ .../views/pages/parts/code-editor.blade.php | 8 ++++++++ 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/resources/js/code.mjs b/resources/js/code.mjs index 0b8190379..5d4186dd0 100644 --- a/resources/js/code.mjs +++ b/resources/js/code.mjs @@ -50,16 +50,18 @@ const modeMap = { diff: 'diff', for: 'fortran', fortran: 'fortran', + 'f#': 'text/x-fsharp', + fsharp: 'text/x-fsharp', go: 'go', haskell: 'haskell', hs: 'haskell', html: 'htmlmixed', ini: 'properties', - javascript: 'javascript', - json: {name: 'javascript', json: true}, - js: 'javascript', - jl: 'julia', - julia: 'julia', + javascript: 'text/javascript', + json: 'application/json', + js: 'text/javascript', + jl: 'text/x-julia', + julia: 'text/x-julia', latex: 'text/x-stex', lua: 'lua', md: 'markdown', @@ -71,7 +73,7 @@ const modeMap = { pl: 'perl', powershell: 'powershell', properties: 'properties', - ocaml: 'mllike', + ocaml: 'text/x-ocaml', pascal: 'text/x-pascal', pas: 'text/x-pascal', php: (content) => { @@ -88,6 +90,8 @@ const modeMap = { stext: 'text/x-stex', bash: 'shell', toml: 'toml', + ts: 'text/typescript', + typescript: 'text/typescript', sql: 'text/x-sql', vbs: 'vbscript', vbscript: 'vbscript', diff --git a/resources/views/pages/parts/code-editor.blade.php b/resources/views/pages/parts/code-editor.blade.php index 2224209b1..7c3a7b9ec 100644 --- a/resources/views/pages/parts/code-editor.blade.php +++ b/resources/views/pages/parts/code-editor.blade.php @@ -23,25 +23,33 @@ + + + + + + + + From 75110813e66b3c348e838adac130a8e671fb6966 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Mon, 20 Jun 2022 23:02:06 +0100 Subject: [PATCH 5/7] Aligned other popup windows Primary change was altering image-manager to use same footer bar style as other windows. --- resources/sass/_components.scss | 8 ++------ resources/views/common/confirm-dialog.blade.php | 2 +- resources/views/entities/selector-popup.blade.php | 4 ++-- resources/views/pages/parts/code-editor.blade.php | 4 ++-- resources/views/pages/parts/image-manager.blade.php | 12 +++++++----- 5 files changed, 14 insertions(+), 16 deletions(-) diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index 0f584c408..03411301b 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -156,6 +156,8 @@ .popup-footer { justify-content: end; + background-color: var(--color-primary-light); + min-height: 41px; button { padding: 10px $-m; } @@ -316,12 +318,6 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { } } -.image-manager .corner-button { - margin: 0; - border-radius: 0; - padding: $-m; -} - // Dropzone /* * The MIT License diff --git a/resources/views/common/confirm-dialog.blade.php b/resources/views/common/confirm-dialog.blade.php index 28587d4e8..8e4148b88 100644 --- a/resources/views/common/confirm-dialog.blade.php +++ b/resources/views/common/confirm-dialog.blade.php @@ -5,7 +5,7 @@
        {{ $title }}
        - +
        diff --git a/resources/views/entities/selector-popup.blade.php b/resources/views/entities/selector-popup.blade.php index ab73a014f..c896b50b5 100644 --- a/resources/views/entities/selector-popup.blade.php +++ b/resources/views/entities/selector-popup.blade.php @@ -3,11 +3,11 @@
        {{ trans('entities.entity_select') }}
        - +
        @include('entities.selector', ['name' => 'entity-selector'])
        - +
        diff --git a/resources/views/pages/parts/code-editor.blade.php b/resources/views/pages/parts/code-editor.blade.php index 7c3a7b9ec..9c10456ce 100644 --- a/resources/views/pages/parts/code-editor.blade.php +++ b/resources/views/pages/parts/code-editor.blade.php @@ -63,8 +63,8 @@
        -
        - +
        +
        diff --git a/resources/views/pages/parts/image-manager.blade.php b/resources/views/pages/parts/image-manager.blade.php index c15c31b86..50a0cd8c3 100644 --- a/resources/views/pages/parts/image-manager.blade.php +++ b/resources/views/pages/parts/image-manager.blade.php @@ -9,7 +9,7 @@
        {{ trans('components.image_select') }}
        - +
        @@ -53,14 +53,16 @@
        - -
        +
        + +
        +
        \ No newline at end of file From d181106df3458a1921ff5ce9d63febbe26392cea Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Mon, 20 Jun 2022 23:06:54 +0100 Subject: [PATCH 6/7] Adjusted code manager changes for dark mode --- resources/sass/_components.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index 03411301b..fe04784b2 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -658,7 +658,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { .code-editor .lang-options button { display: block; padding: $-xs $-m; - border-bottom: 1px solid #eee; + border-bottom: 1px solid; + @include lightDark(color, #333, #AAA); + @include lightDark(border-bottom-color, #EEE, #000); + cursor: pointer; width: 100%; text-align: left; font-family: $mono; From 7d4b941abfe15614506d130f85e35ba11fed5227 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Mon, 20 Jun 2022 23:12:07 +0100 Subject: [PATCH 7/7] Added code editor changes mobile design handling --- resources/sass/_components.scss | 12 ++++++++++++ resources/views/pages/parts/code-editor.blade.php | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index fe04784b2..4509c2b9a 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -705,6 +705,18 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { } } +@include smaller-than($s) { + .code-editor .lang-options { + display: none; + } + .code-editor-body-wrap { + flex-direction: column; + } + .code-editor-language-list, .code-editor-language-list input { + width: 100%; + } +} + .comment-box { border-radius: 4px; border: 1px solid #DDD; diff --git a/resources/views/pages/parts/code-editor.blade.php b/resources/views/pages/parts/code-editor.blade.php index 9c10456ce..4ac688692 100644 --- a/resources/views/pages/parts/code-editor.blade.php +++ b/resources/views/pages/parts/code-editor.blade.php @@ -14,7 +14,7 @@
        -
        +