mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-21 23:43:17 +01:00
Framework WIP:
- App areas resizable
This commit is contained in:
nathan
parent
493a2432fa
commit
6cee24a5c2
@ -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];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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}
|
||||||
<slot name="right-header"><span class="placeholder">right-header</span></slot>
|
position=${rightWidth == 0 ? "100" : nothing}
|
||||||
</div>
|
>
|
||||||
<div class="egw_fw_app__aside_content">
|
<header slot="start" class="egw_fw_app__header header" part="content-header">
|
||||||
<slot name="right"><span class="placeholder">right</span></slot>
|
<slot name="header"><span class="placeholder">header</span></slot>
|
||||||
</div>
|
</header>
|
||||||
<div class="egw_fw_app__aside_footer">
|
<main slot=start" class="egw_fw_app__main_content content" part="content">
|
||||||
<slot name="right-footer"><span class="placeholder">right-footer</span></slot>
|
<slot><span class="placeholder">main</span></slot>
|
||||||
</div>
|
</main>
|
||||||
</aside>
|
<footer slot="start" class="egw_fw_app__footer footer" part="footer">
|
||||||
<header class="egw_fw_app__header" part="content-header">
|
<slot name="footer"><span class="placeholder">main-footer</span></slot>
|
||||||
<slot name="header"><span class="placeholder">header</span></slot>
|
</footer>
|
||||||
</header>
|
<aside slot="end" class="egw_fw_app__aside egw_fw_app__right" part="right">
|
||||||
<main class="egw_fw_app__main_content" part="content">
|
<div class="egw_fw_app__aside_header header">
|
||||||
<slot><span class="placeholder">main</span></slot>
|
<slot name="right-header"><span class="placeholder">right-header</span></slot>
|
||||||
</main>
|
</div>
|
||||||
<footer class="egw_fw_app__footer" part="footer">
|
<div class="egw_fw_app__aside_content content">
|
||||||
<slot name="footer"><span class="placeholder">main-footer</span></slot>
|
<slot name="right"><span class="placeholder">right</span></slot>
|
||||||
</footer>
|
</div>
|
||||||
|
<div class="egw_fw_app__aside_footer footer">
|
||||||
|
<slot name="right-footer"><span class="placeholder">right-footer</span></slot>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</sl-split-panel>
|
||||||
|
</sl-split-panel>
|
||||||
</main>
|
</main>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user