yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling

Browse Source
This commit is contained in:
JesmoDev
2024-09-24 09:59:03 +02:00
committed by Jacob Overgaard
parent 4612c93af6
commit 55da8663ca
2 changed files with 46 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts
View File

@@ -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]) {

83
src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/toolbar/tiptap-toolbar-dropdown.element.ts
View File

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