Skip to content

Commit

Permalink
feat(core/menu): toggle between light and dark variant of current theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielleroux
danielleroux committed Sep 16, 2022
1 parent 08ad1aa commit acd08f9
Show file tree
Hide file tree
Showing 6 changed files with 54 additions and 64 deletions.
31 changes: 20 additions & 11 deletions packages/core/component-doc.json
View file
Expand Up @@ -4095,7 +4095,9 @@
"docs": "<!--\nSPDX-FileCopyrightText: 2022 Siemens AG\n\nSPDX-License-Identifier: MIT\n-->",
"docsTags": [],
"encapsulation": "none",
"dependents": [],
"dependents": [
"my-component"
],
"dependencies": [
"ix-menu-item",
"ix-dropdown"
Expand All @@ -4104,6 +4106,9 @@
"ix-menu": [
"ix-menu-item",
"ix-dropdown"
],
"my-component": [
"ix-menu"
]
},
"props": [
Expand Down Expand Up @@ -4180,15 +4185,9 @@
"mutable": false,
"attr": "enable-toggle-theme",
"reflectToAttr": false,
"docs": "",
"docsTags": [
{
"name": "deprecated",
"text": "Show toggle theme button"
}
],
"docs": "Show toggle between light and dark variant. Only if the provided theme have implemented both!",
"docsTags": [],
"default": "false",
"deprecation": "Show toggle theme button",
"values": [
{
"type": "boolean"
Expand Down Expand Up @@ -8549,8 +8548,18 @@
"docsTags": [],
"encapsulation": "scoped",
"dependents": [],
"dependencies": [],
"dependencyGraph": {},
"dependencies": [
"ix-menu"
],
"dependencyGraph": {
"my-component": [
"ix-menu"
],
"ix-menu": [
"ix-menu-item",
"ix-dropdown"
]
},
"props": [],
"methods": [],
"events": [],
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components.d.ts
View file
Expand Up @@ -669,7 +669,7 @@ export namespace Components {
*/
"enableSettings": boolean;
/**
* @deprecated Show toggle theme button
* Show toggle between light and dark variant. Only if the provided theme have implemented both!
*/
"enableToggleTheme": boolean;
/**
Expand Down Expand Up @@ -2542,7 +2542,7 @@ declare namespace LocalJSX {
*/
"enableSettings"?: boolean;
/**
* @deprecated Show toggle theme button
* Show toggle between light and dark variant. Only if the provided theme have implemented both!
*/
"enableToggleTheme"?: boolean;
/**
Expand Down
27 changes: 13 additions & 14 deletions packages/core/src/components/menu/menu.tsx
View file
Expand Up @@ -8,20 +8,20 @@
*/

import {
Component,
Element,
Event,
EventEmitter,
h,
Host,
Listen,
Method,
Prop,
State
Component,
Element,
Event,
EventEmitter,
h,
Host,
Listen,
Method,
Prop,
State,
} from '@stencil/core';
import { Popover } from '../utils/popover.util';
import { convertToRemString } from '../utils/rwd.util';
import { toggleTheme } from '../utils/toggle-theme';
import { toggleVariant } from '../utils/toggle-theme';

@Component({
tag: 'ix-menu',
Expand All @@ -42,8 +42,7 @@ export class Menu {
@Prop({ mutable: true }) showAbout = false;

/**
* @deprecated
* Show toggle theme button
* Show toggle between light and dark variant. Only if the provided theme have implemented both!
*/
@Prop() enableToggleTheme = false;

Expand Down Expand Up @@ -794,7 +793,7 @@ export class Menu {
{this.enableToggleTheme ? (
<ix-menu-item
id="toggleTheme"
onClick={() => toggleTheme()}
onClick={() => toggleVariant()}
class="internal-tab bottom-tab"
tabIcon="bulb"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/menu/readme.md
View file
Expand Up @@ -17,7 +17,7 @@ SPDX-License-Identifier: MIT
| `applicationName` | `application-name` | Should only be set if you use ix-menu standalone | `string` | `undefined` |
| `enableMapExpand` | `enable-map-expand` | Internal | `boolean` | `false` |
| `enableSettings` | `enable-settings` | Is settings tab is visible | `boolean` | `true` |
| `enableToggleTheme` | `enable-toggle-theme` | <span style="color:red">**[DEPRECATED]**</span> Show toggle theme button<br/><br/> | `boolean` | `false` |
| `enableToggleTheme` | `enable-toggle-theme` | Show toggle between light and dark variant. Only if the provided theme have implemented both! | `boolean` | `false` |
| `expand` | `expand` | Expand menu | `boolean` | `false` |
| `i18nCollapse` | `i-1-8n-collapse` | | `string` | `'Collapse'` |
| `i18nExpand` | `i-1-8n-expand` | | `string` | `' Expand'` |
Expand Down
30 changes: 1 addition & 29 deletions packages/core/src/components/my-component/my-component.tsx
View file
Expand Up @@ -18,35 +18,7 @@ export class MyComponent {
render() {
return (
<Host>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colSpan={2}>Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<ix-menu enableToggleTheme={true}></ix-menu>
</Host>
);
}
Expand Down
24 changes: 17 additions & 7 deletions packages/core/src/components/utils/toggle-theme.ts
View file
Expand Up @@ -7,14 +7,24 @@
* LICENSE file in the root directory of this source tree.
*/

export const toggleTheme = () => {
const lightTheme = 'theme-light';
const darkTheme = 'theme-dark';
export const toggleVariant = () => {
let currentTheme = Array.from(document.body.classList).find((className) =>
className.includes('theme-')
);

if (!document.body.classList.contains(lightTheme) && !document.body.classList.contains(darkTheme)) {
document.body.classList.add(darkTheme);
if (!currentTheme) {
currentTheme = 'theme-classic-dark';
}

const isDark = currentTheme.endsWith('-dark');
let newTheme = currentTheme;

if (isDark) {
newTheme = currentTheme.replace(/-dark$/g, '-light');
} else {
document.body.classList.toggle(lightTheme);
document.body.classList.toggle(darkTheme);
newTheme = currentTheme.replace(/-light$/g, '-dark');
}

document.body.classList.remove(currentTheme);
document.body.classList.add(newTheme);
};

0 comments on commit acd08f9

Please sign in to comment.