From 8e5f7c642527fd25f4c62d2dad6c878128226c87 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Mon, 25 Jul 2022 19:13:25 +0100
Subject: [PATCH] Added language list favourites sorting, updated styles

- Also made code box be greedier with vertical space.
---
 resources/js/components/code-editor.js        | 26 +++++++++++++++----
 resources/sass/_components.scss               | 18 ++++++++++---
 .../views/pages/parts/code-editor.blade.php   |  4 +--
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js
index 022deafef..2d8031205 100644
--- a/resources/js/components/code-editor.js
+++ b/resources/js/components/code-editor.js
@@ -10,7 +10,8 @@ class CodeEditor {
         this.container = this.$refs.container;
         this.popup = this.$el;
         this.editorInput = this.$refs.editor;
-        this.languageLinks = this.$manyRefs.languageLink;
+        this.languageButtons = this.$manyRefs.languageButton;
+        this.languageOptionsContainer = this.$refs.languageOptionsContainer;
         this.saveButton = this.$refs.saveButton;
         this.languageInput = this.$refs.languageInput;
         this.historyDropDown = this.$refs.historyDropDown;
@@ -32,7 +33,7 @@ class CodeEditor {
             }
         });
 
-        onSelect(this.languageLinks, event => {
+        onSelect(this.languageButtons, event => {
             const language = event.target.dataset.lang;
             this.languageInput.value = language;
             this.languageInputChange(language);
@@ -52,7 +53,7 @@ class CodeEditor {
     }
 
     setupFavourites() {
-        for (const button of this.languageLinks) {
+        for (const button of this.languageButtons) {
             this.setupFavouritesForButton(button);
         }
 
@@ -85,7 +86,22 @@ class CodeEditor {
     }
 
     sortLanguageList() {
-        // TODO
+        const sortedParents = this.languageButtons.sort((a, b) => {
+            const aFav = a.dataset.favourite === 'true';
+            const bFav = b.dataset.favourite === 'true';
+
+            if (aFav && !bFav) {
+                return -1;
+            } else if (bFav && !aFav) {
+                return 1;
+            }
+
+            return a.dataset.lang > b.dataset.lang ? 1 : -1;
+        }).map(button => button.parentElement);
+
+        for (const parent of sortedParents) {
+            this.languageOptionsContainer.append(parent);
+        }
     }
 
     save() {
@@ -134,7 +150,7 @@ class CodeEditor {
         this.updateEditorMode(language);
         const inputLang = language.toLowerCase();
 
-        for (const link of this.languageLinks) {
+        for (const link of this.languageButtons) {
             const lang = link.dataset.lang.toLowerCase().trim();
             const isMatch = inputLang === lang;
             link.classList.toggle('active', isMatch);
diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index 74a3ac8bc..cbaf17760 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-left: 24px + $-s;
+  padding-left: 24px + $-xs;
   &:hover, &.active {
     background-color: var(--color-primary-light);
     color: var(--color-primary);
@@ -696,11 +696,18 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   display: none;
 }
 
+.code-editor .action-favourite {
+  opacity: 0.5;
+}
+.code-editor button:hover ~ .action-favourite {
+  opacity: 1;
+}
+
 .code-editor label {
   background-color: var(--color-primary-light);
   width: 100%;
   color: var(--color-primary);
-  padding: $-xxs $-m;
+  padding: $-xxs $-s;
   margin-bottom: 0;
 }
 
@@ -715,7 +722,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   border-radius: 0;
   border: 0;
   border-bottom: 1px solid #DDD;
-  padding: $-xs $-m;
+  padding: $-xs $-s;
+  height: auto;
 }
 
 .code-editor-main {
@@ -729,6 +737,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   }
 }
 
+.code-editor-body-wrap {
+  height: 80vh;
+}
+
 @include smaller-than($s) {
   .code-editor .lang-options {
     display: none;
diff --git a/resources/views/pages/parts/code-editor.blade.php b/resources/views/pages/parts/code-editor.blade.php
index 1ae85957c..e86282d73 100644
--- a/resources/views/pages/parts/code-editor.blade.php
+++ b/resources/views/pages/parts/code-editor.blade.php
@@ -20,7 +20,7 @@
                 <div class="code-editor-language-list flex-container-column flex-fill">
                     <label for="code-editor-language">{{ trans('components.code_language') }}</label>
                     <input refs="code-editor@languageInput" id="code-editor-language" type="text">
-                    <div class="lang-options">
+                    <div refs="code-editor@language-options-container" class="lang-options">
                         @php
                             $languages = [
                                 'Bash', 'CSS', 'C', 'C++', 'C#', 'Diff', 'Fortran', 'F#', 'Go', 'Haskell', 'HTML', 'INI',
@@ -32,7 +32,7 @@
 
                         @foreach($languages as $language)
                             <div class="relative">
-                                <button type="button" refs="code-editor@languageLink" data-favourite="false" data-lang="{{ strtolower($language) }}">{{ $language }}</button>
+                                <button type="button" refs="code-editor@language-button" data-favourite="false" data-lang="{{ strtolower($language) }}">{{ $language }}</button>
                                 <button class="lang-option-favorite-toggle action-favourite" data-title="{{ trans('common.favourite') }}">@icon('star-outline')</button>
                                 <button class="lang-option-favorite-toggle action-unfavourite" data-title="{{ trans('common.unfavourite') }}">@icon('star')</button>
                             </div>