From 2c2e54d2cb308c8050a1f0aefd2a28ec916859bc Mon Sep 17 00:00:00 2001 From: Charan Girijala <82193104+charangirijala@users.noreply.github.com> Date: Tue, 21 Jan 2025 21:59:21 +0530 Subject: [PATCH] =?UTF-8?q?Dark=20mode=20impl-1=20=F0=9F=8C=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/copy-slds.mjs | 4 + src/layouts/index.html | 66 +++++++++++++++++ src/modules/main/logViewer/logViewer.css | 43 ++++++----- src/modules/main/logViewer/logViewer.html | 18 ++--- src/modules/my/app/app.css | 74 +++++++++++++++++++ src/modules/my/app/app.html | 15 ++-- src/modules/my/app/app.js | 61 ++++++++++++++- src/modules/my/appContent/appContent.css | 6 +- src/modules/my/appContent/appContent.html | 3 +- src/modules/my/appHeader/appHeader.css | 17 +++++ src/modules/my/appHeader/appHeader.html | 51 +++++++++++++ src/modules/my/appHeader/appHeader.js | 3 + .../my/appNavigation/appNavigation.css | 5 +- .../my/appNavigation/appNavigation.html | 14 +--- src/modules/services/theme/theme.js | 31 ++++++++ src/modules/ui/search/search.css | 3 +- src/modules/ui/utilityPanel/utilityPanel.css | 4 +- 17 files changed, 360 insertions(+), 58 deletions(-) create mode 100644 src/modules/my/appHeader/appHeader.css create mode 100644 src/modules/my/appHeader/appHeader.html create mode 100644 src/modules/my/appHeader/appHeader.js create mode 100644 src/modules/services/theme/theme.js diff --git a/scripts/copy-slds.mjs b/scripts/copy-slds.mjs index 7bf8383..820b8b3 100644 --- a/scripts/copy-slds.mjs +++ b/scripts/copy-slds.mjs @@ -7,3 +7,7 @@ fs.cp( console.log('Done copying SLDS resources'); } ); + +fs.cp('./src/styles/styles.css', './src/assets', { recursive: true }, () => { + console.log('Done copying styles.css'); +}); diff --git a/src/layouts/index.html b/src/layouts/index.html index 9e4acf2..b092de9 100644 --- a/src/layouts/index.html +++ b/src/layouts/index.html @@ -15,6 +15,72 @@ rel="stylesheet" href="$assetsDir/styles/salesforce-lightning-design-system.css" /> + + {{{body}}} {{{lwr_resources}}} diff --git a/src/modules/main/logViewer/logViewer.css b/src/modules/main/logViewer/logViewer.css index 2bf4495..8294005 100644 --- a/src/modules/main/logViewer/logViewer.css +++ b/src/modules/main/logViewer/logViewer.css @@ -51,7 +51,7 @@ a { :host { height: 100%; line-height: 1; - color: black; + color: var(--text-color-base); font-size: 0.8125rem; } /* tables still need 'cellspacing="0"' in the markup */ @@ -180,7 +180,8 @@ q { position: relative; overflow: visible; height: 100%; - border-bottom: 1px solid #c9c9c9; + border-bottom: var(--border-width-base) solid + var(--slds-c-card-color-border); padding-bottom: 0.75rem; } @@ -193,7 +194,7 @@ q { font-size: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.25rem; - color: #747474; + color: var(--slds-g-color-neutral-base-50); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; @@ -258,7 +259,7 @@ q { .metrics-widget li .metricsValue { font-size: 1rem; - color: #032d60; + color: #0159e7; } .reportView .reportBuilderContainer @@ -277,6 +278,10 @@ q { overflow: visible; } +.dashboard-container { + border: var(--border-width-base) solid var(--slds-c-card-color-border); + border-radius: var(--border-radius-base); +} table { margin: 0px; padding: 0px; @@ -286,7 +291,7 @@ table { } th, td { - border-right: 0.5px solid #a8b8c7; + border-right: var(--border-width-base) solid var(--slds-c-card-color-border); padding-left: 6px; padding-right: 6px; padding-top: 6px; @@ -296,11 +301,12 @@ td { } td { - border-bottom: 0.5px solid #a8b8c7; + border-bottom: var(--border-width-base) solid + var(--slds-c-card-color-border); } th { - background-color: #ecebea; + background-color: var(--slds-g-color-neutral-base-100); } .lightning-table-cell-measure-header-value { @@ -309,12 +315,15 @@ th { } .slds-page-header { padding: 1rem 1rem; - border-bottom: 1px solid rgb(201, 201, 201); - border-radius: 0.25rem; - background: rgb(243, 243, 243); + /* border-bottom: 1px solid rgb(201, 201, 201); */ + /* border-radius: 0.25rem; */ + background: var(--slds-c-card-color-background); background-clip: padding-box; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); - border: 1px solid rgb(201, 201, 201); + /* border: 1px solid rgb(201, 201, 201); */ + border-top: none; + border-left: none; + border-right: none; } .widgets-inner { @@ -350,14 +359,14 @@ th { } .line-number-text { - color: rgb(68, 68, 68); + color: var(--slds-g-color-neutral-base-50); font-weight: 400; } .line-text { line-height: normal; - color: #16315a; - fill: #16315a; + color: var(--text-color-base); + fill: var(--text-color-base); font-weight: 400; } @@ -428,16 +437,16 @@ th { } .dashboard-widget { - background-color: white; + background-color: var(--slds-c-card-color-background); } .icon-active-filters { background-color: #0176d3; border-color: #0176d3; - color: #fff; + color: var(--text-color-base); } .widget-container { - border-right: 0.1px solid #c9c9c9; + border-right: 0.1px solid var(--slds-c-card-color-border); /* border-left: 0.1px solid grey; */ } diff --git a/src/modules/main/logViewer/logViewer.html b/src/modules/main/logViewer/logViewer.html index b4920ff..836605d 100644 --- a/src/modules/main/logViewer/logViewer.html +++ b/src/modules/main/logViewer/logViewer.html @@ -250,10 +250,8 @@

class="grid-layout" tabindex="-1" style=" - background-color: rgb( - 255, - 255, - 255 + background-color: var( + --slds-c-card-color-background ); background-position: left top; @@ -530,10 +526,8 @@

background-position: left top; background-size: auto; - background-color: rgb( - 255, - 255, - 255 + background-color: var( + --slds-c-card-color-background ); border-radius: 0px; " diff --git a/src/modules/my/app/app.css b/src/modules/my/app/app.css index e69de29..9568410 100644 --- a/src/modules/my/app/app.css +++ b/src/modules/my/app/app.css @@ -0,0 +1,74 @@ +/* First Header */ +.first-header { + position: fixed; + top: 0; + left: 0; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--slds-g-color-neutral-base-100); + color: var(--text-color-base); + padding: 10px 20px; + z-index: 1000; + height: 50px; /* Fixed height */ + transition: + opacity 0.3s ease, + transform 0.3s ease; +} + +.first-header.hidden { + opacity: 0; + transform: translateY(-50px); /* Slide up */ +} + +/* Second Header */ +.second-header { + position: fixed; + top: 50px; /* Below the first header by default */ + left: 0; + width: 100%; + justify-content: space-between; + align-items: center; + background-color: #1b96ff; + color: var(--text-color-base); + /* padding: 10px 20px; */ + z-index: 999; + height: 40px; /* Fixed height */ + transition: top 0.3s ease; /* Smooth transition for position change */ +} + +.second-header.move-to-top { + top: 0; /* Move to the top when the first header is hidden */ +} + +/* Content Section */ +.content { + /* padding: 20px; */ + padding-top: 90px; /* Reserve space for both headers (50px each) */ + height: auto; + background-color: var( + --slds-c-card-color-background + ); /* Optional: To make content distinct */ +} + +/* Logo Animation */ +.logo { + font-size: 1.5rem; + font-weight: bold; +} + +.move-to-second-header { + animation: moveLogo 0.5s ease forwards; +} + +@keyframes moveLogo { + from { + transform: translateY(-50px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} diff --git a/src/modules/my/app/app.html b/src/modules/my/app/app.html index 00c1bc0..ce8501c 100644 --- a/src/modules/my/app/app.html +++ b/src/modules/my/app/app.html @@ -1,8 +1,11 @@ diff --git a/src/modules/my/app/app.js b/src/modules/my/app/app.js index 0f4359d..0e2211c 100644 --- a/src/modules/my/app/app.js +++ b/src/modules/my/app/app.js @@ -1,3 +1,62 @@ import { LightningElement } from 'lwc'; +import { initTheme } from 'services/theme'; -export default class App extends LightningElement {} +export default class App extends LightningElement { + connectedCallback() { + initTheme(); + // window.addEventListener('scroll', this.handleScroll); + } + + disconnectedCallback() { + // window.removeEventListener('scroll', this.handleScroll); + } + + handleScroll = () => { + const firstHeader = this.template.querySelector('.first-header'); + const secondHeader = this.template.querySelector('.second-header'); + + const firstHeaderLogo = + this.template.querySelector('#first-header-logo'); + const secondHeaderLogoContainer = this.template.querySelector( + '#second-header-logo' + ); + console.log( + 'headers: ', + firstHeader, + '2nd: ', + secondHeader, + '1st logo: ', + firstHeaderLogo, + ' 2nd logo: ', + secondHeaderLogoContainer + ); + if (firstHeader && secondHeader) { + console.log('scroll: ', window.scrollY); + if (window.scrollY > 0) { + // Hide the first header + firstHeader.classList.add('hidden'); + + // Move the second header to the top + secondHeader.classList.add('move-to-top'); + + // // Move the logo to the second header + // if (!secondHeaderLogoContainer.querySelector('.logo')) { + // const clonedLogo = firstHeaderLogo.cloneNode(true); + // clonedLogo.classList.add('move-to-second-header'); // Add animation class + // secondHeaderLogoContainer.appendChild(clonedLogo); + //} + } else { + // Show the first header + firstHeader.classList.remove('hidden'); + + // Move the second header back to its default position + secondHeader.classList.remove('move-to-top'); + + // Remove the logo from the second header + // if (secondHeaderLogoContainer.querySelector('.logo')) { + // secondHeaderLogoContainer.innerHTML = ''; + // } + } + } + }; +} diff --git a/src/modules/my/appContent/appContent.css b/src/modules/my/appContent/appContent.css index 2bc669f..1d0be53 100644 --- a/src/modules/my/appContent/appContent.css +++ b/src/modules/my/appContent/appContent.css @@ -1,17 +1,17 @@ :host { - --brandBackgroundPrimary: rgb(238, 244, 255); + --brandBackgroundPrimary: var(--slds-c-card-color-background); --zIndexDefault: 1; --fullWidth: 100%; } .appContent { background-color: var(--brandBackgroundPrimary); z-index: var(--zIndexDefault); - top: 40px; + /* top: 40px; */ width: var(--fullWidth); } .slds-template_default { - padding: 0.5rem; + padding: 1rem; } .oneCenterStage { diff --git a/src/modules/my/appContent/appContent.html b/src/modules/my/appContent/appContent.html index 033b1e2..b539078 100644 --- a/src/modules/my/appContent/appContent.html +++ b/src/modules/my/appContent/appContent.html @@ -1,7 +1,8 @@

+ - diff --git a/src/modules/services/theme/theme.js b/src/modules/services/theme/theme.js new file mode 100644 index 0000000..78e107d --- /dev/null +++ b/src/modules/services/theme/theme.js @@ -0,0 +1,31 @@ +export function getSystemThemePreference() { + return window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light'; +} + +export function applyTheme(theme) { + document.documentElement.setAttribute('data-theme', theme); +} + +export function initTheme() { + // Use stored theme if available, otherwise use system preference + const storedTheme = localStorage.getItem('dftheme'); + const theme = storedTheme || getSystemThemePreference(); + + applyTheme(theme); + + // Listen for system theme changes if no stored theme + if (!storedTheme) { + window + .matchMedia('(prefers-color-scheme: dark)') + .addEventListener('change', (event) => { + applyTheme(event.matches ? 'dark' : 'light'); + }); + } +} + +export function saveThemePreference(theme) { + localStorage.setItem('dftheme', theme); + applyTheme(theme); +} diff --git a/src/modules/ui/search/search.css b/src/modules/ui/search/search.css index 6e39dbd..80fb751 100644 --- a/src/modules/ui/search/search.css +++ b/src/modules/ui/search/search.css @@ -5,7 +5,7 @@ padding: 0; border: 0.0625rem solid #c5d2e0; border-radius: 0.25rem; - background-color: #fff; + background-color: var(--brandBackgroundPrimary); box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.23); @@ -17,6 +17,7 @@ border-radius: 0; padding-left: 0.3125rem; height: 2.125rem; + background-color: var(--brandBackgroundPrimary); } .num-of-results { diff --git a/src/modules/ui/utilityPanel/utilityPanel.css b/src/modules/ui/utilityPanel/utilityPanel.css index ece9a98..9e88251 100644 --- a/src/modules/ui/utilityPanel/utilityPanel.css +++ b/src/modules/ui/utilityPanel/utilityPanel.css @@ -3,8 +3,8 @@ } .utility-panel { width: auto; - left: 0.5rem; - right: 0.5rem; + left: 1rem; + right: 1rem; bottom: 2.5rem; height: 50%; }