diff --git a/src/plugins/header/header.less b/src/plugins/header/header.less
index 9ff1a556..2bef7956 100644
--- a/src/plugins/header/header.less
+++ b/src/plugins/header/header.less
@@ -14,7 +14,7 @@
margin-left: 0.6rem;
border: none;
cursor: pointer;
- background: transparent center no-repeat url("data:image/svg+xml;utf8,");
+ background: transparent center no-repeat url("data:image/svg+xml;utf8,");
}
@media @mobile {
diff --git a/src/plugins/header/options/OptionIcons.tsx b/src/plugins/header/options/OptionIcons.tsx
new file mode 100644
index 00000000..fb03523b
--- /dev/null
+++ b/src/plugins/header/options/OptionIcons.tsx
@@ -0,0 +1,42 @@
+import React from 'jsx-dom';
+/**
+ * Base class for icons
+ */
+export class UIPOptionIcons {
+ /** Default svg for theme icons */
+ public static themeSVG: HTMLElement = (
+ <>
+
+
+ ) as HTMLElement;
+
+ /** Default svg for rtl direction icon */
+ public static rtlDirectionSVG: HTMLElement = (
+
+ ) as HTMLElement;
+
+ /** Default svg for collapsed settings icon */
+ public static settingsCollapsedSVG: HTMLElement = (
+
+ ) as HTMLElement;
+
+ /** Default svg for collapsed editor icon */
+ public static editorCollapsedSVG: HTMLElement = (
+
+ ) as HTMLElement;
+}
diff --git a/src/plugins/header/options/option/option.less b/src/plugins/header/options/option/option.less
index d9a848a6..36a943c8 100644
--- a/src/plugins/header/options/option/option.less
+++ b/src/plugins/header/options/option/option.less
@@ -1,5 +1,5 @@
uip-option {
- display: block;
+ display: flex;
width: 1.5rem;
height: 1.5rem;
margin-left: 0.6rem;
@@ -7,32 +7,42 @@ uip-option {
background-repeat: no-repeat;
cursor: pointer;
- each(@option-icons, {
- &.@{key}-option {
- background-image: extract(@value, 1);
+ &.dark-theme-option {
+ svg {
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+
+ svg:last-child {
+ display: none;
+ }
- &.active {
- background-image: extract(@value, 2);
+ &.active {
+ svg:first-child {
+ display: none;
+ }
+
+ svg:last-child {
+ display: block;
}
}
- });
+ }
&.rtl-direction-option {
width: 2.5rem;
}
+ &.settings-collapsed-option {
+ &.active svg {
+ fill: #5f5f5f;
+ stroke: #5f5f5f;
+ }
+ }
+
&.editor-collapsed-option {
width: 2rem;
+ &.active svg {
+ fill: #5f5f5f;
+ }
}
}
-
-@option-icons: {
- dark-theme: url("data:image/svg+xml;utf8,"),
- url("data:image/svg+xml;utf8,");
- rtl-direction: url("data:image/svg+xml;utf8,"),
- url("data:image/svg+xml;utf8,");
- settings-collapsed: url("data:image/svg+xml;utf8,"),
- url("data:image/svg+xml;utf8,");
- editor-collapsed: url("data:image/svg+xml;utf8,"),
- url("data:image/svg+xml;utf8,");
-}
diff --git a/src/plugins/header/options/option/option.ts b/src/plugins/header/options/option/option.ts
index 62d1e321..e1134e9a 100644
--- a/src/plugins/header/options/option/option.ts
+++ b/src/plugins/header/options/option/option.ts
@@ -13,6 +13,7 @@ export type OptionConfig = {
optionValue: string;
/** Callback to indicate if option should be rendered */
canActivate?: (scope: UIPOptions) => boolean;
+ svg: HTMLElement;
};
/** Custom element to toggle {@link UIPRoot} attributes */
@@ -31,6 +32,7 @@ export class UIPOption extends ESLBaseElement {
static createEl(optionConfig: OptionConfig): UIPOption {
const option = document.createElement('uip-option') as UIPOption;
option.setAttribute('attribute', optionConfig.optionValue);
+ option.append(optionConfig.svg);
option.config = optionConfig;
return option;
}
diff --git a/src/plugins/header/options/options.ts b/src/plugins/header/options/options.ts
index ebb0f167..f33de6c3 100644
--- a/src/plugins/header/options/options.ts
+++ b/src/plugins/header/options/options.ts
@@ -2,6 +2,7 @@ import {listen} from '@exadel/esl/modules/esl-utils/decorators/listen';
import {UIPPlugin} from '../../../core/base/plugin';
import {OptionConfig, UIPOption} from './option/option';
+import {UIPOptionIcons} from './OptionIcons';
/**
* Options {@link UIPPlugin} custom element definition
@@ -20,24 +21,28 @@ export class UIPOptions extends UIPPlugin {
{
attrName: 'hide-theme',
optionValue: 'dark-theme',
- canActivate: (component) => !component.hasAttribute('hide-theme')
+ canActivate: (component) => !component.hasAttribute('hide-theme'),
+ svg: UIPOptionIcons.themeSVG
},
{
attrName: 'hide-direction',
optionValue: 'rtl-direction',
- canActivate: (component) => !component.hasAttribute('hide-direction')
+ canActivate: (component) => !component.hasAttribute('hide-direction'),
+ svg: UIPOptionIcons.rtlDirectionSVG
},
{
attrName: 'hide-settings',
optionValue: 'settings-collapsed',
canActivate: (component) => !component.hasAttribute('hide-settings') &&
- !!component.root?.querySelector('uip-settings')
+ !!component.root?.querySelector('uip-settings'),
+ svg: UIPOptionIcons.settingsCollapsedSVG
},
{
attrName: 'hide-editor',
optionValue: 'editor-collapsed',
canActivate: (component) => !component.hasAttribute('hide-editor') &&
- !!component.root?.querySelector('uip-editor')
+ !!component.root?.querySelector('uip-editor'),
+ svg: UIPOptionIcons.editorCollapsedSVG
}
];
@@ -90,9 +95,10 @@ export class UIPOptions extends UIPPlugin {
* Handles {@link UIPOption} `click` event
* to manage {@link UIPRoot} options attributes
*/
- @listen({event: 'click', selector: '.uip-option'})
+ @listen({event: 'click'})
protected _onOptionClick(e: Event) {
- const option = e.target as UIPOption;
+ e.stopPropagation();
+ const option = (e.target as HTMLElement).closest('uip-option') as UIPOption;
this.root?.toggleAttribute(option.attribute, option.active);
}
diff --git a/src/plugins/registration.ts b/src/plugins/registration.ts
index 56f86e93..87f81606 100644
--- a/src/plugins/registration.ts
+++ b/src/plugins/registration.ts
@@ -1,11 +1,12 @@
import {UIPHeader} from './header/header';
import {UIPOptions} from './header/options/options';
+import {UIPOptionIcons} from './header/options/OptionIcons';
import {UIPSnippets} from './header/snippets/snippets';
import {UIPEditor} from './editor/editor';
import {UIPSettings} from './settings/settings';
import {registeredSettings} from '../registration';
-export {UIPOptions, UIPEditor, UIPSettings, UIPSnippets, UIPHeader};
+export {UIPOptions, UIPOptionIcons, UIPEditor, UIPSettings, UIPSnippets, UIPHeader};
export const registerPlugins = () => {
UIPHeader.register();