extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-25 01:13:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Framework WIP:

Browse Source 
- Fix egw not loading in time
- Fix manually hiding side content meant auto-opening did not work
- Some accessibility adjustments
This commit is contained in:
nathan 2024-05-01 14:46:29 -06:00
parent 80979eb8ba
commit 8e42d4d274
4 changed files with 36 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
kdots/head.tpl
View File

@ -27,8 +27,8 @@
<style type="text/css"> <style type="text/css">
{firstload_animation_style} {firstload_animation_style}
</style> </style>
<script type="module" src="{webserver_url}/kdots/js/app.min.js"></script>
{java_script} {java_script}
<script type="module" src="{webserver_url}/kdots/js/app.min.js"></script>
</head> </head>
<body {body_tags}> <body {body_tags}>
{include_wz_tooltip} {include_wz_tooltip}

1
kdots/js/EgwFramework.ts
View File

@ -96,7 +96,6 @@ export class EgwFramework extends LitElement
get egw() get egw()
{ {
return window.egw ?? { return window.egw ?? {
app_name: () => "",
lang: (t) => t, lang: (t) => t,
preference: (n, app) => "" preference: (n, app) => ""
}; };

17
kdots/js/EgwFrameworkApp.styles.ts
View File

@ -23,6 +23,10 @@ export default css`
flex: 1 1 20vw; flex: 1 1 20vw;
} }
.egw_fw_app__name h2 {
margin-inline-start: var(--sl-spacing-medium);
}
.egw_fw_app__header { .egw_fw_app__header {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
@ -53,7 +57,7 @@ export default css`
sl-split-panel::part(divider) { sl-split-panel::part(divider) {
grid-row: start / end; grid-row: start / end;
font-size: 20px; font-size: var(--sl-font-size-medium);
} }
sl-split-panel > sl-icon { sl-split-panel > sl-icon {
@ -141,6 +145,17 @@ export default css`
[end]; [end];
} }
sl-split-panel {
display: contents
}
sl-split-panel::part(divider) {
display: none;
}
.egw_fw_app__header {
grid-column: start / end;
}
.egw_fw_app__main_content { .egw_fw_app__main_content {
grid-row: main / aside-header; grid-row: main / aside-header;
grid-column: start / end; grid-column: start / end;

30
kdots/js/EgwFrameworkApp.ts
View File

@ -184,6 +184,10 @@ export class EgwFrameworkApp extends LitElement
} }
// Left side is in pixels, round to 2 decimals // Left side is in pixels, round to 2 decimals
let newPosition = Math.round(event.target.panelInfo.side == "left" ? event.target.positionInPixels * 100 : event.target.position * 100) / 100; let newPosition = Math.round(event.target.panelInfo.side == "left" ? event.target.positionInPixels * 100 : event.target.position * 100) / 100;
// Update collapsed
this[`${event.target.panelInfo.name}Collapsed`] = newPosition == event.target.panelInfo.hiddenWidth;
let preferenceName = event.target.panelInfo.preference; let preferenceName = event.target.panelInfo.preference;
if(newPosition != event.target.panelInfo.preferenceWidth) if(newPosition != event.target.panelInfo.preferenceWidth)
{ {
@ -223,10 +227,12 @@ export class EgwFrameworkApp extends LitElement
<div class="egw_fw_app__name" part="name"> <div class="egw_fw_app__name" part="name">
${hasLeftSlots ? html` ${hasLeftSlots ? html`
<sl-icon-button name="${this.leftCollapsed ? "chevron-double-right" : "chevron-double-left"}" <sl-icon-button name="${this.leftCollapsed ? "chevron-double-right" : "chevron-double-left"}"
label="${this.egw?.lang("Hide area")}" label="${this.leftCollapsed ? this.egw.lang("Show left area") : this.egw?.lang("Hide left area")}"
@click=${() => @click=${() =>
{ {
this.leftCollapsed = !this.leftCollapsed; this.leftCollapsed = !this.leftCollapsed;
// Just in case they collapsed it manually, reset
this.leftPanelInfo.preferenceWidth = this.leftPanelInfo.preferenceWidth || this.leftPanelInfo.defaultWidth;
this.requestUpdate("leftCollapsed") this.requestUpdate("leftCollapsed")
}} }}
></sl-icon-button>` ></sl-icon-button>`
@ -238,7 +244,7 @@ export class EgwFrameworkApp extends LitElement
<slot name="main-header"><span class="placeholder"> ${this.name} main-header</span></slot> <slot name="main-header"><span class="placeholder"> ${this.name} main-header</span></slot>
</header> </header>
</div> </div>
<main class="egw_fw_app__main" part="main" aria-label="${this.name}" tabindex="0"> <div class="egw_fw_app__main" part="main">
<sl-split-panel class=${classMap({"egw_fw_app__outerSplit": true, "no-content": !hasLeftSlots})} <sl-split-panel class=${classMap({"egw_fw_app__outerSplit": true, "no-content": !hasLeftSlots})}
primary="start" position-in-pixels="${leftWidth}" primary="start" position-in-pixels="${leftWidth}"
snap="0px 20%" snap-threshold="50" snap="0px 20%" snap-threshold="50"
@ -278,26 +284,28 @@ export class EgwFrameworkApp extends LitElement
<header slot="start" class="egw_fw_app__header header" part="content-header"> <header slot="start" class="egw_fw_app__header header" part="content-header">
<slot name="header"><span class="placeholder">header</span></slot> <slot name="header"><span class="placeholder">header</span></slot>
</header> </header>
<main slot="start" class="egw_fw_app__main_content content" part="content"> <div slot="start" class="egw_fw_app__main_content content" part="content"
aria-label="${this.name}" tabindex="0">
<slot><span class="placeholder">main</span></slot> <slot><span class="placeholder">main</span></slot>
</main> </div>
<footer slot="start" class="egw_fw_app__footer footer" part="footer"> <footer slot="start" class="egw_fw_app__footer footer" part="footer">
<slot name="footer"><span class="placeholder">main-footer</span></slot> <slot name="footer"><span class="placeholder">main-footer</span></slot>
</footer> </footer>
<aside slot="end" class=${rightClassMap} part="right"> <aside slot="end" class=${rightClassMap} part="right"
<div class="egw_fw_app__aside_header header"> aria-label="${this.egw.lang("%1 application details", this.egw.lang(this.name))}">
<header class="egw_fw_app__aside_header header">
<slot name="right-header"><span class="placeholder">right-header</span></slot> <slot name="right-header"><span class="placeholder">right-header</span></slot>
</div> </header>
<div class="egw_fw_app__aside_content content"> <div class="egw_fw_app__aside_content content" tabindex="0">
<slot name="right"><span class="placeholder">right</span></slot> <slot name="right"><span class="placeholder">right</span></slot>
</div> </div>
<div class="egw_fw_app__aside_footer footer"> <footer class="egw_fw_app__aside_footer footer">
<slot name="right-footer"><span class="placeholder">right-footer</span></slot> <slot name="right-footer"><span class="placeholder">right-footer</span></slot>
</div> </footer>
</aside> </aside>
</sl-split-panel> </sl-split-panel>
</sl-split-panel> </sl-split-panel>
</main> </div>
`; `;
} }
} }