design.estate/dees-catalog-geo
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dees-geo-map): Add dark/light theme support for UI and map tiles, subscribe to theme changes and add traffic toggle in navigation

Browse Source
This commit is contained in:
Jürgen Kunz
2026-02-05 16:50:51 +00:00
parent 32454a7d19
commit 54999a52b7
6 changed files with 275 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
ts_web/elements/00componentstyles.ts
View File

@@ -1,4 +1,4 @@
import { css } from '@design.estate/dees-element';
import { css, cssManager } from '@design.estate/dees-element';
/**
* Shared component styles for geo components
@@ -103,8 +103,8 @@ export const toolbarStyles = css`
flex-direction: column;
gap: 4px;
padding: 8px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -120,7 +120,7 @@ export const toolbarStyles = css`
.toolbar-divider {
height: 1px;
margin: 4px 0;
background: var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.tool-button {
@@ -133,13 +133,13 @@ export const toolbarStyles = css`
border: none;
border-radius: 6px;
background: transparent;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.tool-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
}
.tool-button.active {
@@ -170,8 +170,8 @@ export const searchStyles = css`
.search-input-wrapper {
display: flex;
align-items: center;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -187,7 +187,7 @@ export const searchStyles = css`
justify-content: center;
width: 36px;
height: 36px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
flex-shrink: 0;
}
@@ -202,14 +202,14 @@ export const searchStyles = css`
padding: 0 12px 0 0;
border: none;
background: transparent;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
font-size: 13px;
font-family: inherit;
outline: none;
}
.search-input::placeholder {
color: rgba(255, 255, 255, 0.4);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
}
.search-spinner {
@@ -224,7 +224,7 @@ export const searchStyles = css`
.search-spinner svg {
width: 16px;
height: 16px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
animation: spin 1s linear infinite;
}
@@ -243,15 +243,15 @@ export const searchStyles = css`
border: none;
border-radius: 4px;
background: transparent;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
cursor: pointer;
flex-shrink: 0;
transition: background-color 0.15s ease, color 0.15s ease;
}
.search-clear:hover {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
}
.search-clear svg {
@@ -266,8 +266,8 @@ export const searchStyles = css`
right: 0;
max-height: 300px;
overflow-y: auto;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -285,7 +285,7 @@ export const searchStyles = css`
padding: 10px 12px;
cursor: pointer;
transition: background-color 0.1s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
}
.search-result:last-child {
@@ -294,25 +294,25 @@ export const searchStyles = css`
.search-result:hover,
.search-result.highlighted {
background: rgba(255, 255, 255, 0.1);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
}
.search-result-name {
font-size: 13px;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
line-height: 1.3;
}
.search-result-type {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
text-transform: capitalize;
}
.search-no-results {
padding: 12px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
font-size: 13px;
}
`;
@@ -323,8 +323,8 @@ export const searchStyles = css`
export const navigationStyles = css`
.navigation-panel {
width: 300px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -337,7 +337,7 @@ export const navigationStyles = css`
align-items: center;
gap: 8px;
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.nav-header-icon {
@@ -357,14 +357,14 @@ export const navigationStyles = css`
.nav-header-title {
font-size: 13px;
font-weight: 600;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
}
.nav-mode-selector {
display: flex;
gap: 4px;
padding: 8px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.nav-mode-btn {
@@ -377,15 +377,15 @@ export const navigationStyles = css`
border: none;
border-radius: 6px;
background: transparent;
color: rgba(255, 255, 255, 0.6);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.6)')};
font-size: 12px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-mode-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.8)', 'rgba(255, 255, 255, 0.9)')};
}
.nav-mode-btn.active {
@@ -398,6 +398,67 @@ export const navigationStyles = css`
height: 16px;
}
/* Traffic toggle in navigation panel */
.nav-traffic-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.nav-traffic-toggle-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
}
.nav-traffic-toggle-label svg {
width: 14px;
height: 14px;
color: var(--geo-tool-active, #0084ff);
}
.nav-traffic-toggle-btn {
position: relative;
width: 36px;
height: 20px;
border: none;
border-radius: 10px;
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.2)')};
cursor: pointer;
transition: background-color 0.2s ease;
padding: 0;
}
.nav-traffic-toggle-btn.active {
background: var(--geo-tool-active, #0084ff);
}
.toggle-track {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s ease;
}
.nav-traffic-toggle-btn.active .toggle-thumb {
transform: translateX(16px);
}
.nav-inputs {
padding: 12px;
display: flex;
@@ -437,10 +498,10 @@ export const navigationStyles = css`
width: 100%;
height: 36px;
padding: 0 36px 0 12px;
border: 1px solid rgba(255, 255, 255, 0.15);
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
border-radius: 6px;
background: rgba(0, 0, 0, 0.2);
color: var(--geo-text, #fff);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.2)')};
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
font-size: 13px;
font-family: inherit;
outline: none;
@@ -452,7 +513,7 @@ export const navigationStyles = css`
}
.nav-input::placeholder {
color: rgba(255, 255, 255, 0.4);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
}
.nav-input.has-value {
@@ -472,14 +533,14 @@ export const navigationStyles = css`
border: none;
border-radius: 4px;
background: transparent;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-set-map-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.8)', 'rgba(255, 255, 255, 0.9)')};
}
.nav-set-map-btn.active {
@@ -505,13 +566,13 @@ export const navigationStyles = css`
border: none;
border-radius: 4px;
background: transparent;
color: rgba(255, 255, 255, 0.4);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.3)', 'rgba(255, 255, 255, 0.4)')};
cursor: pointer;
transition: color 0.15s ease;
}
.nav-input-clear:hover {
color: rgba(255, 255, 255, 0.8);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
}
.nav-input-clear svg {
@@ -526,8 +587,8 @@ export const navigationStyles = css`
right: 0;
max-height: 200px;
overflow-y: auto;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.98));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.98)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 6px;
z-index: 20;
}
@@ -539,7 +600,7 @@ export const navigationStyles = css`
padding: 8px 12px;
cursor: pointer;
transition: background-color 0.1s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
}
.nav-search-result:last-child {
@@ -548,12 +609,12 @@ export const navigationStyles = css`
.nav-search-result:hover,
.nav-search-result.highlighted {
background: rgba(255, 255, 255, 0.1);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
}
.nav-search-result-name {
font-size: 12px;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
@@ -562,7 +623,7 @@ export const navigationStyles = css`
.nav-search-result-type {
font-size: 10px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
text-transform: capitalize;
}
@@ -602,12 +663,12 @@ export const navigationStyles = css`
}
.nav-action-btn.secondary {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
}
.nav-action-btn.secondary:hover {
background: rgba(255, 255, 255, 0.15);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.15)')};
}
.nav-action-btn svg {
@@ -622,8 +683,8 @@ export const navigationStyles = css`
gap: 16px;
padding: 12px;
background: rgba(0, 132, 255, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-top: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.nav-summary-item {
@@ -632,7 +693,7 @@ export const navigationStyles = css`
gap: 6px;
font-size: 14px;
font-weight: 600;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
}
.nav-summary-item svg {
@@ -650,7 +711,7 @@ export const navigationStyles = css`
display: flex;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
transition: background-color 0.15s ease;
cursor: pointer;
}
@@ -660,7 +721,7 @@ export const navigationStyles = css`
}
.nav-step:hover {
background: rgba(255, 255, 255, 0.05);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.05)')};
}
.nav-step-icon {
@@ -670,8 +731,8 @@ export const navigationStyles = css`
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
font-size: 14px;
flex-shrink: 0;
}
@@ -683,14 +744,14 @@ export const navigationStyles = css`
.nav-step-instruction {
font-size: 13px;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
line-height: 1.4;
margin-bottom: 2px;
}
.nav-step-distance {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
}
.nav-error {
@@ -716,7 +777,7 @@ export const navigationStyles = css`
justify-content: center;
gap: 8px;
padding: 16px;
color: rgba(255, 255, 255, 0.6);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.6)')};
font-size: 13px;
}
@@ -729,7 +790,7 @@ export const navigationStyles = css`
.nav-empty-steps {
padding: 16px 12px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
font-size: 12px;
}
@@ -739,7 +800,7 @@ export const navigationStyles = css`
align-items: center;
gap: 12px;
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.nav-back-btn {
@@ -750,15 +811,15 @@ export const navigationStyles = css`
height: 32px;
border: none;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
color: var(--geo-text, #fff);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer;
transition: background-color 0.15s ease;
flex-shrink: 0;
}
.nav-back-btn:hover {
background: rgba(255, 255, 255, 0.2);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.2)')};
}
.nav-back-btn svg {
@@ -774,7 +835,7 @@ export const navigationStyles = css`
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
}
.nav-directions-summary svg {
@@ -784,7 +845,7 @@ export const navigationStyles = css`
}
.nav-directions-separator {
color: rgba(255, 255, 255, 0.4);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.3)', 'rgba(255, 255, 255, 0.4)')};
margin: 0 4px;
}
@@ -852,12 +913,12 @@ export const navigationStyles = css`
.nav-traffic-text {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
}
.nav-traffic-delay {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
margin-left: auto;
}
`;
@@ -888,8 +949,8 @@ export const headerToolbarStyles = css`
align-items: center;
gap: 12px;
padding: 8px 12px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
border-bottom: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
min-height: 52px;
position: relative;
z-index: 10;
@@ -919,7 +980,7 @@ export const headerToolbarStyles = css`
.header-toolbar .toolbar-divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.15);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
margin: 0 4px;
}
@@ -934,13 +995,13 @@ export const headerToolbarStyles = css`
border: none;
border-radius: 6px;
background: transparent;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.header-toolbar .tool-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
}
.header-toolbar .tool-button.active {
@@ -967,8 +1028,8 @@ export const headerToolbarStyles = css`
/* Left Sidebar - Navigation Panel */
.left-sidebar {
grid-area: left-panel;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
border-right: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border-right: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
overflow: hidden;
display: flex;
flex-direction: column;
@@ -994,8 +1055,8 @@ export const headerToolbarStyles = css`
/* Right Sidebar - Draw Panel */
.right-sidebar {
grid-area: right-panel;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
border-left: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
border-left: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
overflow: hidden;
display: flex;
flex-direction: column;
@@ -1021,7 +1082,7 @@ export const headerToolbarStyles = css`
align-items: center;
gap: 8px;
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.draw-panel-header-icon {
@@ -1041,7 +1102,7 @@ export const headerToolbarStyles = css`
.draw-panel-header-title {
font-size: 13px;
font-weight: 600;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
}
.draw-tools-grid {
@@ -1058,17 +1119,17 @@ export const headerToolbarStyles = css`
justify-content: center;
gap: 6px;
padding: 12px 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
background: transparent;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.draw-tool-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
border-color: rgba(255, 255, 255, 0.2);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(255, 255, 255, 0.2)')};
}
.draw-tool-button.active {
@@ -1096,7 +1157,7 @@ export const headerToolbarStyles = css`
.draw-panel-divider {
height: 1px;
margin: 4px 12px;
background: rgba(255, 255, 255, 0.1);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.draw-panel-actions {
@@ -1112,10 +1173,10 @@ export const headerToolbarStyles = css`
justify-content: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
background: transparent;
color: var(--geo-text, #fff);
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer;
font-size: 12px;
font-weight: 500;
@@ -1123,8 +1184,8 @@ export const headerToolbarStyles = css`
}
.draw-action-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
border-color: rgba(255, 255, 255, 0.2);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(255, 255, 255, 0.2)')};
}
.draw-action-button.active {
@@ -1145,7 +1206,7 @@ export const headerToolbarStyles = css`
.draw-action-button.danger:hover {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.4);
color: #fca5a5;
color: ${cssManager.bdTheme('#dc2626', '#fca5a5')};
}
/* Map container takes grid area */
@@ -1177,9 +1238,9 @@ export const trafficStyles = css`
padding: 0;
border: none;
border-radius: 8px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
color: var(--geo-text, #fff);
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
cursor: pointer;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -1187,7 +1248,7 @@ export const trafficStyles = css`
}
.traffic-toggle-btn:hover:not(:disabled) {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.15));
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.15)')};
}
.traffic-toggle-btn.active {
@@ -1215,7 +1276,7 @@ export const trafficStyles = css`
justify-content: center;
width: 14px;
height: 14px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border-radius: 50%;
}
@@ -1230,8 +1291,8 @@ export const trafficStyles = css`
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 6px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -1252,7 +1313,7 @@ export const trafficStyles = css`
.traffic-status-text {
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
}
.traffic-error {
@@ -1273,8 +1334,8 @@ export const trafficStyles = css`
/* Traffic Legend */
.traffic-legend {
padding: 10px 12px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 8px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -1285,7 +1346,7 @@ export const trafficStyles = css`
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.5);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
margin-bottom: 8px;
}
@@ -1300,7 +1361,7 @@ export const trafficStyles = css`
align-items: center;
gap: 8px;
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
}
.traffic-legend-color {
@@ -1312,8 +1373,8 @@ export const trafficStyles = css`
.traffic-legend-updated {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-top: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
}
`;

91
ts_web/elements/00group-map/dees-geo-map/dees-geo-map.ts
View File

@@ -8,6 +8,7 @@ import {
type TemplateResult,
cssManager,
css,
domtools,
} from '@design.estate/dees-element';
import { DeesContextmenu } from '@design.estate/dees-catalog';
import { geoComponentStyles, mapContainerStyles, toolbarStyles, searchStyles, navigationStyles, trafficStyles, headerToolbarStyles } from '../../00componentstyles.js';
@@ -175,41 +176,63 @@ export class DeesGeoMap extends DeesElement {
.maplibregl-ctrl-attrib {
font-size: 11px;
background: rgba(0, 0, 0, 0.5);
color: rgba(255, 255, 255, 0.8);
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.8)', 'rgba(0, 0, 0, 0.5)')};
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
padding: 2px 6px;
border-radius: 4px;
}
.maplibregl-ctrl-attrib a {
color: rgba(255, 255, 255, 0.8);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
}
.feature-count {
padding: 6px 12px;
background: rgba(30, 30, 30, 0.9);
border: 1px solid rgba(255, 255, 255, 0.1);
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
border-radius: 6px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
}
`,
];
// Map theme subscription for cleanup
private mapThemeSubscription: { unsubscribe: () => void } | null = null;
// ─── Lifecycle ──────────────────────────────────────────────────────────────
public async firstUpdated() {
this.initializeControllers();
await this.initializeMap();
// Subscribe to theme changes to update map style
this.subscribeToThemeChanges();
}
public async disconnectedCallback() {
await super.disconnectedCallback();
if (this.mapThemeSubscription) {
this.mapThemeSubscription.unsubscribe();
this.mapThemeSubscription = null;
}
this.cleanup();
}
/**
* Subscribe to theme changes via domtools
*/
private async subscribeToThemeChanges(): Promise<void> {
const domtoolsInstance = await domtools.DomTools.setupDomTools();
this.mapThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe(
(_goBright: boolean) => {
this.updateMapStyleForTheme();
}
);
}
public updated(changedProperties: Map<string, unknown>) {
super.updated(changedProperties);
if (changedProperties.has('dragToDraw') && this.draw && this.map) {
@@ -293,11 +316,21 @@ export class DeesGeoMap extends DeesElement {
getMap: () => this.map,
// Connect traffic controller for traffic-aware routing
getTrafficRoute: async (start, end, mode) => {
if (this.trafficController?.supportsTrafficRouting()) {
if (this.showTraffic && this.trafficController?.supportsTrafficRouting()) {
return this.trafficController.fetchRouteWithTraffic(start, end, mode);
}
return null;
},
// Traffic toggle callbacks
onTrafficToggle: (enabled) => {
if (enabled) {
this.trafficController?.enable();
} else {
this.trafficController?.disable();
}
this.showTraffic = enabled;
},
getTrafficEnabled: () => this.showTraffic,
});
this.navigationController.navigationMode = this.navigationMode;
@@ -377,30 +410,30 @@ export class DeesGeoMap extends DeesElement {
private getMapStyle(): maplibregl.StyleSpecification | string {
if (this.mapStyle === 'osm') {
return {
version: 8,
sources: {
'osm-tiles': {
type: 'raster',
tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
tileSize: 256,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
},
},
layers: [
{
id: 'osm-tiles',
type: 'raster',
source: 'osm-tiles',
minzoom: 0,
maxzoom: 19,
},
],
};
// Check current theme and use appropriate tiles
const isDarkTheme = !cssManager.goBright;
if (isDarkTheme) {
// CartoDB Dark Matter GL vector style - high quality dark theme
return 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
} else {
// CartoDB Voyager GL vector style - high quality light theme
return 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
}
}
return this.mapStyle;
}
/**
* Update the map style when theme changes
*/
private updateMapStyleForTheme(): void {
if (!this.map || !this.isMapReady || this.mapStyle !== 'osm') return;
const newStyle = this.getMapStyle();
this.map.setStyle(newStyle as maplibregl.StyleSpecification);
}
// ─── Terra Draw Initialization ──────────────────────────────────────────────
private initializeTerraDraw() {
@@ -934,9 +967,7 @@ export class DeesGeoMap extends DeesElement {
${renderIcon('polygon')}
</button>
` : ''}
${showTrafficControls && this.trafficController
? this.trafficController.render()
: ''}
${this.trafficController?.render()}
<div class="toolbar-divider"></div>
<button
class="tool-button"

21
ts_web/elements/00group-map/dees-geo-map/geo-map.navigation.ts
View File

@@ -65,6 +65,10 @@ export interface INavigationControllerCallbacks {
end: [number, number],
mode: TNavigationMode
) => Promise<ITrafficAwareRoute | null>;
/** Optional callback when traffic toggle is changed */
onTrafficToggle?: (enabled: boolean) => void;
/** Optional callback to get current traffic state */
getTrafficEnabled?: () => boolean;
}
/**
@@ -832,6 +836,7 @@ export class NavigationController {
private renderPlanningView(extraClass?: string): TemplateResult {
const { isLoading, error, startPoint, endPoint } = this.navigationState;
const canCalculate = startPoint && endPoint && !isLoading;
const trafficEnabled = this.callbacks.getTrafficEnabled?.() ?? false;
return html`
<div class="navigation-panel ${extraClass || ''}">
@@ -864,6 +869,22 @@ export class NavigationController {
</button>
</div>
<div class="nav-traffic-toggle">
<div class="nav-traffic-toggle-label">
${renderIcon('traffic')}
<span>Traffic-aware routing</span>
</div>
<button
class="nav-traffic-toggle-btn ${trafficEnabled ? 'active' : ''}"
@click=${() => this.callbacks.onTrafficToggle?.(!trafficEnabled)}
title="${trafficEnabled ? 'Disable traffic' : 'Enable traffic'}"
>
<span class="toggle-track">
<span class="toggle-thumb"></span>
</span>
</button>
</div>
<div class="nav-inputs">
${this.renderNavInput('start', 'Start point', this.navStartSearchQuery, this.navStartSearchResults)}
${this.renderNavInput('end', 'End point', this.navEndSearchQuery, this.navEndSearchResults)}