Started design changes to the code-editor

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index e3c9d5eea64998359004cd81a3df1491bd293058..aba79bac289e5d1f7f89da411b3f31da526279ad 100644 (file)
--- 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 8f4e7652cb851fd43a53fdbba32147defdc34faf..676d3799f595739280581154ca4bde929a10482a 100644 (file)
--- a/resources/views/pages/parts/code-editor.blade.php
+++ b/resources/views/pages/parts/code-editor.blade.php
@@ -2,69 +2,61 @@
     <div components="popup code-editor" class="popup-background code-editor">
         <div refs="code-editor@container" class="popup-body" tabindex="-1">
 
-            <div class="popup-header primary-background">
+            <div class="popup-header flex-container-row primary-background">
                 <div class="popup-title">{{ trans('components.code_editor') }}</div>
+                <div component="dropdown" refs="code-editor@historyDropDown" class="block">
+                    <button refs="dropdown@toggle" class="text-small">
+                        <span>@icon('history')</span>
+                        <span>{{ trans('components.code_session_history') }}</span>
+                    </button>
+                    <ul refs="dropdown@menu code-editor@historyList" class="dropdown-menu"></ul>
+                </div>
                 <button class="popup-header-close" refs="popup@hide">x</button>
             </div>
 
-            <div class="p-l popup-content">
-                <div class="form-group">
+            <div class="flex-container-row flex-fill gap-m">
+                <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">
-                        <small>
-                            <a refs="code-editor@languageLink" data-lang="CSS">CSS</a>
-                            <a refs="code-editor@languageLink" data-lang="C">C</a>
-                            <a refs="code-editor@languageLink" data-lang="C++">C++</a>
-                            <a refs="code-editor@languageLink" data-lang="C#">C#</a>
-                            <a refs="code-editor@languageLink" data-lang="Fortran">Fortran</a>
-                            <a refs="code-editor@languageLink" data-lang="Go">Go</a>
-                            <a refs="code-editor@languageLink" data-lang="HTML">HTML</a>
-                            <a refs="code-editor@languageLink" data-lang="INI">INI</a>
-                            <a refs="code-editor@languageLink" data-lang="Java">Java</a>
-                            <a refs="code-editor@languageLink" data-lang="JavaScript">JavaScript</a>
-                            <a refs="code-editor@languageLink" data-lang="JSON">JSON</a>
-                            <a refs="code-editor@languageLink" data-lang="LaTeX">LaTeX</a>
-                            <a refs="code-editor@languageLink" data-lang="Lua">Lua</a>
-                            <a refs="code-editor@languageLink" data-lang="MarkDown">MarkDown</a>
-                            <a refs="code-editor@languageLink" data-lang="Nginx">Nginx</a>
-                            <a refs="code-editor@languageLink" data-lang="PASCAL">Pascal</a>
-                            <a refs="code-editor@languageLink" data-lang="Perl">Perl</a>
-                            <a refs="code-editor@languageLink" data-lang="PHP">PHP</a>
-                            <a refs="code-editor@languageLink" data-lang="Powershell">Powershell</a>
-                            <a refs="code-editor@languageLink" data-lang="Python">Python</a>
-                            <a refs="code-editor@languageLink" data-lang="Ruby">Ruby</a>
-                            <a refs="code-editor@languageLink" data-lang="shell">Shell/Bash</a>
-                            <a refs="code-editor@languageLink" data-lang="SQL">SQL</a>
-                            <a refs="code-editor@languageLink" data-lang="VBScript">VBScript</a>
-                            <a refs="code-editor@languageLink" data-lang="VB.NET">VB.NET</a>
-                            <a refs="code-editor@languageLink" data-lang="XML">XML</a>
-                            <a refs="code-editor@languageLink" data-lang="YAML">YAML</a>
-                        </small>
+                        <button type="button" refs="code-editor@languageLink" data-lang="CSS">CSS</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="C">C</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="C++">C++</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="C#">C#</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="Fortran">Fortran</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="Go">Go</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="HTML">HTML</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="INI">INI</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="Java">Java</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="JavaScript">JavaScript</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="JSON">JSON</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="LaTeX">LaTeX</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="Lua">Lua</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="MarkDown">MarkDown</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="Nginx">Nginx</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="PASCAL">Pascal</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="Perl">Perl</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="PHP">PHP</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="Powershell">Powershell</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="Python">Python</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="Ruby">Ruby</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="shell">Shell/Bash</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="SQL">SQL</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="VBScript">VBScript</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="VB.NET">VB.NET</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="XML">XML</button>
+                        <button type="button" refs="code-editor@languageLink" data-lang="YAML">YAML</button>
                     </div>
-                    <input refs="code-editor@languageInput" id="code-editor-language" type="text">
                 </div>
 
-                <div class="form-group">
-                    <div class="grid half no-break v-end mb-xs">
-                        <div>
-                            <label for="code-editor-content">{{ trans('components.code_content') }}</label>
-                        </div>
-                        <div class="text-right">
-                            <div component="dropdown" refs="code-editor@historyDropDown" class="inline block">
-                                <button refs="dropdown@toggle" class="text-button text-small">@icon('history') {{ trans('components.code_session_history') }}</button>
-                                <ul refs="dropdown@menu code-editor@historyList" class="dropdown-menu"></ul>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="clearfix"></div>
+                <div class="code-editor-main">
                     <textarea refs="code-editor@editor"></textarea>
                 </div>
 
-                <div class="form-group">
-                    <button refs="code-editor@saveButton" type="button" class="button">{{ trans('components.code_save') }}</button>
-                </div>
+            </div>
 
+            <div class="popup-footer primary-background-light">
+                <button refs="code-editor@saveButton" type="button" class="button corner-button">{{ trans('components.code_save') }}</button>
             </div>
 
         </div>