extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-21 23:43:17 +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">
{firstload_animation_style}
</style>
<script type="module" src="{webserver_url}/kdots/js/app.min.js"></script>
{java_script}
<script type="module" src="{webserver_url}/kdots/js/app.min.js"></script>
</head>
<body {body_tags}>
{include_wz_tooltip}

1
kdots/js/EgwFramework.ts
View File

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

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

@ -23,6 +23,10 @@ export default css`
flex: 1 1 20vw;
}
.egw_fw_app__name h2 {
margin-inline-start: var(--sl-spacing-medium);
}
.egw_fw_app__header {
justify-content: flex-start;
align-items: center;
@ -53,7 +57,7 @@ export default css`
sl-split-panel::part(divider) {
grid-row: start / end;
font-size: 20px;
font-size: var(--sl-font-size-medium);
}
sl-split-panel > sl-icon {
@ -141,6 +145,17 @@ export default css`
[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 {
grid-row: main / aside-header;
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
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;
if(newPosition != event.target.panelInfo.preferenceWidth)
{
@ -223,10 +227,12 @@ export class EgwFrameworkApp extends LitElement
<div class="egw_fw_app__name" part="name">
${hasLeftSlots ? html`
<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=${() =>
{
this.leftCollapsed = !this.leftCollapsed;
// Just in case they collapsed it manually, reset
this.leftPanelInfo.preferenceWidth = this.leftPanelInfo.preferenceWidth || this.leftPanelInfo.defaultWidth;
this.requestUpdate("leftCollapsed")
}}
></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>
</header>
</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})}
primary="start" position-in-pixels="${leftWidth}"
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">
<slot name="header"><span class="placeholder">header</span></slot>
</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>
</main>
</div>
<footer slot="start" class="egw_fw_app__footer footer" part="footer">
<slot name="footer"><span class="placeholder">main-footer</span></slot>
</footer>
<aside slot="end" class=${rightClassMap} part="right">
<div class="egw_fw_app__aside_header header">
<aside slot="end" class=${rightClassMap} part="right"
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>
</div>
<div class="egw_fw_app__aside_content content">
</header>
<div class="egw_fw_app__aside_content content" tabindex="0">
<slot name="right"><span class="placeholder">right</span></slot>
</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>
</div>
</footer>
</aside>
</sl-split-panel>
</sl-split-panel>
</main>
</div>
`;
}
}