Home WIP: Header spacing & style improvements

api/js/etemplate/Et2Portlet/Et2Portlet.ts

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

home/inc/class.home_favorite_portlet.inc.php

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

home/js/Et2PortletFavorite.ts

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

home/js/Et2PortletList.ts

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