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/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 e3c9d5eea..4509c2b9a 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -1,3 +1,4 @@ + // System wide notifications [notification] { position: fixed; @@ -137,35 +138,54 @@ } } -.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; + background-color: var(--color-primary-light); + min-height: 41px; + 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 { + display: flex !important; + } } body.flexbox-support #entity-selector-wrap .popup-body .form-group { height: 444px; @@ -298,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 @@ -630,24 +644,76 @@ 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 { - max-width: 540px; - margin-bottom: $-s; - a { - margin-inline-end: $-xs; - text-decoration: underline; + overflow-y: scroll; + flex-basis: 200px; + flex-grow: 1; +} + +.code-editor .lang-options button { + display: block; + padding: $-xs $-m; + 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; + font-size: 0.7rem; + &:hover, &.active { + background-color: var(--color-primary-light); + color: var(--color-primary); } } -@include smaller-than($m) { - .code-editor .lang-options { +.code-editor label { + background-color: var(--color-primary-light); + width: 100%; + color: var(--color-primary); + padding: $-xxs $-m; + margin-bottom: 0; +} + +.code-editor-language-list { + position: relative; + width: 160px; + 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; + min-width: 0; + .CodeMirror { + margin-bottom: 0; + z-index: 1; max-width: 100%; + width: 100%; } - .code-editor .CodeMirror { - height: 200px; +} + +@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%; } } 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 8f4e7652c..4ac688692 100644 --- a/resources/views/pages/parts/code-editor.blade.php +++ b/resources/views/pages/parts/code-editor.blade.php @@ -2,69 +2,69 @@
-
+
{{ 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 - -
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    -
    -
    -
    - -
    -
    -
    - -
      -
      -
      -
      - -
      +
      -
      - -
      +
      +
      +
      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