mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-07 08:34:29 +01:00
Framework WIP:
Polish on app framework position & styles
This commit is contained in:
nathan
parent
45d905378d
commit
0f4ee3790a
@ -34,21 +34,22 @@
|
||||
{include_wz_tooltip}
|
||||
<!-- END head -->
|
||||
<!-- BEGIN framework -->
|
||||
<egw-framework id="egw_fw_basecontainer" class="sl-theme-light"
|
||||
<egw-framework id="egw_fw_basecontainer" class="sl-theme-light "
|
||||
application-list="{application-list}"
|
||||
>
|
||||
<a slot="logo" href="{logo_url}" target="_blank"><img src="{logo_header}" title="{logo_title}" alt="Site logo"/></a>
|
||||
<div slot="header-right" id="egw_fw_topmenu_info_items">
|
||||
{topmenu_info_items}
|
||||
<script>
|
||||
</script>
|
||||
</div>
|
||||
<div slot="header">
|
||||
<sl-switch slot="header" id="placeholders" checked>Placeholders</sl-switch>
|
||||
</div>
|
||||
|
||||
<!-- status app is looking for this -->
|
||||
<div slot="aside" id="egw_fw_sidebar_r"></div>
|
||||
|
||||
<!-- Fake app -->
|
||||
<egw-app name="fake app">
|
||||
<egw-app name="fake app" class="placeholder">
|
||||
<div slot="banner">Something inside the app - main</div>
|
||||
</egw-app>
|
||||
</egw-framework>
|
||||
|
||||
@ -12,8 +12,6 @@ export default css`
|
||||
|
||||
.egw_fw__layout-default {
|
||||
display: grid;
|
||||
gap: 0.5em 0.1em;
|
||||
border: 1px dotted;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -35,10 +33,14 @@ export default css`
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.egw_fw__layout-default .egw_fw__header > * {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* To use the sl-split-panel, we need it to have its own space & nest stuff inside */
|
||||
|
||||
.egw_fw__layout-default .egw_fw__divider {
|
||||
grid-column-start: sidemenu-start;
|
||||
grid-column-start: start;
|
||||
grid-column-end: status-start;
|
||||
grid-row-start: main-header;
|
||||
grid-row-end: footer;
|
||||
@ -64,36 +66,6 @@ export default css`
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.egw_fw__layout-default .egw_fw__main-wrapper {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: [start] 1fr [end];
|
||||
grid-template-rows: [top main-header] fit-content(2em) [main] 1fr [main-footer] fit-content(0px) [ bottom]
|
||||
}
|
||||
|
||||
.egw_fw__layout-default .egw_fw__main {
|
||||
grid-column-start: start;
|
||||
grid-column-end: end;
|
||||
grid-row-start: main;
|
||||
grid-row-end: main;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.egw_fw__layout-default .egw_fw__main-header {
|
||||
grid-column-start: start;
|
||||
grid-column-end: end;
|
||||
grid-row-start: main-header;
|
||||
grid-row-end: main-header
|
||||
}
|
||||
|
||||
.egw_fw__layout-default .egw_fw__main-footer {
|
||||
grid-column-start: start;
|
||||
grid-column-end: end;
|
||||
grid-row-start: main-footer;
|
||||
grid-row-end: main-footer
|
||||
}
|
||||
|
||||
.egw_fw__layout-default .egw_fw__footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
@ -101,8 +73,8 @@ export default css`
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.egw_fw__layout-default {
|
||||
grid-template-columns: [start sidemenu-start banner-start header-start footer-start] 200px [sidemenu-end main-start] 1fr [main-end] fit-content(2em) [header-end banner-end end];
|
||||
grid-template-rows: [top banner] fit-content(2em) [header] fit-content(2em) [ main-header] fit-content(2em) [main] 1fr [main-footer] fit-content(2em) [footer bottom] fit-content(2em);
|
||||
grid-template-columns: [start banner-start header-start footer-start main-start] 1fr [main-end header-end banner-end end];
|
||||
grid-template-rows: [top banner] fit-content(2em) [header] fit-content(2em) [main-header] fit-content(2em) [main] 1fr [footer bottom] fit-content(2em);
|
||||
}
|
||||
}
|
||||
|
||||
@ -112,6 +84,9 @@ export default css`
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.egw_fw__header .egw_fw__app_list {
|
||||
flex: none;
|
||||
}
|
||||
.egw_fw__app_list::part(panel) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
@ -121,7 +96,10 @@ export default css`
|
||||
|
||||
.egw_fw__open_applications et2-image {
|
||||
height: var(--icon-size);
|
||||
width: var(--icon-size);
|
||||
|
||||
/* Allow some shrinking with limited size */
|
||||
min-width: calc(var(--icon-size) / 2);
|
||||
min-height: calc(var(--icon-size) / 2);
|
||||
}
|
||||
|
||||
.egw_fw__open_applications sl-tab::part(base) {
|
||||
@ -139,7 +117,7 @@ export default css`
|
||||
padding: var(--sl-spacing-small) var(--sl-spacing-3x-small);
|
||||
}
|
||||
|
||||
.egw_fw__open_applications sl-tab:hover::part(close-button) {
|
||||
.egw_fw__open_applications sl-tab:hover::part(close-button), .egw_fw__open_applications sl-tab[active]::part(close-button) {
|
||||
visibility: visible;
|
||||
}
|
||||
`
|
||||
@ -41,7 +41,11 @@ export class EgwFramework extends LitElement
|
||||
|
||||
// TEMP STUFF
|
||||
css`
|
||||
.placeholder {
|
||||
:host .placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host(.placeholder) .placeholder {
|
||||
width: 100%;
|
||||
display: block;
|
||||
font-size: 200%;
|
||||
@ -57,25 +61,21 @@ export class EgwFramework extends LitElement
|
||||
--placeholder-background-color: #75bd20;
|
||||
}
|
||||
|
||||
.egw_fw__footer .placeholder {
|
||||
background-color: hsl(182, 58%, 62%);
|
||||
}
|
||||
|
||||
.egw_fw__main-wrapper {
|
||||
--placeholder-background-color: #e97234;
|
||||
}
|
||||
|
||||
.egw_fw__status .placeholder {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
[class*="left"] .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, .5));
|
||||
}
|
||||
|
||||
[class*="footer"] .placeholder {
|
||||
:host(.placeholder) [class*="right"] .placeholder {
|
||||
background-color: color-mix(in lch, var(--placeholder-background-color), rgba(.5, 1, .5, .5));
|
||||
}
|
||||
|
||||
:host(.placeholder) [class*="footer"] .placeholder {
|
||||
background-color: color-mix(in lch, var(--placeholder-background-color), rgba(1, 1, 1, .05));
|
||||
}
|
||||
|
||||
@ -176,7 +176,7 @@ export class EgwFramework extends LitElement
|
||||
snap="150px ${iconSize} 0px"
|
||||
snap-threshold="${Math.min(40, parseInt(iconSize) - 5)}"
|
||||
aria-label="Side menu resize">
|
||||
<main slot="start" part="main">
|
||||
<main slot="start" part="main" class="egw_fw__main">
|
||||
<slot></slot>
|
||||
</main>
|
||||
<sl-icon slot="divider" name="grip-vertical"></sl-icon>
|
||||
|
||||
@ -14,4 +14,12 @@ document.addEventListener('DOMContentLoaded', () =>
|
||||
{
|
||||
window.egw.open_link(e.detail.item.value);
|
||||
});
|
||||
|
||||
/* Listener on placeholder checkbox */
|
||||
// TODO: Remove this & the switch
|
||||
document.querySelector("#placeholders").addEventListener("sl-change", (e) =>
|
||||
{
|
||||
document.querySelector("egw-framework").classList.toggle("placeholder", e.target.checked);
|
||||
document.querySelector("egw-app").classList.toggle("placeholder", e.target.checked);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user