From ebc5a534104ce3708f5760799aaab42838078225 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sun, 24 Jul 2022 21:15:43 +0100 Subject: [PATCH 1/4] Started code-editor lang favorites system - Split bash from shell in language list - Updated code-lang highlighting to be exact match only to prevent confusion scenarios (Java matching JavaScript, etc..) - Added design for favorites - Changed blade language list to be generated from array. --- resources/js/code.mjs | 2 +- resources/js/components/code-editor.js | 6 +-- resources/sass/_components.scss | 17 ++++++ .../views/pages/parts/code-editor.blade.php | 53 +++++++------------ 4 files changed, 38 insertions(+), 40 deletions(-) diff --git a/resources/js/code.mjs b/resources/js/code.mjs index 5d4186dd0..eca941f1c 100644 --- a/resources/js/code.mjs +++ b/resources/js/code.mjs @@ -39,6 +39,7 @@ import 'codemirror/addon/scroll/scrollpastend'; // Value can be a mode string or a function that will receive the code content & return the mode string. // The function option is used in the event the exact mode could be dynamic depending on the code. const modeMap = { + bash: 'shell', css: 'css', c: 'text/x-csrc', java: 'text/x-java', @@ -88,7 +89,6 @@ const modeMap = { shell: 'shell', sh: 'shell', stext: 'text/x-stex', - bash: 'shell', toml: 'toml', ts: 'text/typescript', typescript: 'text/typescript', diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js index 27ff56395..7ed5a1cbe 100644 --- a/resources/js/components/code-editor.js +++ b/resources/js/components/code-editor.js @@ -94,15 +94,13 @@ class CodeEditor { 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); + const isMatch = inputLang === lang; link.classList.toggle('active', isMatch); - if (isMatch && !matched) { + if (isMatch) { link.scrollIntoView({block: "center", behavior: "smooth"}); - matched = true; } } } diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index 4509c2b9a..9b6d624c1 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -666,12 +666,29 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { text-align: left; font-family: $mono; font-size: 0.7rem; + padding-right: 24px + $-m; &:hover, &.active { background-color: var(--color-primary-light); color: var(--color-primary); } } +.code-editor button.lang-option-favorite-toggle { + position: absolute; + right: 0; + width: 28px; + font-size: 1rem; + border: 0; + line-height: 1; + padding: 2px; + z-index: 2; + height: 100%; + text-align: center; + svg { + margin: 0; + } +} + .code-editor label { background-color: var(--color-primary-light); width: 100%; diff --git a/resources/views/pages/parts/code-editor.blade.php b/resources/views/pages/parts/code-editor.blade.php index 4ac688692..93c76dc22 100644 --- a/resources/views/pages/parts/code-editor.blade.php +++ b/resources/views/pages/parts/code-editor.blade.php @@ -19,41 +19,24 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + @php + $languages = [ + 'Bash', 'CSS', 'C', 'C++', 'C#', 'Diff', 'Fortran', 'F#', 'Go', 'Haskell', 'HTML', 'INI', + 'Java', 'JavaScript', 'JSON', 'Julia', 'Kotlin', 'LaTeX', 'Lua', 'MarkDown', 'Nginx', 'OCaml', + 'Pascal', 'Perl', 'PHP', 'Powershell', 'Python', 'Ruby', 'Rust', 'Shell', 'SQL', 'TypeScript', + 'VBScript', 'VB.NET', 'XML', 'YAML', + ]; + @endphp + + @foreach($languages as $language) +
+ + +
+ @endforeach
From 0df5ae0658b5ff409c2cc3d3da278692f80c790d Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Mon, 25 Jul 2022 13:10:27 +0100 Subject: [PATCH 2/4] Added core code-lang-favourites JS, PHP & CSS logic - Got the functionality now working to favourite items and store that status within the system for the user. - Improved CSS display for usability. --- app/Http/Controllers/UserController.php | 21 ++++++++++ resources/js/components/code-editor.js | 39 +++++++++++++++++++ resources/sass/_components.scss | 11 +++++- .../views/pages/parts/code-editor.blade.php | 12 +++--- routes/web.php | 1 + 5 files changed, 76 insertions(+), 8 deletions(-) diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php index 2c9203687..9a2f2c867 100644 --- a/app/Http/Controllers/UserController.php +++ b/app/Http/Controllers/UserController.php @@ -289,6 +289,27 @@ class UserController extends Controller return response('', 204); } + public function updateCodeLanguageFavourite(Request $request) + { + $validated = $this->validate($request, [ + 'language' => ['required', 'string', 'max:20'], + 'active' => ['required', 'bool'], + ]); + + $currentFavoritesStr = setting()->getForCurrentUser('code-language-favourites', ''); + $currentFavorites = array_filter(explode(',', $currentFavoritesStr)); + + $isFav = in_array($validated['language'], $currentFavorites); + if (!$isFav && $validated['active']) { + $currentFavorites[] = $validated['language']; + } else if ($isFav && !$validated['active']) { + $index = array_search($validated['language'], $currentFavorites); + array_splice($currentFavorites, $index, 1); + } + + setting()->putUser(user(), 'code-language-favourites', implode(',', $currentFavorites)); + } + /** * Changed the stored preference for a list sort order. */ diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js index 7ed5a1cbe..022deafef 100644 --- a/resources/js/components/code-editor.js +++ b/resources/js/components/code-editor.js @@ -15,12 +15,14 @@ class CodeEditor { this.languageInput = this.$refs.languageInput; this.historyDropDown = this.$refs.historyDropDown; this.historyList = this.$refs.historyList; + this.favourites = new Set(this.$opts.favourites.split(',')); this.callback = null; this.editor = null; this.history = {}; this.historyKey = 'code_history'; this.setupListeners(); + this.setupFavourites(); } setupListeners() { @@ -49,6 +51,43 @@ class CodeEditor { }); } + setupFavourites() { + for (const button of this.languageLinks) { + this.setupFavouritesForButton(button); + } + + this.sortLanguageList(); + } + + /** + * @param {HTMLButtonElement} button + */ + setupFavouritesForButton(button) { + const language = button.dataset.lang; + let isFavorite = this.favourites.has(language); + button.setAttribute('data-favourite', isFavorite ? 'true' : 'false'); + + onChildEvent(button.parentElement, '.lang-option-favorite-toggle', 'click', () => { + isFavorite = !isFavorite; + isFavorite ? this.favourites.add(language) : this.favourites.delete(language); + button.setAttribute('data-favourite', isFavorite ? 'true' : 'false'); + + window.$http.patch('/settings/users/update-code-language-favourite', { + language: language, + active: isFavorite + }); + + this.sortLanguageList(); + if (isFavorite) { + button.scrollIntoView({block: "center", behavior: "smooth"}); + } + }); + } + + sortLanguageList() { + // TODO + } + save() { if (this.callback) { this.callback(this.editor.getValue(), this.languageInput.value); diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index 9b6d624c1..74a3ac8bc 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -666,7 +666,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { text-align: left; font-family: $mono; font-size: 0.7rem; - padding-right: 24px + $-m; + padding-left: 24px + $-s; &:hover, &.active { background-color: var(--color-primary-light); color: var(--color-primary); @@ -675,7 +675,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { .code-editor button.lang-option-favorite-toggle { position: absolute; - right: 0; + top: 0; + left: 0; width: 28px; font-size: 1rem; border: 0; @@ -684,11 +685,17 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { z-index: 2; height: 100%; text-align: center; + color: var(--color-primary); svg { margin: 0; } } +.code-editor button[data-favourite="true"] ~ .action-favourite, +.code-editor button[data-favourite="false"] ~ .action-unfavourite { + display: none; +} + .code-editor label { background-color: var(--color-primary-light); width: 100%; diff --git a/resources/views/pages/parts/code-editor.blade.php b/resources/views/pages/parts/code-editor.blade.php index 93c76dc22..1ae85957c 100644 --- a/resources/views/pages/parts/code-editor.blade.php +++ b/resources/views/pages/parts/code-editor.blade.php @@ -1,5 +1,7 @@
-