feat: add copy svg to OptionIcons class, fix click events

exadel-inc · Jun 14, 2023 · c0438fb · c0438fb
1 parent f906155
commit c0438fb
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 7 deletions.
diff --git a/src/plugins/header/header.less b/src/plugins/header/header.less
@@ -9,12 +9,15 @@
     border-bottom: 1px solid @section-border;
 
     .copy-icon {
-      min-height: 24px;
-      min-width: 24px;
       margin-left: 0.6rem;
       border: none;
       cursor: pointer;
-      background: transparent center no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235f5f5f' stroke-width='1.25'><rect width='12' height='15' x='4' y='3' fill='%23fff' rx='2'/><rect width='12' height='15' x='8' y='7' fill='%23fff' rx='2'/></svg>");
+      background-color: transparent;
+      svg {
+        width: 1.5rem;
+        height: 1.5rem;
+        pointer-events: none;
+      }
     }
 
   @media @mobile {

diff --git a/src/plugins/header/header.ts b/src/plugins/header/header.ts
@@ -1,7 +1,7 @@
 import {EventUtils} from '@exadel/esl/modules/esl-utils/dom/events';
 import {listen} from '@exadel/esl/modules/esl-utils/decorators/listen';
 import {UIPPlugin} from '../../core/base/plugin';
-import {UIPOptions, UIPSnippets} from '../registration';
+import {UIPOptionIcons, UIPOptions, UIPSnippets} from '../registration';
 
 /**
  * Header {@link UIPPlugin} custom element definition
@@ -42,6 +42,7 @@ export class UIPHeader extends UIPPlugin {
     const icon = document.createElement('button');
     icon.title = 'copy markup';
     icon.classList.add('copy-icon');
+    icon.append(UIPOptionIcons.copySVG);
     this.append(icon);
   }
 

diff --git a/src/plugins/header/options/OptionIcons.tsx b/src/plugins/header/options/OptionIcons.tsx
@@ -39,4 +39,12 @@ export class UIPOptionIcons {
       <path d="m3.094 10.453 7.336 2.965v2.297L.844 11.273v-1.71l9.586-4.43V7.43l-7.336 3.023Zm11.191 9.012h-1.863L19.547.938h1.851l-7.113 18.527Zm17.133-9.082-7.746-3.035V5.12l10.008 4.43v1.71l-10.008 4.442v-2.25l7.746-3.07Z"/>
     </svg>
   ) as HTMLElement;
+
+  /** Default svg for copy icon */
+  public static copySVG: HTMLElement = (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#5f5f5f" stroke-width="1.25">
+      <rect width="12" height="15" x="4" y="3" fill="#fff" rx="2"/>
+      <rect width="12" height="15" x="8" y="7" fill="#fff" rx="2"/>
+    </svg>
+  ) as HTMLElement;
 }
diff --git a/src/plugins/header/options/option/option.less b/src/plugins/header/options/option/option.less
@@ -41,8 +41,13 @@ uip-option {
 
   &.editor-collapsed-option {
     width: 2rem;
+
     &.active svg {
       fill: #5f5f5f;
     }
   }
+
+  svg {
+    pointer-events: none
+  }
 }
diff --git a/src/plugins/header/options/options.ts b/src/plugins/header/options/options.ts
@@ -95,10 +95,9 @@ export class UIPOptions extends UIPPlugin {
    * Handles {@link UIPOption} `click` event
    * to manage {@link UIPRoot} options attributes
    */
-  @listen({event: 'click'})
+  @listen({event: 'click', selector: '.uip-option'})
   protected _onOptionClick(e: Event) {
-    e.stopPropagation();
-    const option = (e.target as HTMLElement).closest('uip-option') as UIPOption;
+    const option = e.target as UIPOption;
     this.root?.toggleAttribute(option.attribute, option.active);
   }