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

Framework WIP:

Browse Source 
- App areas resizable
This commit is contained in:
nathan 2024-04-30 14:21:35 -06:00
parent 493a2432fa
commit 6cee24a5c2
2 changed files with 63 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,6 +31,22 @@ export default css`
max-height: 3em; max-height: 3em;
} }
.egw_fw_app__outerSplit {
grid-column: start / end;
grid-row: start / end;
grid-template-rows: subgrid;
}
.egw_fw_app__innerSplit {
grid-template-rows: subgrid;
grid-column-end: -1;
grid-row: start / end;
}
sl-split-panel::part(divider) {
grid-row: start / end;
}
.egw_fw_app__aside { .egw_fw_app__aside {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@ -53,40 +69,32 @@ export default css`
grid-row: footer / end; grid-row: footer / end;
} }
.egw_fw_app__left {
grid-column: left / left;
}
.egw_fw_app__right {
grid-column: right / right;
}
.egw_fw_app__main { .egw_fw_app__main {
flex: 1 1 100%; flex: 1 1 100%;
display: grid; display: grid;
align-items: stretch; align-items: stretch;
justify-content: stretch; justify-content: stretch;
overflow: hidden; overflow: hidden;
overflow-x: auto;
} }
.egw_fw_app__header { .egw_fw_app__header {
grid-row: sub-header / main; grid-row: sub-header / main;
grid-column: main / main;
} }
.egw_fw_app__main_content { .egw_fw_app__main_content {
grid-row: main / footer; grid-row: main / footer;
grid-column: main / main;
} }
.egw_fw_app__footer { .egw_fw_app__footer {
grid-column: main / right;
grid-row: footer / end; grid-row: footer / end;
} }
.header, .footer {
overflow: hidden;
}
@media (min-width: 600px) { @media (min-width: 600px) {
.egw_fw_app__main { .egw_fw_app__main {
grid-template-columns: [start left] fit-content(20%) [main] 1fr [right] fit-content(50%) [end]; grid-template-columns: [start left] min-content [ main] 1fr [right] min-content [end];
grid-template-rows: [start sub-header] fit-content(2em) [main] auto [footer] fit-content(2em) [end]; grid-template-rows: [start sub-header] fit-content(2em) [main] auto [footer] fit-content(2em) [end];
} }

48
kdots/js/EgwFrameworkApp.ts
View File

@ -1,4 +1,4 @@
import {css, html, LitElement} from "lit"; import {css, html, LitElement, nothing} from "lit";
import {customElement} from "lit/decorators/custom-element.js"; import {customElement} from "lit/decorators/custom-element.js";
import {property} from "lit/decorators/property.js"; import {property} from "lit/decorators/property.js";
import {state} from "lit/decorators/state.js"; import {state} from "lit/decorators/state.js";
@ -94,6 +94,8 @@ export class EgwFrameworkApp extends LitElement
"egw_fw_app__left": true, "egw_fw_app__left": true,
"egw_fw_app__aside-collapsed": this.leftCollapsed "egw_fw_app__aside-collapsed": this.leftCollapsed
}); });
const leftWidth = this.leftCollapsed ? 0 : parseInt(this.egw.preference("jdotssideboxwidth", this.name) || 0) || 250;
const rightWidth = (parseInt(this.egw.preference("app_right_width", this.name) || 0) || 0);
return html` return html`
<div class="egw_fw_app__header"> <div class="egw_fw_app__header">
<div class="egw_fw_app__name" part="name"> <div class="egw_fw_app__name" part="name">
@ -107,40 +109,46 @@ 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" <main class="egw_fw_app__main" part="main" aria-label="${this.name}" tabindex="0">
aria-label="${this.name}" tabindex="0"> <sl-split-panel class="egw_fw_app__outerSplit" primary="start" position-in-pixels="${leftWidth}">
<aside class=${leftClassMap} part="left"> <aside slot="start" part="left" class=${leftClassMap}>
<div class="egw_fw_app__aside_header"> <div class="egw_fw_app__aside_header header">
<slot name="left-header"><span class="placeholder">left-header</span></slot> <slot name="left-header"><span class="placeholder">left-header</span></slot>
</div> </div>
<div class="egw_fw_app__aside_content"> <div class="egw_fw_app__aside_content content">
<slot name="left"><span class="placeholder">left</span></slot> <slot name="left"><span class="placeholder">left</span></slot>
</div> </div>
<div class="egw_fw_app__aside_footer"> <div class="egw_fw_app__aside_footer footer">
<slot name="left-footer"><span class="placeholder">left-footer</span></slot> <slot name="left-footer"><span class="placeholder">left-footer</span></slot>
</div> </div>
</aside> </aside>
<aside class="egw_fw_app__aside egw_fw_app__right" part="right"> <sl-split-panel slot="end" class="egw_fw_app__innerSplit" primary="start"
<div class="egw_fw_app__aside_header"> position-in-pixels=${rightWidth || nothing}
position=${rightWidth == 0 ? "100" : nothing}
>
<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">
<slot><span class="placeholder">main</span></slot>
</main>
<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="egw_fw_app__aside egw_fw_app__right" part="right">
<div 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> </div>
<div class="egw_fw_app__aside_content"> <div class="egw_fw_app__aside_content content">
<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"> <div 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> </div>
</aside> </aside>
<header class="egw_fw_app__header" part="content-header"> </sl-split-panel>
<slot name="header"><span class="placeholder">header</span></slot> </sl-split-panel>
</header>
<main class="egw_fw_app__main_content" part="content">
<slot><span class="placeholder">main</span></slot>
</main>
<footer class="egw_fw_app__footer" part="footer">
<slot name="footer"><span class="placeholder">main-footer</span></slot>
</footer>
</main> </main>
`; `;
} }