refactor: fix non collapsible behaviour and rerendering on setting ch…

…ange
exadel-inc · Oct 29, 2023 · e353c52 · e353c52
1 parent 119fb85
commit e353c52
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/src/core/panel/plugin-panel.vertical.less b/src/core/panel/plugin-panel.vertical.less
@@ -41,17 +41,29 @@
   .uip-plugin-header-toolbar {
     position: absolute;
     flex-direction: column;
-    top: 0;
+    top: 0.25rem;
     left: 0;
     right: 0;
     gap: 0.5rem;
+
+    > .uip-plugin {
+      transition: transform 0.3s ease-in-out;
+      &:hover {
+        transform: translateX(-0.25rem);
+      }
+    }
   }
 
   .uip-plugin-header-title {
     display: none;
   }
-  &:not([collapsible]) .uip-plugin-header-icon {
-    display: none;
+  &:not([collapsible]) {
+    .uip-plugin-header.has-toolbar {
+      min-width: calc(1.25rem + 8px);
+    }
+    .uip-plugin-header-icon {
+      display: none;
+    }
   }
 
   .uip-plugin-header-icon {

diff --git a/src/plugins/editor/editor.tsx b/src/plugins/editor/editor.tsx
@@ -103,7 +103,8 @@ export class UIPEditor extends UIPPluginPanel {
   protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
     super.attributeChangedCallback(attrName, oldVal, newVal);
     this.$header.remove();
-    memoize.clear(this, '$header');
+    this.$toolbar.remove();
+    memoize.clear(this, ['$header', '$toolbar']);
     this.insertAdjacentElement('afterbegin', this.$header);
   }
 

diff --git a/src/plugins/settings/settings.tsx b/src/plugins/settings/settings.tsx
@@ -1,7 +1,7 @@
 import React from 'jsx-dom';
 
 import {debounce} from '@exadel/esl/modules/esl-utils/async/debounce';
-import {attr, boolAttr, decorate, listen, memoize, prop} from '@exadel/esl/modules/esl-utils/decorators';
+import {attr, boolAttr, decorate, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators';
 
 import {UIPPluginPanel} from '../../core/panel/plugin-panel';
 import {UIPDirIcon} from '../direction/uip-dir.icon';
@@ -16,6 +16,7 @@ import {SettingsIcon} from './settings.icon';
  */
 export class UIPSettings extends UIPPluginPanel {
   public static is = 'uip-settings';
+  public static observedAttributes = ['dir-toggle', 'theme-toggle', ...UIPPluginPanel.observedAttributes];
 
   /** Attribute to set all inner {@link UIPSetting} settings' {@link UIPSetting#target} targets */
   @attr() public target: string;
@@ -67,9 +68,10 @@ export class UIPSettings extends UIPPluginPanel {
 
   protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
     super.attributeChangedCallback(attrName, oldVal, newVal);
-    if (attrName === 'label' || attrName === 'collapsible') {
+    if (['label', 'collapsible', 'dir-toggle', 'theme-toggle'].includes(attrName)) {
       this.$header.remove();
-      memoize.clear(this, '$header');
+      this.$toolbar.remove();
+      memoize.clear(this, ['$header', '$toolbar']);
       this.insertAdjacentElement('afterbegin', this.$header);
     }
   }