feat(uip-toggle-theme): separate uip-toggle-theme widget to control U…

…IP instance theme
exadel-inc · Oct 29, 2023 · 52a4bd2 · 52a4bd2
1 parent d778ec8
commit 52a4bd2
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 0 deletions.
diff --git a/src/plugins/theme/uip-theme.icon.tsx b/src/plugins/theme/uip-theme.icon.tsx
@@ -0,0 +1,13 @@
+import React from 'jsx-dom';
+
+// TODO: optimize content
+export const UIPThemeIcon = (): SVGElement => (<>
+  <svg class="uip-light-theme" xmlns="http://www.w3.org/2000/svg" stroke="#4e4e4e" stroke-width="1.25" stroke-linecap="round" viewBox="0 0 24 24">
+    <path d="M8.08 2.42C-6.59 12.5 11.62 30.71 21.52 15.86" fill="none"/>
+    <path d="M8.08 2.42c-4.42 8.31 5.13 17.86 13.44 13.44" fill="none"/>
+  </svg>
+  <svg class="uip-dark-theme" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    {/* eslint-disable-next-line max-len */}
+    <path d="M12.45.3a.68.68 0 0 0-.08.02.58.58 0 0 0-.45.58v3.48a.58.58 0 0 0 .29.51.59.59 0 0 0 .58 0 .58.58 0 0 0 .29-.51V.9a.58.58 0 0 0-.63-.6ZM4.18 3.7a.58.58 0 0 0-.45.42.58.58 0 0 0 .16.59l2.47 2.46c.14.17.36.25.58.2a.58.58 0 0 0 .43-.43.58.58 0 0 0-.2-.59L4.71 3.9a.58.58 0 0 0-.47-.18h-.06Zm16.46 0a.58.58 0 0 0-.35.2l-2.46 2.46a.58.58 0 0 0-.2.58c.05.21.22.38.43.43.22.05.44-.03.58-.2l2.47-2.46a.58.58 0 0 0-.47-1Zm-8.2 3-.05.02a.6.6 0 0 0-.1.02l-.03.01A5.78 5.78 0 0 0 6.7 12.5c0 3.2 2.6 5.8 5.8 5.8a5.79 5.79 0 0 0 .27-11.55l-.05-.01a.56.56 0 0 0-.18-.04h-.1Zm.02 1.16h.1a4.64 4.64 0 1 1-.1 0ZM.74 11.92a.59.59 0 0 0 .16 1.16h3.48a.58.58 0 0 0 .51-.29.59.59 0 0 0 0-.58.58.58 0 0 0-.51-.29H.74Zm19.72 0a.59.59 0 0 0 .16 1.16h3.48a.58.58 0 0 0 .51-.29.59.59 0 0 0 0-.58.58.58 0 0 0-.51-.29h-3.64ZM6.7 17.65a.58.58 0 0 0-.35.18L3.9 20.3a.58.58 0 0 0-.2.58c.05.21.22.38.43.43.22.05.45-.03.59-.2l2.46-2.46a.58.58 0 0 0-.42-1H6.7Zm11.42 0a.58.58 0 0 0-.46.4.58.58 0 0 0 .17.6l2.46 2.46a.58.58 0 0 0 1.02-.23.58.58 0 0 0-.2-.59l-2.47-2.46a.58.58 0 0 0-.41-.18h-.11Zm-5.68 2.37a.67.67 0 0 0-.07.02.58.58 0 0 0-.45.58v3.48a.58.58 0 0 0 .29.51.59.59 0 0 0 .58 0 .58.58 0 0 0 .29-.51v-3.48a.58.58 0 0 0-.63-.6Z"/>
+  </svg>
+</>) as SVGElement;
diff --git a/src/plugins/theme/uip-theme.less b/src/plugins/theme/uip-theme.less
@@ -0,0 +1,23 @@
+uip-toggle-theme {
+  display: none;
+  cursor: pointer;
+  .uip-root &.uip-toggle-theme {
+    display: inline-flex;
+  }
+
+  width: 1em;
+  height: 1em;
+
+  svg {
+    width: 100%;
+    height: 100%;
+
+    fill: currentColor;
+    stroke: currentColor;
+  }
+}
+
+uip-root[dark-theme] .uip-light-theme,
+uip-root:not([dark-theme]) .uip-dark-theme {
+  display: none;
+}
diff --git a/src/plugins/theme/uip-theme.shape.ts b/src/plugins/theme/uip-theme.shape.ts
@@ -0,0 +1,14 @@
+import type {ESLBaseElementShape} from '@exadel/esl/modules/esl-base-element/core';
+import type {UIPThemeSwitcher} from './uip-theme';
+
+export interface UIPThemeSwitcherShape extends ESLBaseElementShape<UIPThemeSwitcher> {
+  children?: any;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uip-toggle-theme': UIPThemeSwitcherShape;
+    }
+  }
+}
diff --git a/src/plugins/theme/uip-theme.ts b/src/plugins/theme/uip-theme.ts
@@ -0,0 +1,12 @@
+import './uip-theme.shape';
+
+import {UIPPluginButton} from '../../core/button/plugin-button';
+
+export class UIPThemeSwitcher extends UIPPluginButton {
+  public static override is = 'uip-toggle-theme';
+  public static override defaultTitle = 'Switch theme';
+
+  protected override onAction(): void {
+    this.root?.toggleAttribute('dark-theme');
+  }
+}