Home WIP: Header spacing & style improvements

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

View File

@ -77,7 +77,8 @@ export class Et2Portlet extends Et2Widget(SlCard)
font-family: inherit;
font-size: var(--sl-font-size-medium);
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));
margin: 0px;
position: relative;
@ -91,14 +92,17 @@ export class Et2Portlet extends Et2Widget(SlCard)
.portlet__header et2-button-icon {
display: none;
position: absolute;
right: 0px;
}
.portlet__header:hover et2-button-icon {
display: initial;
}
.portlet__header #settings {
position: absolute;
right: 0px;
}
.card {
width: 100%;
height: 100%
@ -500,7 +504,7 @@ export class Et2Portlet extends Et2Widget(SlCard)
<header class="portlet__header">
<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>
</header>
<slot part="body" class="card__body">${this.bodyTemplate()}</slot>

View File

@ -77,7 +77,7 @@ class home_favorite_portlet extends home_portlet
$need_reload = true;
}
// 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
$context['width'] = max($context['width'], 6);
@ -240,7 +240,10 @@ class home_favorite_portlet extends home_portlet
{
if($favorite)
{
$favorite_list[$id] = $favorite['name'];
$favorite_list[] = array(
'value' => $id,
'label' => $favorite['name']
);
}
}
$favorite = array(

View File

@ -1,5 +1,5 @@
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 {etemplate2} from "../../api/js/etemplate/etemplate2";
@ -28,13 +28,24 @@ export class Et2PortletFavorite extends Et2Portlet
this.toggleHeader = this.toggleHeader.bind(this);
}
connectedCallback()
{
super.connectedCallback();
this.classList.add("header_hidden");
}
headerTemplate()
{
const hidden = this.classList.contains("header_hidden");
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
@click=${this.toggleHeader}
></et2-button>
></et2-button-icon>
`;
}
@ -52,6 +63,10 @@ export class Et2PortletFavorite extends Et2Portlet
nm.div.toggleClass('header_hidden');
nm.set_hide_header(nm.div.hasClass('header_hidden'));
nm.resize();
// Toggle class that changes everything
this.classList.toggle("header_hidden");
this.requestUpdate();
}
}

View File

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