extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-10-05 09:42:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

Home WIP: Header spacing & style improvements

Browse Source
This commit is contained in:
nathan 2023-03-06 10:55:50 -07:00
parent d37143c842
commit 514d4cf207
4 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
api/js/etemplate/Et2Portlet/Et2Portlet.ts
View File

@ -77,7 +77,8 @@ export class Et2Portlet extends Et2Widget(SlCard)
font-family: inherit; font-family: inherit;
font-size: var(--sl-font-size-medium); font-size: var(--sl-font-size-medium);
line-height: var(--sl-line-height-dense); line-height: var(--sl-line-height-dense);
padding: var(--header-spacing); padding: 0px;
padding-left: var(--header-spacing);
padding-right: calc(2em + var(--header-spacing)); padding-right: calc(2em + var(--header-spacing));
margin: 0px; margin: 0px;
position: relative; position: relative;
@ -91,14 +92,17 @@ export class Et2Portlet extends Et2Widget(SlCard)
.portlet__header et2-button-icon { .portlet__header et2-button-icon {
display: none; display: none;
position: absolute;
right: 0px;
} }
.portlet__header:hover et2-button-icon { .portlet__header:hover et2-button-icon {
display: initial; display: initial;
} }
.portlet__header #settings {
position: absolute;
right: 0px;
}
.card { .card {
width: 100%; width: 100%;
height: 100% height: 100%
@ -500,7 +504,7 @@ export class Et2Portlet extends Et2Widget(SlCard)
<header class="portlet__header"> <header class="portlet__header">
<slot name="header" part="header" class="card__header">${this.headerTemplate()}</slot> <slot name="header" part="header" class="card__header">${this.headerTemplate()}</slot>
<et2-button-icon name="gear" label="Settings" noSubmit=true <et2-button-icon id="settings" name="gear" label="Settings" noSubmit=true
@click="${() => this.edit_settings()}"></et2-button-icon> @click="${() => this.edit_settings()}"></et2-button-icon>
</header> </header>
<slot part="body" class="card__body">${this.bodyTemplate()}</slot> <slot part="body" class="card__body">${this.bodyTemplate()}</slot>

7
home/inc/class.home_favorite_portlet.inc.php
View File

@ -77,7 +77,7 @@ class home_favorite_portlet extends home_portlet
$need_reload = true; $need_reload = true;
} }
// Favorite not set for new widgets created via context menu // Favorite not set for new widgets created via context menu
if(!$context['favorite']) if(!$context['favorite'] && !($context['width'] || $context['height']))
{ {
// Set initial size to 6x3, default is way too small // Set initial size to 6x3, default is way too small
$context['width'] = max($context['width'], 6); $context['width'] = max($context['width'], 6);
@ -240,7 +240,10 @@ class home_favorite_portlet extends home_portlet
{ {
if($favorite) if($favorite)
{ {
$favorite_list[$id] = $favorite['name']; $favorite_list[] = array(
'value' => $id,
'label' => $favorite['name']
);
} }
} }
$favorite = array( $favorite = array(

21
home/js/Et2PortletFavorite.ts
View File

@ -1,5 +1,5 @@
import {Et2Portlet} from "../../api/js/etemplate/Et2Portlet/Et2Portlet"; import {Et2Portlet} from "../../api/js/etemplate/Et2Portlet/Et2Portlet";
import {css, html} from "@lion/core"; import {classMap, css, html} from "@lion/core";
import shoelace from "../../api/js/etemplate/Styles/shoelace"; import shoelace from "../../api/js/etemplate/Styles/shoelace";
import {etemplate2} from "../../api/js/etemplate/etemplate2"; import {etemplate2} from "../../api/js/etemplate/etemplate2";
@ -28,13 +28,24 @@ export class Et2PortletFavorite extends Et2Portlet
this.toggleHeader = this.toggleHeader.bind(this); this.toggleHeader = this.toggleHeader.bind(this);
} }
connectedCallback()
{
super.connectedCallback();
this.classList.add("header_hidden");
}
headerTemplate() headerTemplate()
{ {
const hidden = this.classList.contains("header_hidden");
return html`${super.headerTemplate()} return html`${super.headerTemplate()}
<et2-button id="header_toggle" slot="header" image="egw_action/arrows" class="closed" <et2-button-icon id="header_toggle" slot="header"
name="${hidden ? "chevron-down" : "chevron-up"}"
class=${classMap({
hidden: hidden
})}
noSubmit=true noSubmit=true
@click=${this.toggleHeader} @click=${this.toggleHeader}
></et2-button> ></et2-button-icon>
`; `;
} }
@ -52,6 +63,10 @@ export class Et2PortletFavorite extends Et2Portlet
nm.div.toggleClass('header_hidden'); nm.div.toggleClass('header_hidden');
nm.set_hide_header(nm.div.hasClass('header_hidden')); nm.set_hide_header(nm.div.hasClass('header_hidden'));
nm.resize(); nm.resize();
// Toggle class that changes everything
this.classList.toggle("header_hidden");
this.requestUpdate();
} }
} }

2
home/js/Et2PortletList.ts
View File

@ -147,7 +147,7 @@ export class Et2PortletList extends Et2Portlet
{ {
return; return;
} }
debugger;
// Not used, but delete puts link in event.data // Not used, but delete puts link in event.data
let link_data = event.data || false; let link_data = event.data || false;