From ca91c1ce6f85386740937bffb0b3dc13f17199c8 Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 1 Feb 2022 14:31:16 +0100
Subject: [PATCH] Add the theme switcher demo activity to toolkit showcase
---
toolkit-showcase/README.md | 2 +-
.../assets/dbp-toolkit-showcase.html.ejs | 50 +++++++++++++++
...p-toolkit-showcase.topic.metadata.json.ejs | 3 +-
toolkit-showcase/src/dbp-demo-template.js | 3 +-
.../src/dbp-theme-switcher-demo-activity.js | 64 +++++++++++++++++++
5 files changed, 119 insertions(+), 3 deletions(-)
diff --git a/toolkit-showcase/README.md b/toolkit-showcase/README.md
index 65d449d3..5084b33a 100644
--- a/toolkit-showcase/README.md
+++ b/toolkit-showcase/README.md
@@ -18,7 +18,7 @@ You can then open <http://127.0.0.1:8001/>.
1) Add demo activity path to `input` list of `rollup.config.js`
2) Create `assets/*.metadata.json` file like `assets/file-handling.metadata.json`
-3) Reference in `assets/*.metadata.json` file in the `activities` part of `assets/dbp-toolkit-demo.topic.metadata.json.ejs`
+3) Reference in `assets/*.metadata.json` file in the `activities` part of `assets/dbp-toolkit-showcase.topic.metadata.json.ejs`
## Importing demo activities
- imported demo activity has to be a `export class`
diff --git a/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs b/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
index 393ff138..0e67c159 100644
--- a/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
+++ b/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
@@ -53,6 +53,56 @@
--dbp-override-warning-text-color: black;
--dbp-override-success-bg-color: #259207;
}
+
+ .light-theme{
+ --dbp-override-base: white;
+ --dbp-override-base-inverted: black;
+ --dbp-override-text: black;
+ --dbp-override-text-inverted: white;
+ --dbp-override-text-muted: #767676;
+ --dbp-override-accent: #c24f68;
+ --dbp-override-primary-base: #2a4491;
+ --dbp-override-primary-text: white;
+ --dbp-override-primary-border: 1px solid #2a4491;
+ --dbp-override-secondary-base: white;
+ --dbp-override-secondary-text: black;
+ --dbp-override-secondary-border: 1px solid black;
+ --dbp-override-info: #2a4491;
+ --dbp-override-success: #188018;
+ --dbp-override-warning-as-text: #c15500;
+ --dbp-override-warning: #f99a41;
+ --dbp-override-danger: #de3535;
+ --dbp-override-border: 1px solid black;
+ --dbp-override-border-radius: 0px;
+ --dbp-override-hover-base: black;
+ --dbp-override-hover-text: white;
+
+ }
+
+ .dark-theme{
+ --dbp-override-base: #151515;
+ --dbp-override-base-inverted: white;
+ --dbp-override-text: white;
+ --dbp-override-text-inverted: #151515;
+ --dbp-override-text-muted: #666666;
+ --dbp-override-accent: #c24f68;
+ --dbp-override-primary-base: #8ca4eb;
+ --dbp-override-primary-text: #151515;
+ --dbp-override-primary-border: 1px solid #8ca4eb;
+ --dbp-override-secondary-base: #151515;
+ --dbp-override-secondary-text: white;
+ --dbp-override-secondary-border: 1px solid white;
+ --dbp-override-info: #8ca4eb;
+ --dbp-override-success: #7acc79;
+ --dbp-override-warning-as-text: #f99a41;
+ --dbp-override-warning: #f99a41;
+ --dbp-override-danger: #de3535;
+ --dbp-override-border: 1px solid white;
+ --dbp-override-border-radius: 0px;
+ --dbp-override-hover-base: white;
+ --dbp-override-hover-text: #151515;
+
+ }
</style>
<!-- Preloading/Preconnecting -->
diff --git a/toolkit-showcase/assets/dbp-toolkit-showcase.topic.metadata.json.ejs b/toolkit-showcase/assets/dbp-toolkit-showcase.topic.metadata.json.ejs
index da37a2ac..01a41e43 100644
--- a/toolkit-showcase/assets/dbp-toolkit-showcase.topic.metadata.json.ejs
+++ b/toolkit-showcase/assets/dbp-toolkit-showcase.topic.metadata.json.ejs
@@ -26,7 +26,8 @@
{"path": "matomo.metadata.json"},
{"path": "person-profile.metadata.json"},
{"path": "file-handling.metadata.json"},
- {"path": "tooltip.metadata.json"}
+ {"path": "tooltip.metadata.json"},
+ {"path": "theme-switcher.metadata.json"}
],
"attributes": []
}
\ No newline at end of file
diff --git a/toolkit-showcase/src/dbp-demo-template.js b/toolkit-showcase/src/dbp-demo-template.js
index ee5e2e21..68bdfa14 100644
--- a/toolkit-showcase/src/dbp-demo-template.js
+++ b/toolkit-showcase/src/dbp-demo-template.js
@@ -2,6 +2,7 @@ import {css, html} from 'lit';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
//import {ClassName} from '@dbp-toolkit/package-name/src/dbp-demo-activity-name'; TODO
import * as commonStyles from '@dbp-toolkit/common/styles';
+import * as commonUtils from "@dbp-toolkit/common/utils";
import {unsafeHTML} from 'lit/directives/unsafe-html.js';
// import readme from '@dbp-toolkit/class-name/README.md'; TODO
import * as demoStyles from "./styles";
@@ -59,7 +60,7 @@ export class DbpActivityNameDemoActivity extends ScopedElementsMixin(AdapterLitE
return html`
<!--
TODO
- ${unsafeHTML('readme')}
+ ${unsafeHTML(readme)}
<dbp-class-name-demo id="demo" lang="${this.lang}" entry-point-url="${this.entryPointUrl}"></dbp-class-name-demo>
-->
`;
diff --git a/toolkit-showcase/src/dbp-theme-switcher-demo-activity.js b/toolkit-showcase/src/dbp-theme-switcher-demo-activity.js
index e69de29b..2791fabd 100644
--- a/toolkit-showcase/src/dbp-theme-switcher-demo-activity.js
+++ b/toolkit-showcase/src/dbp-theme-switcher-demo-activity.js
@@ -0,0 +1,64 @@
+import {css, html} from 'lit';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {ThemeSwitcherDemo} from '@dbp-toolkit/theme-switcher/src/demo';
+import * as commonStyles from '@dbp-toolkit/common/styles';
+import * as commonUtils from "@dbp-toolkit/common/utils";
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import readme from '@dbp-toolkit/theme-switcher/README.md';
+import * as demoStyles from "./styles";
+import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
+
+export class DbpThemeSwitcherDemoActivity extends ScopedElementsMixin(AdapterLitElement) {
+ constructor() {
+ super();
+ this.lang = 'en';
+ }
+
+ static get scopedElements() {
+ return {
+ 'dbp-theme-switcher-demo': ThemeSwitcherDemo,
+ };
+ }
+
+ static get properties() {
+ return {
+ ...super.properties,
+ lang: { type: String }
+ };
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ this.updateComplete.then(()=>{
+ });
+ }
+
+ static get styles() {
+ // language=css
+ return [
+ commonStyles.getThemeCSS(),
+ commonStyles.getGeneralCSS(),
+ demoStyles.getDemoCSS(),
+ css`
+ h1.title {margin-bottom: 1em;}
+ div.container {margin-bottom: 1.5em;}
+
+ #demo{
+ display: block;
+ padding-top: 50px;
+ }
+
+ `
+ ];
+ }
+
+ render() {
+ return html`
+ ${unsafeHTML(readme)}
+ <dbp-theme-switcher-demo id="demo" lang="${this.lang}"></dbp-theme-switcher-demo>
+ `;
+ }
+}
+
+commonUtils.defineCustomElement('dbp-theme-switcher-demo-activity', DbpThemeSwitcherDemoActivity);
--
GitLab