From 5721ed6997f3a685cc75f0efea8177d9f31bc22e Mon Sep 17 00:00:00 2001 From: AlexanderBazukevich <54510364+AlexanderBazukevich@users.noreply.github.com> Date: Thu, 15 Jul 2021 09:42:51 +0300 Subject: [PATCH] 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 | 15 +++-- src/core/plugin.ts | 11 +++ src/core/root.less | 24 ++----- src/editor/editor.less | 20 +----- src/editor/editor.ts | 27 +++++--- src/options/option/mode.less | 67 +++---------------- src/options/option/theme.less | 6 +- src/options/options.less | 6 +- src/preview/preview.less | 11 +-- src/preview/preview.ts | 8 --- .../setting/text-setting/text-setting.less | 1 + src/settings/settings.less | 19 +++--- src/settings/settings.ts | 21 +++++- src/snippets/snippets.less | 44 +++++------- src/snippets/snippets.ts | 13 ++-- 15 files changed, 115 insertions(+), 178 deletions(-) diff --git a/src/core/plugin.less b/src/core/plugin.less index 6cf85025..4a869900 100644 --- a/src/core/plugin.less +++ b/src/core/plugin.less @@ -1,7 +1,15 @@ .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); @@ -9,11 +17,10 @@ position: absolute; left: 2px; top: -4px; - - transform: translateY(-100%); - + padding-left: 10px; font-size: 20px; line-height: 22px; font-weight: 500; + transform: translateY(-100%); } } diff --git a/src/core/plugin.ts b/src/core/plugin.ts index b5438071..7f8147c8 100644 --- a/src/core/plugin.ts +++ b/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 = 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; diff --git a/src/core/root.less b/src/core/root.less index 2557d126..aff8dd7f 100644 --- a/src/core/root.less +++ b/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; - } - } - } -} +} \ No newline at end of file diff --git a/src/editor/editor.less b/src/editor/editor.less index 30f106df..3880b345 100644 --- a/src/editor/editor.less +++ b/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; } } diff --git a/src/editor/editor.ts b/src/editor/editor.ts index b92a3e20..4b2c0aa9 100644 --- a/src/editor/editor.ts +++ b/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 { diff --git a/src/options/option/mode.less b/src/options/option/mode.less index 933aad4f..753a7309 100644 --- a/src/options/option/mode.less +++ b/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; - } } } diff --git a/src/options/option/theme.less b/src/options/option/theme.less index 168d21ec..4889ee30 100644 --- a/src/options/option/theme.less +++ b/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 { diff --git a/src/options/options.less b/src/options/options.less index e90831d1..d23ad16b 100644 --- a/src/options/options.less +++ b/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; } diff --git a/src/preview/preview.less b/src/preview/preview.less index c83b7c74..6406547d 100644 --- a/src/preview/preview.less +++ b/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; } diff --git a/src/preview/preview.ts b/src/preview/preview.ts index bf588cda..e5ecd1ce 100644 --- a/src/preview/preview.ts +++ b/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); diff --git a/src/settings/setting/text-setting/text-setting.less b/src/settings/setting/text-setting/text-setting.less index 8906bbc6..ca2278e7 100644 --- a/src/settings/setting/text-setting/text-setting.less +++ b/src/settings/setting/text-setting/text-setting.less @@ -1,3 +1,4 @@ .uip-text-setting input { display: block; + max-width: 100%; } diff --git a/src/settings/settings.less b/src/settings/settings.less index 58cdecbc..0f9f0dfc 100644 --- a/src/settings/settings.less +++ b/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; } } diff --git a/src/settings/settings.ts b/src/settings/settings.ts index 90045b39..fc72a3de 100644 --- a/src/settings/settings.ts +++ b/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 { diff --git a/src/snippets/snippets.less b/src/snippets/snippets.less index 0680bcfe..0ee33760 100644 --- a/src/snippets/snippets.less +++ b/src/snippets/snippets.less @@ -1,42 +1,28 @@ .uip-snippets { display: block; + width: 20%; + min-width: 200px; - .uip-snippets-inner { - display: block; + &-inner { + position: relative; height: 100%; - padding: 10px; - overflow: auto; } .snippets-list { + height: 100%; list-style-type: none; - margin-top: 0; margin-right: 10px; - padding-inline-start: 0; - } - - .snippets-list-item { - &:hover { - cursor: pointer; - opacity: .7; - } - } - - .snippets-list-item.active { - font-weight: 600; - } -} - -@media @mobile { - .uip-root.vertical-mode, .uip-root.horizontal-mode { - .uip-snippets { - grid-column: 1 / 2; - grid-row: 2 / 3; - } + overflow: auto; - &.settings-attached .uip-snippets { - grid-column: 1 / 2; - grid-row: 2 / 3; + &-item { + &:hover { + cursor: pointer; + opacity: .7; + } + + &.active { + font-weight: 600; + } } } } diff --git a/src/snippets/snippets.ts b/src/snippets/snippets.ts index b9a202f4..821cf0f9 100644 --- a/src/snippets/snippets.ts +++ b/src/snippets/snippets.ts @@ -46,7 +46,7 @@ export class UIPSnippets extends UIPPlugin { @memoize() public get $scroll() { const $scroll = document.createElement('esl-scrollbar'); - $scroll.setAttribute('target', '::prev(.uip-snippets-inner)'); + $scroll.setAttribute('target', '::prev(.snippets-list)'); return $scroll; } @@ -54,18 +54,15 @@ export class UIPSnippets extends UIPPlugin { const snippets = this.querySelectorAll(UIPSnippets.CONTENT_SEL); if (!snippets.length) return; const $ul = document.createElement('ul'); - $ul.className = 'snippets-list'; + $ul.className = 'snippets-list esl-scrollable-content'; Array.from(snippets) .map((snippet: HTMLTemplateElement) => this.buildListItem(snippet)) .forEach((item) => item && $ul.appendChild(item)); - const $inner = document.createElement('div'); - $inner.className = 'uip-snippets-inner esl-scrollable-content'; - - $inner.appendChild($ul); - this.appendChild($inner); - this.$scroll && this.appendChild(this.$scroll); + this.$inner.appendChild($ul); + this.$scroll && this.$inner.appendChild(this.$scroll); + this.appendChild(this.$inner); } protected buildListItem(snippet: HTMLTemplateElement) {