added list view header

src/Umbraco.Web.UI.Client/src/backoffice/components/list-view/list-view-header.element.ts

@@ -0,0 +1,155 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css';
+import { css, html, LitElement, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import '../tooltip-menu.element';
+import { TooltipMenuItem } from '../tooltip-menu.element';
+
+@customElement('umb-list-view-header')
+export class UmbListViewHeaderElement extends LitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				width: 100%;
+				justify-content: space-between;
+				align-items: center;
+				gap: var(--uui-size-space-5);
+			}
+
+			uui-popover {
+				width: min-content;
+			}
+			#search {
+				width: 100%;
+			}
+		`,
+	];
+
+	@property()
+	public viewTypes: Array<TooltipMenuItem> = [
+		{
+			label: 'List',
+			icon: 'umb:list',
+			action: () => {
+				console.log('List');
+			},
+		},
+		{
+			label: 'Grid',
+			icon: 'umb:grid',
+			action: () => {
+				console.log('Grid');
+			},
+		},
+		{
+			label: 'something else',
+			icon: 'umb:folder',
+			action: () => {
+				console.log('something else');
+			},
+		},
+	];
+	@property()
+	public actions: Array<TooltipMenuItem> = [
+		{
+			label: 'File',
+			icon: 'umb:document',
+			action: () => {
+				console.log('Create file');
+			},
+		},
+		{
+			label: 'Folder',
+			icon: 'umb:folder',
+			action: () => {
+				console.log('create folder');
+			},
+		},
+	];
+	@property()
+	public useSearch = true;
+
+	@state()
+	private _currentViewType = this.viewTypes[0];
+
+	@state()
+	private _search = '';
+
+	@state()
+	private _actionsOpen = false;
+	@state()
+	private _viewTypesOpen = false;
+
+	private _toggleViewType() {
+		const index = this.viewTypes.indexOf(this._currentViewType);
+		this._currentViewType = this.viewTypes[(index + 1) % this.viewTypes.length];
+	}
+
+	private _updateSearch(e: InputEvent) {
+		this._search = (e.target as HTMLInputElement).value;
+
+		this.dispatchEvent(
+			new CustomEvent('search', {
+				detail: this._search,
+			})
+		);
+	}
+
+	private _renderCreateButton() {
+		if (this.actions.length === 0) return nothing;
+
+		if (this.actions.length === 1) {
+			return html`<uui-button @click=${() => this.actions[0].action()} look="outline">Create</uui-button>`;
+		}
+		if (this.actions.length > 1) {
+			return html`<uui-popover margin="8" .open=${this._actionsOpen} @close=${() => (this._actionsOpen = false)}>
+				<uui-button @click=${() => (this._actionsOpen = !this._actionsOpen)} slot="trigger" look="outline">
+					Create
+				</uui-button>
+				<umb-tooltip-menu slot="popover" .items=${this.actions}></umb-tooltip-menu>
+			</uui-popover>`;
+		}
+
+		return nothing;
+	}
+
+	private _renderViewTypeButton() {
+		if (this.viewTypes.length < 2 || !this._currentViewType.icon) return nothing;
+
+		if (this.viewTypes.length === 2) {
+			return html`<uui-button @click=${this._toggleViewType} look="outline" compact>
+				<uui-icon .name=${this._currentViewType.icon}></uui-icon>
+			</uui-button>`;
+		}
+		if (this.viewTypes.length > 2) {
+			return html`<uui-popover margin="8" .open=${this._viewTypesOpen} @close=${() => (this._viewTypesOpen = false)}>
+				<uui-button @click=${() => (this._viewTypesOpen = !this._viewTypesOpen)} slot="trigger" look="outline" compact>
+					<uui-icon .name=${this._currentViewType.icon}></uui-icon>
+				</uui-button>
+				<umb-tooltip-menu icon slot="popover" .items=${this.viewTypes}></umb-tooltip-menu>
+			</uui-popover>`;
+		}
+
+		return nothing;
+	}
+
+	private _renderMenu() {
+		return html``;
+	}
+
+	render() {
+		return html`
+			${this._renderCreateButton()}
+			<uui-input id="search" @input=${this._updateSearch}></uui-input>
+			${this._renderViewTypeButton()}
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-list-view-header': UmbListViewHeaderElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.element.ts

@@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import './media-management-grid.element';
+import '../../components/list-view/list-view-header.element';
 
 @customElement('umb-dashboard-media-management')
 export class UmbDashboardMediaManagementElement extends LitElement {
@@ -12,6 +13,7 @@ export class UmbDashboardMediaManagementElement extends LitElement {
 				display: flex;
 				flex-direction: column;
 				box-sizing: border-box;
+				gap: var(--uui-size-space-5);
 				height: 100%;
 			}
 		`,
@@ -19,7 +21,7 @@ export class UmbDashboardMediaManagementElement extends LitElement {
 
 	render() {
 		return html`
-			<div>HEADER</div>
+			<umb-list-view-header></umb-list-view-header>
 			<umb-media-management-grid></umb-media-management-grid>
 		`;
 	}