Feature/layout update (#112)

* refactor: changes layout from grid to flex

* chore: style refactored; added esl-scrollbar to settings plugin

* chore: lint fix

* refactor: preview plugion minor style update

* refactor: style updates according to request

* refactor: separated methods in settings and editor plugins; minor style changes

* refactor: inner container getter extracted to plugin component

src/core/plugin.less

@@ -1,19 +1,26 @@
 .uip-plugin {
   position: relative;
+  flex: 1 0 auto;
   margin-top: 30px;
-  border: 1px solid @section-border;
+  padding: 10px;
+  background-color: transparent;
+
+  &-inner {
+    max-height: 500px;
+    padding: 10px;
+    border: 1px solid @section-border;
+  }
 
   &[label]::before {
     content: attr(label);
     display: inline-block;
     position: absolute;
     left: 2px;
     top: -4px;
-
-    transform: translateY(-100%);
-
+    padding-left: 10px;
     font-size: 20px;
     line-height: 22px;
     font-weight: 500;
+    transform: translateY(-100%);
   }
 }

src/core/plugin.ts

@@ -1,3 +1,4 @@
+import {memoize} from '@exadel/esl';
 import {attr, ESLBaseElement} from '@exadel/esl/modules/esl-base-element/core';
 import {UIPRoot} from './root';
 import {UIPStateModel} from './state-model';
@@ -21,6 +22,7 @@ export abstract class UIPPlugin extends ESLBaseElement {
   protected get root(): UIPRoot | null {
     return this._root;
   }
+
   protected set root(root: UIPRoot | null) {
     this._root?.removeStateListener(this._onRootStateChange);
     this._root = root;
@@ -31,12 +33,21 @@ export abstract class UIPPlugin extends ESLBaseElement {
     return this.root ? this.root.model : null;
   }
 
+  @memoize()
+  get $inner() {
+    const $inner = document.createElement('div');
+    const pluginType = <typeof UIPPlugin>this.constructor;
+    $inner.className = `${pluginType.is}-inner uip-plugin-inner`;
+    return $inner;
+  }
+
   protected connectedCallback() {
     super.connectedCallback();
     this.classList.add('uip-plugin');
     this.root = this.closest(`${UIPRoot.is}`) as UIPRoot;
     this.root && this._onRootStateChange();
   }
+
   protected disconnectedCallback() {
     this._root?.removeStateListener(this._onRootStateChange);
     this.root = null;

src/core/root.less

@@ -1,20 +1,8 @@
 .uip-root {
-  display: grid;
-  gap: 20px;
+  display: flex;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  min-height: 100vh;
+  width: 100%;
   padding: 20px 75px;
-}
-
-@media @mobile {
-  .uip-root {
-    &.vertical-mode, &.horizontal-mode {
-      grid-template-columns: 100%;
-      grid-template-rows: auto auto auto 350px;
-      padding: 20px 60px;
-
-      &.settings-attached {
-        grid-template-columns: 100%;
-        grid-template-rows: auto auto auto auto 350px;
-      }
-    }
-  }
-}
+}

src/editor/editor.less

@@ -1,22 +1,8 @@
 .uip-editor {
   display: block;
+  width: 100%;
 
-  .uip-editor-inner {
-    display: block;
-    height: 100%;
-  }
-}
-
-@media @mobile {
-  .uip-root.vertical-mode, .uip-root.horizontal-mode {
-    .uip-editor {
-      grid-column: 1 / 2;
-      grid-row: 4 / 5;
-    }
-
-    &.settings-attached .uip-editor {
-      grid-column: 1 / 2;
-      grid-row: 5 / 6;
-    }
+  &-inner {
+    min-height: 350px;
   }
 }

src/editor/editor.ts

@@ -35,6 +35,21 @@ export class UIPEditor extends UIPPlugin {
     return Object.assign({}, type.defaultOptions, this.editorConfig || {});
   }
 
+  protected connectedCallback() {
+    super.connectedCallback();
+    this.initEditor();
+  }
+
+  protected initEditor() {
+    this.innerHTML = '';
+    this.appendChild(this.$inner);
+
+    this.editor = edit(this.$inner);
+    this.editor.setOption('useWorker', false);
+
+    this.initEditorOptions();
+  }
+
   protected initEditorOptions(): void {
     this.editor?.setOptions(this.mergedEditorConfig);
   }
@@ -48,17 +63,7 @@ export class UIPEditor extends UIPPlugin {
     if (this.model!.lastModifier === this) return;
 
     const markup = this.model!.html;
-    const $inner = document.createElement('div');
-    $inner.classList.add('uip-editor-inner');
-
-    this.innerHTML = '';
-    this.appendChild($inner);
-
-    this.editor = edit($inner);
-    this.editor.setOption('useWorker', false);
-
-    this.initEditorOptions();
-    this.setEditorValue(markup);
+    this.editor && this.setEditorValue(markup);
   }
 
   protected setEditorValue(value: string): void {

src/options/option/mode.less

@@ -1,20 +1,10 @@
 .uip-root {
   &.vertical-mode {
-    grid-template-columns: calc(20% - 10px) calc(80% - 10px);
-    grid-template-rows: 1fr 550px 350px;
-
-    &.settings-attached {
-      grid-template-columns: 15% calc(65% - 20px) calc(20% - 20px);
-
-      .uip-editor {
-        grid-column: 1 / 4;
-      }
+    & > .uip-preview {
+      width: 60%;
     }
 
-    .uip-snippets {
-      grid-column: 1 / 2;
-      grid-row: 2 / 3;
-
+    & > .uip-snippets {
       .snippets-list-item {
         border-bottom: 1px solid @element-border;
 
@@ -24,43 +14,17 @@
       }
     }
 
-    .uip-preview {
-      grid-column: 2 / 3;
-      grid-row: 2 / 3;
-    }
-
-    .uip-settings {
-      grid-column: 3 / 4;
-      grid-row: 2 / 3;
-    }
-
-    .uip-editor {
-      grid-column: 1 / 3;
-      grid-row: 3 / 4;
-    }
   }
 
   &.horizontal-mode {
-    grid-template-columns: 100%;
-    grid-template-rows: auto 1fr 550px 350px;
-
-    &.settings-attached {
-      grid-template-columns: calc(75% - 10px) calc(25% - 10px);
-
-      .uip-snippets, .uip-editor {
-        grid-column: 1 / 3;
-      }
+    & > .uip-preview {
+      width: 80%;
     }
 
-    .uip-snippets {
-      grid-column: 1 / 2;
-      grid-row: 2 / 3;
-
-      .snippets-list {
-        margin-left: 5px;
-      }
+    & > .uip-snippets {
+      width: 100%;
 
-      .snippets-list .snippets-list-item {
+      .snippets-list-item {
         display: inline-block;
 
         &:not(:last-child) {
@@ -75,20 +39,5 @@
         }
       }
     }
-
-    .uip-preview {
-      grid-column: 1 / 2;
-      grid-row: 3 / 4;
-    }
-
-    .uip-settings {
-      grid-column: 2 / 3;
-      grid-row: 3 / 4;
-    }
-
-    .uip-editor {
-      grid-column: 1 / 2;
-      grid-row: 4 / 5;
-    }
   }
 }

src/options/option/theme.less

@@ -3,9 +3,12 @@
     background-color: @light-theme;
 
     & > .uip-plugin {
-      background-color: @light-theme-section;
       color: @dark-text;
 
+      & > .uip-plugin-inner {
+        background-color: @light-theme-section;
+      }
+
       &.uip-snippets {
         .snippets-list .snippets-list-item {
           &:not(:last-child) {
@@ -28,7 +31,6 @@
     background-color: @dark-theme;
 
     & > .uip-plugin {
-      background-color: @dark-theme-section;
       color: @light-text;
 
       &.uip-snippets {

src/options/options.less

@@ -1,15 +1,13 @@
 .uip-options {
-  grid-column: 1 / -1;
   display: flex;
   flex: 0 1 auto;
   align-items: baseline;
+  width: 100%;
   margin: 0;
-  border: none;
-  // override theme color
-  background-color: transparent !important;
 
   &[label]::before {
     position: static;
+    padding-left: 0;
     transform: initial;
   }
 

src/preview/preview.less

@@ -1,16 +1,9 @@
 .uip-preview {
   display: block;
-  height: max-content;
-  width: max-content;
-  max-width: 100%;
 
-  .uip-preview-inner {
-    display: block;
-    height: 100vh;
-    width: 100vw;
-    max-height: 518px;
+  &-inner {
+    height: 500px;
     max-width: 100%;
-    padding: 10px;
     overflow: auto;
     resize: both;
   }

src/preview/preview.ts

@@ -1,17 +1,9 @@
-import {memoize} from '@exadel/esl';
 import {bind} from '@exadel/esl/modules/esl-utils/decorators/bind';
 import {UIPPlugin} from '../core/plugin';
 
 export class UIPPreview extends UIPPlugin {
   static is = 'uip-preview';
 
-  @memoize()
-  get $inner() {
-    const $inner = document.createElement('div');
-    $inner.classList.add('uip-preview-inner');
-    return $inner;
-  }
-
   @bind
   protected _onRootStateChange(): void {
     if (this.$inner.parentElement === this) this.removeChild(this.$inner);

src/settings/setting/text-setting/text-setting.less

@@ -1,3 +1,4 @@
 .uip-text-setting input {
   display: block;
+  max-width: 100%;
 }

src/settings/settings.less

@@ -1,12 +1,15 @@
 .uip-settings {
-  padding: 10px;
-}
+  width: 20%;
+  min-width: 200px;
+
+  &-inner {
+    position: relative;
+    height: 100%;
+  }
 
-@media @mobile {
-  .uip-root.vertical-mode, .uip-root.horizontal-mode {
-    .uip-settings {
-      grid-column: 1 / 2;
-      grid-row: 4 / 5;
-    }
+  .settings-list {
+    height: 100%;
+    max-height: 500px;
+    margin-right: 10px;
   }
 }

src/settings/settings.ts

@@ -1,7 +1,7 @@
 import {UIPSetting} from './setting/setting';
 import {bind} from '@exadel/esl/modules/esl-utils/decorators/bind';
 import {attr} from '@exadel/esl/modules/esl-base-element/core';
-import {CSSClassUtils} from '@exadel/esl';
+import {CSSClassUtils, memoize} from '@exadel/esl';
 import {UIPPlugin} from '../core/plugin';
 
 export class UIPSettings extends UIPPlugin {
@@ -11,10 +11,29 @@ export class UIPSettings extends UIPPlugin {
   @attr({defaultValue: 'Settings'}) public label: string;
   @attr({defaultValue: 'settings-attached'}) public rootClass: string;
 
+  @memoize()
+  public get $scroll() {
+    const $scroll = document.createElement('esl-scrollbar');
+    $scroll.setAttribute('target', '::prev(.settings-list)');
+    return $scroll;
+  }
+
   protected connectedCallback() {
     super.connectedCallback();
     this.bindEvents();
     this.root && CSSClassUtils.add(this.root, this.rootClass);
+    this.updateInner();
+  }
+
+  protected updateInner() {
+    const $settingsList = document.createElement('div');
+    $settingsList.className = 'settings-list esl-scrollable-content';
+    [...this.childNodes].forEach( (node: HTMLElement) => {
+      $settingsList.appendChild(node);
+    });
+    this.$inner.appendChild($settingsList);
+    this.$scroll && this.$inner.appendChild(this.$scroll);
+    this.appendChild(this.$inner);
   }
 
   protected disconnectedCallback(): void {