extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-24 17:04:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Framework WIP:

Browse Source 
Polish on app framework position & styles
This commit is contained in:
nathan 2024-04-26 10:13:24 -06:00
parent 45d905378d
commit 0f4ee3790a
4 changed files with 41 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
kdots/head.tpl
View File

@ -40,15 +40,16 @@
<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>

52
kdots/js/EgwFramework.styles.ts
View File

@ -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;
}
`

26
kdots/js/EgwFramework.ts
View File

@ -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>

8
kdots/js/app.ts
View File

@ -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);
});
});