Skip to content
Snippets Groups Projects
Commit 0a29bf0e authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Add new attribute: dropdown-right

parent beec4e61
Branches
No related tags found
No related merge requests found
Pipeline #188044 failed
...@@ -121,13 +121,15 @@ A full example can be found in each application in the `index.html` of the `app- ...@@ -121,13 +121,15 @@ A full example can be found in each application in the `index.html` of the `app-
themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"}, themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"},
{"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'> {"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'>
</dbp-theme-switcher>` </dbp-theme-switcher>`
- `darkModeThemeOverride` (optional) - `dark-mode-theme-override` (optional)
- Options: - Options:
- `darkModeThemeOverride` not set: the theme switcher detects if the browser uses the dark mode and add - `dark-mode-theme-override` not set: the theme switcher detects if the browser uses the dark mode and add
the `dark-theme` class automatically to the body if it is in the themes array and no user preference is set the `dark-theme` class automatically to the body if it is in the themes array and no user preference is set
- `darkModeThemeOverride` is set: the theme switcher not detects the browser color mode - `dark-mode-theme-override` is set: the theme switcher not detects the browser color mode
- `darkModeThemeOverride` is set with a string: e.g.: `darkModeThemeOverride="dunkles-theme`, the theme switcher - `dark-mode-theme-override` is set with a string: e.g.: `dark-mode-theme-override="dunkles-theme`, the theme switcher
detects if the browser uses the dark mode and handles the given string as dark mode class detects if the browser uses the dark mode and handles the given string as dark mode class
- `dropdown-right` (optional, default: `false`): boolean which indicates that you want the dropdown from the theme menu on the right side, default on the left side
- example: `<dbp-file-source dropdown-right></dbp-file-source>`
## Note ## Note
......
...@@ -16,6 +16,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) { ...@@ -16,6 +16,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
this.detectBrowserDarkMode = false; this.detectBrowserDarkMode = false;
this.darkModeClass = 'dark-theme'; this.darkModeClass = 'dark-theme';
this.langDir = ''; this.langDir = '';
this.dropdownRight = false;
} }
static get properties() { static get properties() {
...@@ -24,6 +25,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) { ...@@ -24,6 +25,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
lang: {type: String}, lang: {type: String},
themes: {type: Array, attribute: 'themes'}, themes: {type: Array, attribute: 'themes'},
darkModeThemeOverride: {type: String, attribute: 'dark-mode-theme-override'}, darkModeThemeOverride: {type: String, attribute: 'dark-mode-theme-override'},
dropdownRight: {type: Boolean, attribute: 'dropdown-right'},
langDir: {type: String, attribute: 'lang-dir'}, langDir: {type: String, attribute: 'lang-dir'},
}; };
} }
...@@ -223,6 +225,16 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) { ...@@ -223,6 +225,16 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
.icon { .icon {
margin-right: 10px; margin-right: 10px;
} }
#theme-menu{
position: relative;
}
.ul-right{
right: 0px;
};
`; `;
} }
...@@ -230,7 +242,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) { ...@@ -230,7 +242,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
const i18n = this._i18n; const i18n = this._i18n;
return html` return html`
<div class="${classMap({hidden: this.themes.length <= 1})}"> <div id="theme-menu" class="${classMap({hidden: this.themes.length <= 1})}">
<a <a
class="mode-button" class="mode-button"
title="${i18n.t('color-mode')}" title="${i18n.t('color-mode')}"
...@@ -239,7 +251,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) { ...@@ -239,7 +251,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
}}"> }}">
<dbp-icon name="contrast"></dbp-icon> <dbp-icon name="contrast"></dbp-icon>
</a> </a>
<ul class="extended-menu hidden"> <ul class="extended-menu hidden ${classMap({'ul-right':this.dropdownRight})}">
${this.themes.map( ${this.themes.map(
(theme) => html` (theme) => html`
<li class="" id="${theme.class}"> <li class="" id="${theme.class}">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment