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

update

Browse Source
This commit is contained in:
Jürgen Kunz
2026-01-04 11:29:19 +00:00
parent 1134cba575
commit 61b79aa4dc
6 changed files with 119 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
ts_web/elements/wcc-dashboard.ts
View File

@@ -66,6 +66,10 @@ export class WccDashboard extends DeesElement {
@property({ attribute: false })
accessor pinnedItems: Set<string> = new Set();
// Sidebar width (resizable)
@property({ type: Number })
accessor sidebarWidth: number = 200;
// Derived from selectedViewport - no need for separate property
public get isNative(): boolean {
return this.selectedViewport === 'native';
@@ -127,6 +131,7 @@ export class WccDashboard extends DeesElement {
.selectedItem=${this.selectedItem}
.searchQuery=${this.searchQuery}
.pinnedItems=${this.pinnedItems}
.sidebarWidth=${this.sidebarWidth}
.isNative=${this.isNative}
@selectedType=${(eventArg) => {
this.selectedType = eventArg.detail;
@@ -145,6 +150,15 @@ export class WccDashboard extends DeesElement {
this.pinnedItems = eventArg.detail;
this.updateUrlWithScrollState();
}}
@widthChanged=${async (eventArg: CustomEvent) => {
this.sidebarWidth = eventArg.detail;
this.updateUrlWithScrollState();
const frame = await this.wccFrame;
if (frame) {
frame.sidebarWidth = eventArg.detail;
frame.requestUpdate();
}
}}
></wcc-sidebar>
<wcc-properties
.dashboardRef=${this}
@@ -153,6 +167,7 @@ export class WccDashboard extends DeesElement {
.selectedViewport=${this.selectedViewport}
.selectedTheme=${this.selectedTheme}
.isNative=${this.isNative}
.sidebarWidth=${this.sidebarWidth}
@selectedViewport=${(eventArg) => {
this.selectedViewport = eventArg.detail;
this.scheduleUpdate();
@@ -171,7 +186,7 @@ export class WccDashboard extends DeesElement {
this.toggleNative();
}}
></wcc-properties>
<wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isNative=${this.isNative}>
<wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isNative=${this.isNative} .sidebarWidth=${this.sidebarWidth}>
</wcc-frame>
`;
}
@@ -247,6 +262,7 @@ export class WccDashboard extends DeesElement {
const frameScrollY = routeInfo.queryParams.frameScrollY;
const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
const pinned = routeInfo.queryParams.pinned;
const sidebarWidth = routeInfo.queryParams.sidebarWidth;
if (search) {
this.searchQuery = search;
@@ -269,10 +285,19 @@ export class WccDashboard extends DeesElement {
} else if (this.pinnedItems.size > 0) {
this.pinnedItems = new Set();
}
if (sidebarWidth) {
this.sidebarWidth = parseInt(sidebarWidth, 10);
}
// Apply scroll positions after a short delay to ensure DOM is ready
setTimeout(() => {
// Apply scroll positions and update frame after a short delay to ensure DOM is ready
setTimeout(async () => {
this.applyScrollPositions();
// Ensure frame gets the sidebarWidth
const frame = await this.wccFrame;
if (frame) {
frame.sidebarWidth = this.sidebarWidth;
frame.requestUpdate();
}
}, 100);
} else {
this.searchQuery = '';
@@ -326,6 +351,7 @@ export class WccDashboard extends DeesElement {
const frameScrollY = routeInfo.queryParams.frameScrollY;
const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
const pinned = routeInfo.queryParams.pinned;
const sidebarWidth = routeInfo.queryParams.sidebarWidth;
if (search) {
this.searchQuery = search;
@@ -348,6 +374,9 @@ export class WccDashboard extends DeesElement {
} else if (this.pinnedItems.size > 0) {
this.pinnedItems = new Set();
}
if (sidebarWidth) {
this.sidebarWidth = parseInt(sidebarWidth, 10);
}
// Apply scroll positions after a short delay to ensure DOM is ready
setTimeout(() => {
@@ -444,6 +473,9 @@ export class WccDashboard extends DeesElement {
if (this.pinnedItems.size > 0) {
queryParams.set('pinned', Array.from(this.pinnedItems).join(','));
}
if (this.sidebarWidth !== 200) {
queryParams.set('sidebarWidth', this.sidebarWidth.toString());
}
const queryString = queryParams.toString();
const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
@@ -507,6 +539,9 @@ export class WccDashboard extends DeesElement {
if (this.pinnedItems.size > 0) {
queryParams.set('pinned', Array.from(this.pinnedItems).join(','));
}
if (this.sidebarWidth !== 200) {
queryParams.set('sidebarWidth', this.sidebarWidth.toString());
}
const queryString = queryParams.toString();
const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;