From 46602851aac8c4903e051dfdf01fcc41efc1d926 Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Wed, 22 Jan 2025 07:34:06 +0100 Subject: [PATCH] feat(elements): Enhance theme handling and CSS organization for consent component --- changelog.md | 7 + ts_web/00_commitinfo_data.ts | 2 +- .../elements/consentsoftware-cookieconsent.ts | 172 ++++++++++-------- ts_web/elements/consentsoftware-tabs.ts | 11 +- 4 files changed, 112 insertions(+), 80 deletions(-) diff --git a/changelog.md b/changelog.md index 02b9475..722f552 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # Changelog +## 2025-01-22 - 1.6.0 - feat(elements) +Enhance theme handling and CSS organization for consent component + +- Introduced theme-specific CSS variables for better theming support in consentsoftware-cookieconsent. +- Reorganized styles in consentsoftware-cookieconsent for cleaner look and consistency. +- Added media queries for responsive design in consentsoftware-tabs. + ## 2025-01-21 - 1.5.4 - fix(consentsoftware-components) Add interactive consent software components for managing cookie levels. diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 76c0fd9..b5963cd 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@consent.software/catalog', - version: '1.5.4', + version: '1.6.0', description: 'A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.' } diff --git a/ts_web/elements/consentsoftware-cookieconsent.ts b/ts_web/elements/consentsoftware-cookieconsent.ts index 38e4fe7..6e60a24 100644 --- a/ts_web/elements/consentsoftware-cookieconsent.ts +++ b/ts_web/elements/consentsoftware-cookieconsent.ts @@ -21,18 +21,20 @@ export class ConsentsoftwareCookieconsent extends LitElement { public csWebclientInstance = new csWebclient.CsWebclient(); public csWebclientRan = false; + // Reflects the current theme ('light' or 'dark') @property({ type: String, reflect: true }) public theme: 'light' | 'dark' = 'light'; /** - * We bind `heightPixels` to a CSS variable (--cookieconsent-height). - * Then we can do margin-bottom animations in CSS. + * Define component styles with CSS variables that adjust based on theme. + * The default variables serve as baseline for the light theme. + * Theme-specific overrides modify these for dark mode. */ public static styles = css` :host { font-family: ${shared.fontStack}; user-select: none; - /* Default theme variables */ + /* Default variables for Light Theme */ --text-color: #333; --background-color: #eeeeee; --accent-color: #333333; @@ -41,8 +43,14 @@ export class ConsentsoftwareCookieconsent extends LitElement { --icon-color: #4496f5; --link-color: #333; --padding-sides: 16px; + /* Additional variables for modal and info container styling */ + --info-bg: rgba(0, 0, 0, 0.1); + --info-text: rgba(255, 255, 255, 0.5); + --modal-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); } + /* Dark Theme Overrides: + When theme attribute is 'dark', override variables accordingly. */ :host([theme='dark']) { --text-color: #fff; --background-color: #111; @@ -51,8 +59,14 @@ export class ConsentsoftwareCookieconsent extends LitElement { --button-hover-bg: #222222; --icon-color: #4496f5; --link-color: #fff; + --info-bg: rgba(0, 0, 0, 0.1); + --info-text: rgba(255, 255, 255, 0.5); + --modal-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6); } + /* Light Theme Overrides: + Explicit light theme settings, currently matching defaults. + Can be customized independently if desired. */ :host([theme='light']) { --text-color: #333; --background-color: #eeeeee; @@ -61,33 +75,39 @@ export class ConsentsoftwareCookieconsent extends LitElement { --button-hover-bg: #f2f2f2; --icon-color: #4496f5; --link-color: #333; + --info-bg: rgba(0, 0, 0, 0.1); + --info-text: rgba(0, 0, 0, 0.5); + --modal-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); } + /* Overlay covering the page behind the modal */ .pageOverlay { position: fixed; - top: 0px; - bottom: 0px; - right: 0px; - left: 0px; + top: 0; + bottom: 0; + right: 0; + left: 0; display: grid; align-items: center; justify-content: center; - z-index: 1000; /* standard z-index for fixed elements */ + z-index: 1000; /* Ensures the overlay is on top of other elements */ background: rgba(255, 255, 255, 0); backdrop-filter: blur(0px); transition: all 0.2s; } + /* Shake animation for overlay when clicked */ .pageOverlay.shake { background: rgba(0, 0, 0, 0.5) !important; } + /* Modal box styling using theme variables for colors and shadows */ .modalBox { display: block; color: var(--text-color); background: var(--background-color); - box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6); - position: realtive; + box-shadow: var(--modal-box-shadow); + position: relative; border: 1px dotted rgba(255, 255, 255, 0.1); border-top: 1px solid var(--accent-color); border-radius: 16px; @@ -95,12 +115,22 @@ export class ConsentsoftwareCookieconsent extends LitElement { min-width: calc(100vw / 3); box-sizing: border-box; overflow: hidden; - will-change: transform; /* ensure efficient rendering */ + will-change: transform; transition: all 0.3s; transform: scale(0.95); opacity: 0; } + /* Media query for mobile devices: stack buttons vertically */ + @media (max-width: 600px) { + .modalBox { + height: 100vh; + box-shadow: none; + border-radius: 0px; + } + } + + /* Shake animation for modal box */ .modalBox.shake { animation: shake 150ms 2 linear; } @@ -117,10 +147,7 @@ export class ConsentsoftwareCookieconsent extends LitElement { } } - /* - * Toggle display based on [show] attribute - * (so if show=false, the banner doesn't show at all). - */ + /* Toggle display based on [show] attribute */ :host([show='false']) { display: none; } @@ -151,25 +178,14 @@ export class ConsentsoftwareCookieconsent extends LitElement { gap: 16px; } - .info-container { - color: var(--text-color); - text-align: center; - line-height: 3em; - background: rgba(0, 0, 0, 0.1); - border-top: 1px dotted rgba(255, 255, 255, 0.1); - font-size: 0.8em; - color: rgba(255, 255, 255, 0.5); - } - - .info-container a { - text-decoration: underline; - color: var(--link-color); - transition: color 0.2s; - } - .info-container a:hover { - color: #ffffff; + /* Media query for mobile devices: stack buttons vertically */ + @media (max-width: 600px) { + .button-container { + grid-template-columns: 1fr; + } } + /* Consent button styling using theme variables */ .consent-button { border-radius: 3px; background: var(--button-bg); @@ -184,10 +200,30 @@ export class ConsentsoftwareCookieconsent extends LitElement { .consent-button:hover { background: var(--button-hover-bg); } + + /* Use theme variables for info container background and text */ + .info-container { + text-align: center; + line-height: 3em; + background: var(--info-bg); + border-top: 1px dotted rgba(255, 255, 255, 0.1); + font-size: 0.8em; + color: var(--info-text); + } + + .info-container a { + text-decoration: underline; + color: var(--link-color); + transition: color 0.2s; + } + .info-container a:hover { + color: #ffffff; + } `; constructor() { super(); + // Initially hide the consent banner until needed this.setAttribute('show', 'false'); } @@ -205,36 +241,6 @@ export class ConsentsoftwareCookieconsent extends LitElement { and choose which cookie level you are willing to accept. -
consent management powered by consent.software - (Open Source)
@@ -271,41 +276,44 @@ export class ConsentsoftwareCookieconsent extends LitElement { } /** - * Called when the element is inserted into the DOM. + * Lifecycle method called when the element is connected to the DOM. + * It sets up the theme and displays the consent banner if no cookie levels are set. */ public async connectedCallback() { super.connectedCallback(); - this.updateTheme(); + this.updateTheme(); // Initialize theme based on system preference const cookieLevel = await this.csWebclientInstance.getCookieLevels(); if (!cookieLevel) { + // Show consent banner if cookie levels haven't been set yet this.setAttribute('show', 'true'); requestAnimationFrame(async () => { await this.updated(); const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay'); if (pageOverlay) { + // Apply dark overlay styling when modal appears pageOverlay.style.background = 'rgba(0,0,0, 0.5)'; pageOverlay.style.backdropFilter = 'blur(20px)'; } const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox'); if (modalBox) { + // Animate modal box appearance modalBox.style.transform = `scale(1)`; modalBox.style.opacity = '1'; } }); } else { + // Hide banner if cookie levels are already set this.setAttribute('show', 'false'); } } - /** - * Called after the first render of the component. - * We measure the actual height of the banner and update the CSS variable. - */ - public async firstUpdated() {} + public async firstUpdated() { + // Placeholder for any logic needed after first render + } /** - * Called whenever the element is updated or re-rendered. + * Called after updates. Logs banner height and runs consent scripts if necessary. */ public async updated() { console.log(`The height of the cookie banner is ${this.shadowRoot?.host?.clientHeight}px`); @@ -317,7 +325,8 @@ export class ConsentsoftwareCookieconsent extends LitElement { } /** - * Sets the user’s chosen cookie level(s) and hides the banner. + * Handles consent button clicks, sets cookie levels, and hides the banner. + * Uses theme variables for styling transitions. */ private async handleConsentButtonClick( event: MouseEvent, @@ -326,21 +335,27 @@ export class ConsentsoftwareCookieconsent extends LitElement { console.log(`Set level to ${levelsArg}`); const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay'); if (pageOverlay) { + // Fade out overlay effect using inline styles for transition pageOverlay.style.background = 'rgba(255,255,255, 0)'; pageOverlay.style.backdropFilter = 'blur(0px)'; } const modalBox: HTMLDivElement = this.shadowRoot?.querySelector('.modalBox'); if (modalBox) { + // Scale down and fade out modal box before hiding modalBox.style.transform = `scale(0.95)`; modalBox.style.opacity = '0'; } + // Save user consent preferences await this.csWebclientInstance.setCookieLevels(levelsArg); await delayFor(300); - this.setAttribute('show', 'false'); - // After user selection, re-check for any required scripts to run - this.updated(); + this.setAttribute('show', 'false'); // Hide the consent banner + this.updated(); // Trigger any post-consent actions } + /** + * Handles clicks on the page overlay. If clicked outside the modal, + * triggers a shake animation as feedback. + */ private async pageOverlayClick(e: MouseEvent) { if (e.target === e.currentTarget) { const pageOverlay: HTMLDivElement = this.shadowRoot?.querySelector('.pageOverlay'); @@ -356,12 +371,15 @@ export class ConsentsoftwareCookieconsent extends LitElement { } /** - * Dynamically switches the theme between light/dark, - * respecting `prefers-color-scheme` by default. + * Dynamically switches the theme between light and dark. + * Listens for system theme changes to update the component's theme. */ private updateTheme() { + // Check the initial system preference for dark mode const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; this.theme = prefersDark ? 'dark' : 'light'; + + // Listen for changes in the system color scheme preference window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { this.theme = e.matches ? 'dark' : 'light'; }); diff --git a/ts_web/elements/consentsoftware-tabs.ts b/ts_web/elements/consentsoftware-tabs.ts index a941a58..193c296 100644 --- a/ts_web/elements/consentsoftware-tabs.ts +++ b/ts_web/elements/consentsoftware-tabs.ts @@ -24,6 +24,13 @@ export class ConsentsoftwareTabs extends LitElement { cursor: pointer; } + /* Media query for mobile devices: stack buttons vertically */ + @media (max-width: 600px) { + .tabs .tab { + font-size: 0.8em; + } + } + .selector { position: absolute; width: calc(100% / 3); @@ -44,7 +51,7 @@ export class ConsentsoftwareTabs extends LitElement {
Consent
Details
-
Cookie Policy + Legal Info
+
Cookie Policy
`; @@ -61,4 +68,4 @@ export class ConsentsoftwareTabs extends LitElement { } } } -} \ No newline at end of file +}