From bd3b2fcd36c7cfeaac35a5a5a1998856dbaff72a Mon Sep 17 00:00:00 2001 From: Nathan Woulfe Date: Mon, 26 Jun 2023 11:33:55 +1000 Subject: [PATCH 1/5] hide overflow when property layout is vertical --- .../workspace-property-layout.element.ts | 37 +++++++++++++++++-- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.element.ts index 9f929dc31b..29281988f5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.element.ts @@ -1,4 +1,10 @@ -import { css, html, LitElement, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { + css, + html, + LitElement, + customElement, + property, +} from '@umbraco-cms/backoffice/external/lit'; import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; /** @@ -80,9 +86,14 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement { grid-column: span 2; } + :host > div:last-child { + margin-top:var(--uui-size-space-3); + } + @container (width > 600px) { :host(:not([orientation='vertical'])) > div { grid-column: span 1; + margin-top:0; } } @@ -90,8 +101,13 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement { border-bottom: none; } + /* container has 18px padding, reduce here to ensure consistency */ :host-context(umb-variantable-property:first-of-type) { - padding-top: 0; + padding-top: var(--uui-size-space-2); + } + + :host-context(umb-variantable-property:last-of-type) { + padding-bottom: var(--uui-size-space-2); } #description { @@ -102,7 +118,22 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement { position: sticky; top: var(--uui-size-space-4); height: min-content; - z-index: 2; + z-index: 1050; + background-color:var(--uui-color-surface); + } + + :host-context(umb-variantable-property) #header { + top: 0; + } + + #header::before { + content: ''; + display:block; + position:absolute; + top:calc(var(--uui-size-layout-1) * -1); + width:100%; + height:var(--uui-size-layout-1); + background-color:var(--uui-color-surface); } `, ]; From 5ef1e2df58e8e1dee5cc072b223b28a319e040d2 Mon Sep 17 00:00:00 2001 From: Nathan Woulfe Date: Mon, 26 Jun 2023 11:34:06 +1000 Subject: [PATCH 2/5] align tinymce styles with uui --- .../core/components/input-tiny-mce/input-tiny-mce.element.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts index 04f180b5bd..3d8c2ad3c7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts @@ -294,6 +294,11 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) { min-height: 100px; } + .tox-tinymce { + border-radius: 0; + border: var(--uui-input-border-width, 1px) solid var(--uui-input-border-color, var(--uui-color-border,#d8d7d9)); + } + .tox-tinymce-aux { z-index: 9000; } From 240c59b31a658f3e979ae8729bc00b98170d55c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 29 Jun 2023 21:08:41 +0200 Subject: [PATCH 3/5] Niels corrections --- .../src/mocks/data/document-type.data.ts | 5 +- .../input-tiny-mce/input-tiny-mce.element.ts | 2 +- .../workspace-property-layout.element.ts | 74 +++++++------------ ...ocument-workspace-view-edit-tab.element.ts | 5 ++ 4 files changed, 35 insertions(+), 51 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts index 0fa0dada46..db797ad212 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts @@ -25,7 +25,7 @@ export const data: Array = [ containerId: 'all-properties-group-key', alias: 'richTextEditor', name: 'Rich Text editor', - description: '', + description: 'Some description to test with a long description.', dataTypeId: 'dt-richTextEditor', variesByCulture: false, variesBySegment: false, @@ -38,7 +38,8 @@ export const data: Array = [ appearance: { labelOnTop: false, }, - }, { + }, + { id: '2', containerId: 'all-properties-group-id', alias: 'colorPicker', diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts index f970175873..eaabdca651 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts @@ -296,7 +296,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) { .tox-tinymce { border-radius: 0; - border: var(--uui-input-border-width, 1px) solid var(--uui-input-border-color, var(--uui-color-border,#d8d7d9)); + border: var(--uui-input-border-width, 1px) solid var(--uui-input-border-color, var(--uui-color-border, #d8d7d9)); } .tox-tinymce-aux { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.element.ts index 29281988f5..a4e3cb12b3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-layout/workspace-property-layout.element.ts @@ -1,10 +1,4 @@ -import { - css, - html, - LitElement, - customElement, - property, -} from '@umbraco-cms/backoffice/external/lit'; +import { css, html, LitElement, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; /** @@ -56,13 +50,13 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement { render() { // TODO: Only show alias on label if user has access to DocumentType within settings: return html` -