From 55da8663cae38f8ace2fb7a442de304880faf2e6 Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Tue, 24 Sep 2024 09:59:03 +0200
Subject: [PATCH] styling

---
 .../input-tiptap/tiptap-fixed-menu.element.ts |  7 +-
 .../tiptap-toolbar-dropdown.element.ts        | 83 ++++++++++---------
 2 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts
index f276ecc7df..9ae665be09 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts
@@ -27,12 +27,12 @@ export class UmbTiptapFixedMenuElement extends UmbLitElement {
 
 	override render() {
 		return html`
+			<umb-tiptap-toolbar-dropdown style="grid-column: span 4;"></umb-tiptap-toolbar-dropdown>
 			<umb-extension-with-api-slot
 				type="tiptapExtension"
 				.filter=${(ext: ManifestTiptapExtension) => !!ext.kind || !!ext.element}
 				.elementProps=${{ editor: this.editor }}>
 			</umb-extension-with-api-slot>
-			<umb-tiptap-toolbar-dropdown></umb-tiptap-toolbar-dropdown>
 		`;
 	}
 
@@ -46,12 +46,13 @@ export class UmbTiptapFixedMenuElement extends UmbLitElement {
 			color: var(--color-text);
 			display: grid;
 			grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
-			gap: 4px;
+			gap: var(--uui-size-space-1);
 			position: sticky;
 			top: -25px;
 			left: 0px;
 			right: 0px;
-			padding: 4px;
+			padding: var(--uui-size-space-3);
+			align-items: center;
 		}
 
 		:host([readonly]) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/toolbar/tiptap-toolbar-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/toolbar/tiptap-toolbar-dropdown.element.ts
index 205af34d1e..863bd5d2c9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/toolbar/tiptap-toolbar-dropdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/toolbar/tiptap-toolbar-dropdown.element.ts
@@ -1,19 +1,6 @@
-import type { ManifestTiptapExtensionButtonKind } from '../../extensions/tiptap-extension.js';
-import type { UmbTiptapToolbarElementApi } from '../../extensions/types.js';
-import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
-import {
-	css,
-	customElement,
-	html,
-	ifDefined,
-	nothing,
-	repeat,
-	state,
-	when,
-	type TemplateResult,
-} from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, repeat, type TemplateResult } from '@umbraco-cms/backoffice/external/lit';
+import type { UUIPopoverContainerElement } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UUIPopoverContainerElement } from '@umbraco-ui/uui';
 
 const elementName = 'umb-tiptap-toolbar-dropdown';
 
@@ -91,47 +78,61 @@ export class UmbTiptapToolbarDropdownElement extends UmbLitElement {
 				class="dropdown-item"
 				@mouseenter=${() => this.#onMouseEnter(item.label)}
 				@mouseleave=${() => this.#onMouseLeave(item.label)}>
-				<uui-button label=${item.label} popovertarget=${this.#makeAlias(item.label)}></uui-button>
-				<uui-popover-container placement="right-start" id=${this.#makeAlias(item.label)}>
-					${item.nested ? this.#renderItems(item.nested) : nothing}
-				</uui-popover-container>
+				<button class="label" aria-label=${item.label} popovertarget=${this.#makeAlias(item.label)}>
+					${item.label}
+				</button>
+				${item.nested ? this.#renderItems(item.label, item.nested) : nothing}
 			</div>
 		`;
 	}
 
-	#renderItems(items: Array<DropdownItem>) {
-		return html` ${repeat(
-			items,
-			(item) => item.label,
-			(item) => html`${this.#renderItem(item)}`,
-		)}`;
+	#renderItems(label: string, items: Array<DropdownItem>) {
+		return html` <uui-popover-container placement="right-start" id=${this.#makeAlias(label)}>
+			<div class="popover-content">
+				${repeat(
+					items,
+					(item) => item.label,
+					(item) => html`${this.#renderItem(item)}`,
+				)}
+			</div>
+		</uui-popover-container>`;
 	}
 
 	override render() {
 		return html`
-			<uui-button popovertarget="text-styles">Text styles</uui-button>
-			<uui-popover-container id="text-styles"
-				><div class="dropdown-item">${this.#renderItems(this.#testDropdownItems)}</div></uui-popover-container
-			>
+			<button class="label selected-value" aria-label="Text styles" popovertarget="text-styles">Text styles</button>
+			${this.#renderItems('Text styles', this.#testDropdownItems)}
 		`;
 	}
 
 	static override readonly styles = css`
-		:host {
-			position: absolute;
-			top: -67px;
-			--uui-button-content-align: left;
+		button {
+			border: unset;
+			background-color: unset;
+			font: unset;
+			text-align: unset;
 		}
 
-		uui-popover-container {
+		.label {
+			border-radius: var(--uui-border-radius);
+			width: 100%;
+			box-sizing: border-box;
+			align-content: center;
+			padding: var(--uui-size-space-1) var(--uui-size-space-3);
+			align-items: center;
+			cursor: pointer;
+			color: var(--uui-color-text);
+		}
+
+		.selected-value {
+			background: var(--uui-color-surface-alt);
+		}
+
+		.popover-content {
+			background: var(--uui-color-surface);
+			border-radius: var(--uui-border-radius);
 			box-shadow: var(--uui-shadow-depth-3);
-		}
-
-		.dropdown-item {
-			background-color: var(--uui-color-surface);
-			display: flex;
-			flex-direction: column;
-			text-wrap: nowrap;
+			padding: var(--uui-size-space-1);
 		}
 	`;
 }