mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-24 17:04:14 +01:00
Framework WIP:
App slots & positioning for default view
This commit is contained in:
nathan
parent
d60d667bd3
commit
29c8baaa83
@ -71,6 +71,7 @@ egw-framework#egw_fw_basecontainer {
|
||||
|
||||
egw-app {
|
||||
&::part(name) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
|
||||
<!-- Fake app -->
|
||||
<egw-app name="fake app" class="placeholder">
|
||||
<div slot="banner">Something inside the app - main</div>
|
||||
<div style="border: 1px dotted">Something inside the app - main</div>
|
||||
</egw-app>
|
||||
</egw-framework>
|
||||
|
||||
|
||||
@ -9,7 +9,8 @@ export default css`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: grid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:host > * {
|
||||
@ -17,53 +18,89 @@ export default css`
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.egw_fw_app__left {
|
||||
grid-area: left;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.egw_fw_app__right {
|
||||
grid-area: right;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.egw_fw_app__main {
|
||||
grid-area: main;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
.egw_fw_app__name {
|
||||
max-width: 20vw;
|
||||
flex: 1 1 20vw;
|
||||
}
|
||||
|
||||
.egw_fw_app__header {
|
||||
grid-area: header;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
justify-items: stretch;
|
||||
flex: 1 0 2em;
|
||||
max-height: 3em;
|
||||
}
|
||||
|
||||
.egw_fw_app__aside {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
grid-template-rows: subgrid;
|
||||
grid-row: start / end;
|
||||
}
|
||||
|
||||
|
||||
.egw_fw_app__aside_header {
|
||||
grid-row: sub-header / main;
|
||||
}
|
||||
|
||||
.egw_fw_app__aside_content {
|
||||
height: 100%;
|
||||
grid-row: main / footer;
|
||||
}
|
||||
|
||||
.egw_fw_app__aside_footer {
|
||||
grid-row: footer / end;
|
||||
}
|
||||
|
||||
.egw_fw_app__left {
|
||||
grid-column: left / left;
|
||||
}
|
||||
|
||||
.egw_fw_app__right {
|
||||
grid-column: right / right;
|
||||
}
|
||||
|
||||
.egw_fw_app__main {
|
||||
flex: 1 1 100%;
|
||||
display: grid;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.egw_fw_app__header {
|
||||
grid-row: sub-header / main;
|
||||
grid-column: main / main;
|
||||
}
|
||||
|
||||
.egw_fw_app__main_content {
|
||||
grid-row: main / footer;
|
||||
grid-column: main / main;
|
||||
}
|
||||
|
||||
.egw_fw_app__footer {
|
||||
grid-area: footer;
|
||||
grid-column: main / right;
|
||||
grid-row: footer / end;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
:host {
|
||||
.egw_fw_app__main {
|
||||
grid-template-columns: [start left] fit-content(20%) [main] 1fr [right] fit-content(50%) [end];
|
||||
grid-template-rows: [header] fit-content(2em) [main] 1fr [footer bottom] fit-content(2em) [end];
|
||||
grid-template-areas:
|
||||
"left-header header right-header"
|
||||
"left main right"
|
||||
"left-footer footer right-footer"
|
||||
grid-template-rows: [start sub-header] fit-content(2em) [main] auto [footer] fit-content(2em) [end];
|
||||
}
|
||||
|
||||
::slotted(*) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
:host {
|
||||
.egw_fw_app__main {
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"main"
|
||||
"left right"
|
||||
}
|
||||
|
||||
[slot="footer"] {
|
||||
display: none;
|
||||
"footer"
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -6,6 +6,31 @@ import {property} from "lit/decorators/property.js";
|
||||
import styles from "./EgwApp.styles";
|
||||
import {state} from "lit/decorators/state.js";
|
||||
|
||||
/**
|
||||
* @summary Application component inside EgwFramework
|
||||
*
|
||||
* @dependency sl-icon-button
|
||||
*
|
||||
* @slot - Main application content. Other slots are normally hidden if they have no content
|
||||
* @slot header - Top of app, contains logo, app icons.
|
||||
* @slot footer - Very bottom of the main content.
|
||||
* @slot left - Optional content to the left. Use for application navigation.
|
||||
* @slot left-header - Top of left side
|
||||
* @slot left-footer - bottom of left side
|
||||
* @slot right - Optional content to the right. Use for application context details.
|
||||
* @slot right-header - Top of right side
|
||||
* @slot right-footer - bottom of right side
|
||||
*
|
||||
* @csspart name - Top left, holds the application name.
|
||||
* @csspart header - Top main application header, optional application toolbar goes here.
|
||||
* @csspart content-header - Top of center, optional.
|
||||
* @csspart main - Main application content.
|
||||
* @csspart left - Left optional content.
|
||||
* @csspart right - Right optional content.
|
||||
* @csspart footer - Very bottom of the main content.
|
||||
*
|
||||
* @cssproperty [--icon-size=32] - Height of icons used in the framework
|
||||
*/
|
||||
@customElement('egw-app')
|
||||
//@ts-ignore
|
||||
export class EgwApp extends LitElement
|
||||
@ -17,27 +42,34 @@ export class EgwApp extends LitElement
|
||||
|
||||
// TEMP STUFF
|
||||
css`
|
||||
:host {
|
||||
:host .placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host(.placeholder) .placeholder {
|
||||
display: block;
|
||||
--placeholder-background-color: #e97234;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
width: 100%;
|
||||
display: block;
|
||||
font-size: 200%;
|
||||
text-align: center;
|
||||
background-color: var(--placeholder-background-color, silver);
|
||||
background-color: var(--placeholder-background-color);
|
||||
}
|
||||
|
||||
.placeholder:after {
|
||||
content: " (placeholder)";
|
||||
.placeholder:after, .placeholder:before {
|
||||
content: " ⌖ ";
|
||||
}
|
||||
|
||||
[class*="left"] .placeholder, [class*="right"] .placeholder {
|
||||
background-color: color-mix(in lch, var(--placeholder-background-color), rgba(1, 1, 1, .5));
|
||||
:host(.placeholder) [class*="left"] .placeholder {
|
||||
background-color: color-mix(in lch, var(--placeholder-background-color), rgba(.5, .5, 1, .1));
|
||||
}
|
||||
|
||||
[class*="footer"] .placeholder {
|
||||
:host(.placeholder) [class*="right"] .placeholder {
|
||||
background-color: color-mix(in lch, var(--placeholder-background-color), rgba(.5, 1, .5, .1));
|
||||
}
|
||||
|
||||
:host(.placeholder) [class*="footer"] .placeholder {
|
||||
background-color: color-mix(in lch, var(--placeholder-background-color), rgba(1, 1, 1, .05));
|
||||
}
|
||||
`
|
||||
@ -58,29 +90,53 @@ export class EgwApp extends LitElement
|
||||
render()
|
||||
{
|
||||
return html`
|
||||
<div class="egw_fw_app__name" part="name">
|
||||
<sl-icon-button name="${this.leftCollapsed ? "chevron-double-right" : "chevron-double-left"}"
|
||||
label="${this.egw?.lang("Hide area")}"
|
||||
@click=${() => {this.leftCollapsed = !this.leftCollapsed}}
|
||||
></sl-icon-button>
|
||||
<h2>${this.egw?.lang(this.name) ?? this.name}</h2>
|
||||
<div class="egw_fw_app__header">
|
||||
<div class="egw_fw_app__name" part="name">
|
||||
<sl-icon-button name="${this.leftCollapsed ? "chevron-double-right" : "chevron-double-left"}"
|
||||
label="${this.egw?.lang("Hide area")}"
|
||||
@click=${() => {this.leftCollapsed = !this.leftCollapsed}}
|
||||
></sl-icon-button>
|
||||
<h2>${this.egw?.lang(this.name) ?? this.name}</h2>
|
||||
</div>
|
||||
<header class="egw_fw_app__header" part="header">
|
||||
<slot name="main-header"><span class="placeholder"> ${this.name} main-header</span></slot>
|
||||
</header>
|
||||
</div>
|
||||
<aside class="egw_fw_app__left" part="left">
|
||||
<slot name="left"><span class="placeholder">left</span></slot>
|
||||
</aside>
|
||||
<aside class="egw_fw_app__right" part="right">
|
||||
<slot name="right"><span class="placeholder">right</span></slot>
|
||||
</aside>
|
||||
<header class="egw_fw_app__header" part="header">
|
||||
<slot name="main-header"><span class="placeholder"> ${this.name} main-header</span></slot>
|
||||
</header>
|
||||
<main class="egw_fw_app__main" part="main"
|
||||
aria-label="${this.name}" tabindex="0">
|
||||
<aside class="egw_fw_app__aside egw_fw_app__left" part="left">
|
||||
<div class="egw_fw_app__aside_header">
|
||||
<slot name="left-header"><span class="placeholder">left-header</span></slot>
|
||||
</div>
|
||||
<div class="egw_fw_app__aside_content">
|
||||
<slot name="left"><span class="placeholder">left</span></slot>
|
||||
</div>
|
||||
|
||||
<div class="egw_fw_app__aside_footer">
|
||||
<slot name="left-footer"><span class="placeholder">left-footer</span></slot>
|
||||
</div>
|
||||
</aside>
|
||||
<aside class="egw_fw_app__aside egw_fw_app__right" part="right">
|
||||
<div class="egw_fw_app__aside_header">
|
||||
<slot name="right-header"><span class="placeholder">right-header</span></slot>
|
||||
</div>
|
||||
<div class="egw_fw_app__aside_content">
|
||||
<slot name="right"><span class="placeholder">right</span></slot>
|
||||
</div>
|
||||
<div class="egw_fw_app__aside_footer">
|
||||
<slot name="right-footer"><span class="placeholder">right-footer</span></slot>
|
||||
</div>
|
||||
</aside>
|
||||
<header class="egw_fw_app__header" part="content-header">
|
||||
<slot name="header"><span class="placeholder">header</span></slot>
|
||||
</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>
|
||||
<footer class="egw_fw_app__footer" part="footer">
|
||||
<slot name="footer"><span class="placeholder">main-footer</span></slot>
|
||||
</footer>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user