From 0a29bf0e62ae039dbc605065eccceda00ce80808 Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 5 Jul 2022 12:55:05 +0200
Subject: [PATCH] Add new attribute: dropdown-right
---
packages/theme-switcher/README.md | 10 ++++++----
packages/theme-switcher/src/theme-switcher.js | 16 ++++++++++++++--
2 files changed, 20 insertions(+), 6 deletions(-)
diff --git a/packages/theme-switcher/README.md b/packages/theme-switcher/README.md
index 2f644581..1c9c016d 100644
--- a/packages/theme-switcher/README.md
+++ b/packages/theme-switcher/README.md
@@ -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"},
{"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'>
</dbp-theme-switcher>`
-- `darkModeThemeOverride` (optional)
+- `dark-mode-theme-override` (optional)
- 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
- - `darkModeThemeOverride` 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: the theme switcher not detects the browser color mode
+ - `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
+- `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
diff --git a/packages/theme-switcher/src/theme-switcher.js b/packages/theme-switcher/src/theme-switcher.js
index 6a236f82..fc2dd982 100644
--- a/packages/theme-switcher/src/theme-switcher.js
+++ b/packages/theme-switcher/src/theme-switcher.js
@@ -16,6 +16,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
this.detectBrowserDarkMode = false;
this.darkModeClass = 'dark-theme';
this.langDir = '';
+ this.dropdownRight = false;
}
static get properties() {
@@ -24,6 +25,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
lang: {type: String},
themes: {type: Array, attribute: 'themes'},
darkModeThemeOverride: {type: String, attribute: 'dark-mode-theme-override'},
+ dropdownRight: {type: Boolean, attribute: 'dropdown-right'},
langDir: {type: String, attribute: 'lang-dir'},
};
}
@@ -223,6 +225,16 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
.icon {
margin-right: 10px;
}
+
+ #theme-menu{
+ position: relative;
+ }
+
+
+ .ul-right{
+ right: 0px;
+ };
+
`;
}
@@ -230,7 +242,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
const i18n = this._i18n;
return html`
- <div class="${classMap({hidden: this.themes.length <= 1})}">
+ <div id="theme-menu" class="${classMap({hidden: this.themes.length <= 1})}">
<a
class="mode-button"
title="${i18n.t('color-mode')}"
@@ -239,7 +251,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
}}">
<dbp-icon name="contrast"></dbp-icon>
</a>
- <ul class="extended-menu hidden">
+ <ul class="extended-menu hidden ${classMap({'ul-right':this.dropdownRight})}">
${this.themes.map(
(theme) => html`
<li class="" id="${theme.class}">
--
GitLab