From b8e10077bfc4176a282ab129eceeb8dbcd685830 Mon Sep 17 00:00:00 2001 From: Mathias Helsengren Date: Thu, 13 Nov 2025 10:16:33 +0100 Subject: [PATCH 1/7] Adding the sorter controller, and fixing some ui elements so you are able to drag the hostname elements around to sort them --- .../culture-and-hostnames-modal.element.ts | 211 ++++++++++++++---- 1 file changed, 168 insertions(+), 43 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts index b03235b7ccb2..c67a34d5e728 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts @@ -3,14 +3,29 @@ import type { UmbCultureAndHostnamesModalData, UmbCultureAndHostnamesModalValue, } from './culture-and-hostnames-modal.token.js'; -import { css, customElement, html, query, repeat, state } from '@umbraco-cms/backoffice/external/lit'; +import { + css, + customElement, + html, + property, + query, + repeat, + state, + nothing, +} from '@umbraco-cms/backoffice/external/lit'; import { UmbLanguageCollectionRepository } from '@umbraco-cms/backoffice/language'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { DomainPresentationModel } from '@umbraco-cms/backoffice/external/backend-api'; import type { UmbLanguageDetailModel } from '@umbraco-cms/backoffice/language'; import type { UUIInputEvent, UUIPopoverContainerElement, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui'; +import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; +import { UmbId } from '@umbraco-cms/backoffice/id'; +interface UmbDomainPresentationModel { + unique: string; + domainName: string; + isoCode: string; +} @customElement('umb-culture-and-hostnames-modal') export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< UmbCultureAndHostnamesModalData, @@ -21,6 +36,40 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< #unique?: string | null; + #sorter = new UmbSorterController(this, { + getUniqueOfElement: (element) => { + return element.getAttribute('data-sort-entry-id'); + }, + getUniqueOfModel: (modelEntry: UmbDomainPresentationModel) => { + return modelEntry.unique; + }, + itemSelector: '#item', + containerSelector: '#sorter-wrapper', + onChange: ({ model }) => { + const oldValue = this._domains; + this._domains = model; + this.requestUpdate('_domains', oldValue); + }, + }); + + /** + * Disables the input + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + disabled = false; + + /** + * Makes the input readonly + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + @state() private _languageModel: Array = []; @@ -28,7 +77,7 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< private _defaultIsoCode?: string | null; @state() - private _domains: Array = []; + private _domains: Array = []; @query('#more-options') popoverContainerElement?: UUIPopoverContainerElement; @@ -47,7 +96,8 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< if (!data) return; this._defaultIsoCode = data.defaultIsoCode; - this._domains = data.domains; + this._domains = data.domains.map((domain) => ({ ...domain, unique: UmbId.new() })); // Create new object references + this.#sorter.setModel(this._domains); } async #requestLanguages() { @@ -83,15 +133,19 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< #onChangeDomainLanguage(e: UUISelectEvent, index: number) { const isoCode = e.target.value as string; this._domains = this._domains.map((domain, i) => (index === i ? { ...domain, isoCode } : domain)); + this.#sorter.setModel(this._domains); } #onChangeDomainHostname(e: UUIInputEvent, index: number) { const domainName = e.target.value as string; this._domains = this._domains.map((domain, i) => (index === i ? { ...domain, domainName } : domain)); + + this.#sorter.setModel(this._domains); } async #onRemoveDomain(index: number) { this._domains = this._domains.filter((d, i) => index !== i); + this.#sorter.setModel(this._domains); } #onAddDomain(useCurrentDomain?: boolean) { @@ -101,12 +155,29 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore this.popoverContainerElement?.hidePopover(); - this._domains = [...this._domains, { isoCode: defaultModel?.unique ?? '', domainName: window.location.host }]; + this._domains = [ + ...this._domains, + { isoCode: defaultModel?.unique ?? '', domainName: window.location.host, unique: UmbId.new() }, + ]; + this.#sorter.setModel(this._domains); + + this.#focusNewItem(); } else { - this._domains = [...this._domains, { isoCode: defaultModel?.unique ?? '', domainName: '' }]; + this._domains = [...this._domains, { isoCode: defaultModel?.unique ?? '', domainName: '', unique: UmbId.new() }]; + this.#sorter.setModel(this._domains); + + this.#focusNewItem(); } } + async #focusNewItem() { + await this.updateComplete; + const items = this.shadowRoot?.querySelectorAll('div.hostname-item') as NodeListOf; + const newItem = items[items.length - 1]; + const firstInput = newItem?.querySelector('uui-input') as HTMLElement; + firstInput?.focus(); + } + // Renders override render() { @@ -131,20 +202,24 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< #renderCultureSection() { return html` - - ${this.localize.term('assignDomain_language')} - - - - ${this.localize.term('assignDomain_inherit')} - - ${this.#renderLanguageModelOptions()} - - + +
+ + + + ${this.localize.term('assignDomain_inherit')} + + ${this.#renderLanguageModelOptions()} + + +
+ + `; } @@ -163,30 +238,37 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< } #renderDomains() { - if (!this._domains?.length) return; + // TODO: + // if (!this._domains?.length) return; + console.log(this._domains); return html` -
+
${repeat( this._domains, - (domain) => domain.isoCode, + (domain) => domain.unique, (domain, index) => html` - this.#onChangeDomainHostname(e, index)}> - this.#onChangeDomainLanguage(e, index)}> - ${this.#renderLanguageModelOptions()} - - this.#onRemoveDomain(index)}> - - +
+ ${this.disabled || this.readonly ? nothing : html``} +
+ this.#onChangeDomainHostname(e, index)}> + this.#onChangeDomainLanguage(e, index)}> + ${this.#renderLanguageModelOptions()} + + this.#onRemoveDomain(index)}> + + +
+
`, )}
@@ -229,6 +311,11 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< static override styles = [ UmbTextStyles, css` + umb-property-layout { + padding-top: 0; + padding-bottom: 0; + } + uui-button-group { width: 100%; } @@ -241,13 +328,51 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< flex-grow: 0; } - #domains { - margin-top: var(--uui-size-layout-1); - margin-bottom: var(--uui-size-2); + #item { + position: relative; + display: flex; + gap: var(--uui-size-1); + align-items: center; + } + + .hostname-wrapper { + position: relative; + flex: 1; display: grid; grid-template-columns: 1fr 1fr auto; grid-gap: var(--uui-size-1); } + + #sorter-wrapper { + margin-top: var(--uui-size-layout-1); + margin-bottom: var(--uui-size-2); + display: flex; + flex-direction: column; + grid-gap: var(--uui-size-1); + } + + .handle { + cursor: grab; + } + + .handle:active { + cursor: grabbing; + } + #action { + display: block; + } + + .--umb-sorter-placeholder { + position: relative; + visibility: hidden; + } + .--umb-sorter-placeholder::after { + content: ''; + position: absolute; + inset: 0px; + border-radius: var(--uui-border-radius); + border: 1px dashed var(--uui-color-divider-emphasis); + } `, ]; } From dad46e5423feec671948f9f56e8702ffce68ec2f Mon Sep 17 00:00:00 2001 From: Mathias Helsengren Date: Thu, 13 Nov 2025 14:23:28 +0100 Subject: [PATCH 2/7] Fixed sorting --- .../culture-and-hostnames-modal.element.ts | 39 ++++++++++--------- 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts index c67a34d5e728..6ad97090c701 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts @@ -12,6 +12,7 @@ import { repeat, state, nothing, + type PropertyValues, } from '@umbraco-cms/backoffice/external/lit'; import { UmbLanguageCollectionRepository } from '@umbraco-cms/backoffice/language'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; @@ -84,6 +85,13 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< // Init + override willUpdate(changedProperties: PropertyValues) { + if (changedProperties.has('_domains') && this._domains?.length) { + // Update sorter whenever _domains changes + this.#sorter.setModel(this._domains); + } + } + override firstUpdated() { this.#unique = this.data?.unique; this.#requestLanguages(); @@ -96,8 +104,7 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< if (!data) return; this._defaultIsoCode = data.defaultIsoCode; - this._domains = data.domains.map((domain) => ({ ...domain, unique: UmbId.new() })); // Create new object references - this.#sorter.setModel(this._domains); + this._domains = data.domains.map((domain) => ({ ...domain, unique: UmbId.new() })); } async #requestLanguages() { @@ -107,7 +114,8 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< } async #handleSave() { - this.value = { defaultIsoCode: this._defaultIsoCode, domains: this._domains }; + const cleanDomains = this._domains.map((domain) => ({ domainName: domain.domainName, isoCode: domain.isoCode })); + this.value = { defaultIsoCode: this._defaultIsoCode, domains: cleanDomains }; const { error } = await this.#documentRepository.updateCultureAndHostnames(this.#unique!, this.value); if (!error) { @@ -133,19 +141,15 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< #onChangeDomainLanguage(e: UUISelectEvent, index: number) { const isoCode = e.target.value as string; this._domains = this._domains.map((domain, i) => (index === i ? { ...domain, isoCode } : domain)); - this.#sorter.setModel(this._domains); } #onChangeDomainHostname(e: UUIInputEvent, index: number) { const domainName = e.target.value as string; this._domains = this._domains.map((domain, i) => (index === i ? { ...domain, domainName } : domain)); - - this.#sorter.setModel(this._domains); } async #onRemoveDomain(index: number) { this._domains = this._domains.filter((d, i) => index !== i); - this.#sorter.setModel(this._domains); } #onAddDomain(useCurrentDomain?: boolean) { @@ -159,12 +163,10 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< ...this._domains, { isoCode: defaultModel?.unique ?? '', domainName: window.location.host, unique: UmbId.new() }, ]; - this.#sorter.setModel(this._domains); this.#focusNewItem(); } else { this._domains = [...this._domains, { isoCode: defaultModel?.unique ?? '', domainName: '', unique: UmbId.new() }]; - this.#sorter.setModel(this._domains); this.#focusNewItem(); } @@ -227,20 +229,19 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< #renderDomainSection() { return html` - - Valid domain names are: "example.com", "www.example.com", "example.com:8080", or - "https://www.example.com/".
Furthermore also one-level paths in domains are supported, eg. - "example.com/en" or "/en". - +
+ + Valid domain names are: "example.com", "www.example.com", "example.com:8080", or + "https://www.example.com/".
Furthermore also one-level paths in domains are supported, eg. + "example.com/en" or "/en". + +
${this.#renderDomains()} ${this.#renderAddNewDomainButton()} `; } #renderDomains() { - // TODO: - // if (!this._domains?.length) return; - console.log(this._domains); return html`
${repeat( @@ -323,6 +324,9 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< uui-box:first-child { margin-bottom: var(--uui-size-layout-1); } + #domain-help-text { + margin-bottom: var(--uui-size-2); + } #dropdown { flex-grow: 0; @@ -344,7 +348,6 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< } #sorter-wrapper { - margin-top: var(--uui-size-layout-1); margin-bottom: var(--uui-size-2); display: flex; flex-direction: column; From b8079d0cebf3a198f83c82bd553c19be0b509891 Mon Sep 17 00:00:00 2001 From: Mathias Helsengren Date: Thu, 13 Nov 2025 15:15:33 +0100 Subject: [PATCH 3/7] Changed the html structure and tweaked around with the css to make it look better. Added a description for the Culture section. Alligned the rendered text to allign better with the name "Culture and Hostnames" --- .../src/assets/lang/en.ts | 38 ++++----- .../culture-and-hostnames-modal.element.ts | 78 ++++++++----------- 2 files changed, 50 insertions(+), 66 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index a04d3fe3cc3c..70932e7affd4 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -113,26 +113,26 @@ export default { }, assignDomain: { permissionDenied: 'Permission denied.', - addNew: 'Add new domain', - addCurrent: 'Add current domain', + addNew: 'Add new hostname', + addCurrent: 'Add current hostname', remove: 'remove', invalidNode: 'Invalid node.', - invalidDomain: 'One or more domains have an invalid format.', - duplicateDomain: 'Domain has already been assigned.', - language: 'Language', - domain: 'Domain', - domainCreated: "New domain '%0%' has been created", - domainDeleted: "Domain '%0%' is deleted", - domainExists: "Domain '%0%' has already been assigned", - domainUpdated: "Domain '%0%' has been updated", - orEdit: 'Edit Current Domains', + invalidDomain: 'One or more hostnames have an invalid format.', + duplicateDomain: 'Hostname has already been assigned.', + language: 'Culture', + domain: 'Hostname', + domainCreated: "New hostname '%0%' has been created", + domainDeleted: "Hostname '%0%' is deleted", + domainExists: "Hostname '%0%' has already been assigned", + domainUpdated: "Hostname '%0%' has been updated", + orEdit: 'Edit Current Hostnames', domainHelpWithVariants: - 'Valid domain names are: "example.com", "www.example.com", "example.com:8080", or "https://www.example.com/". Furthermore also one-level paths in domains are supported, e.g. "example.com/en" or "/en".', + 'Valid hostnames are: "example.com", "www.example.com", "example.com:8080", or "https://www.example.com/". Furthermore also one-level paths in hostnames are supported, e.g. "example.com/en" or "/en".', inherit: 'Inherit', setLanguage: 'Culture', setLanguageHelp: - 'Set the culture for nodes below the current node,
or inherit culture from parent nodes. Will also apply
to the current node, unless a domain below applies too.', - setDomains: 'Domains', + 'Set the culture for nodes below the current node, or inherit culture from parent nodes. Will also apply to the current node, unless a hostname below applies too.', + setDomains: 'Hostnames', }, buttons: { clearSelection: 'Clear selection', @@ -191,7 +191,7 @@ export default { save: 'Media saved', }, auditTrails: { - assigndomain: 'Domain assigned: %0%', + assigndomain: 'Hostname assigned: %0%', atViewingFor: 'Viewing for', delete: 'Content deleted', unpublish: 'Content unpublished', @@ -209,7 +209,7 @@ export default { custom: '%0%', contentversionpreventcleanup: 'Clean up disabled for version: %0%', contentversionenablecleanup: 'Clean up enabled for version: %0%', - smallAssignDomain: 'Assign Domain', + smallAssignDomain: 'Assign Hostname', smallCopy: 'Copy', smallPublish: 'Publish', smallPublishVariant: 'Publish', @@ -1562,9 +1562,9 @@ export default { dictionaryItemExportedError: 'An error occurred while exporting the dictionary item(s)', dictionaryItemImported: 'The following dictionary item(s) has been imported!', publishWithNoDomains: - 'Domains are not configured for multilingual site, please contact an administrator, see log for more information', + 'Hostnames are not configured for multilingual site, please contact an administrator, see log for more information', publishWithMissingDomain: - 'There is no domain configured for %0%, please contact an administrator, see log for more information', + 'There is no hostname configured for %0%, please contact an administrator, see log for more information', copySuccessMessage: 'Your system information has successfully been copied to the clipboard', cannotCopyInformation: 'Could not copy your system information to the clipboard', webhookSaved: 'Webhook saved', @@ -2771,7 +2771,7 @@ export default { minimalLevelDescription: 'We will only send an anonymised site ID to let us know that the site exists.', basicLevelDescription: 'We will send an anonymised site ID, Umbraco version, and packages installed', detailedLevelDescription: - 'We will send:
  • Anonymised site ID, Umbraco version, and packages installed.
  • Number of: Root nodes, Content nodes, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, Backoffice external login providers, and Property Editors in use.
  • System information: Webserver, server OS, server framework, server OS language, and database provider.
  • Configuration settings: ModelsBuilder mode, if custom Umbraco path exists, ASP environment, whether the delivery API is enabled, and allows public access, and if you are in debug mode.
We might change what we send on the Detailed level in the future. If so, it will be listed above.
By choosing "Detailed" you agree to current and future anonymised information being collected.', + 'We will send:
  • Anonymised site ID, Umbraco version, and packages installed.
  • Number of: Root nodes, Content nodes, Media, Document Types, Templates, Languages, Hostnames, User Group, Users, Members, Backoffice external login providers, and Property Editors in use.
  • System information: Webserver, server OS, server framework, server OS language, and database provider.
  • Configuration settings: ModelsBuilder mode, if custom Umbraco path exists, ASP environment, whether the delivery API is enabled, and allows public access, and if you are in debug mode.
We might change what we send on the Detailed level in the future. If so, it will be listed above.
By choosing "Detailed" you agree to current and future anonymised information being collected.', }, routing: { routeNotFoundTitle: 'Not found', diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts index 6ad97090c701..854d2c311faa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts @@ -185,7 +185,35 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< override render() { return html` - ${this.#renderCultureSection()} ${this.#renderDomainSection()} + +
+ + + + ${this.localize.term('assignDomain_inherit')} + + ${this.#renderLanguageModelOptions()} + + +
+ + + +
${this.#renderDomains()} ${this.#renderAddNewDomainButton()}
 + -
- - - - ${this.localize.term('assignDomain_inherit')} - - ${this.#renderLanguageModelOptions()} - - -
- - - - `; - } - - #renderDomainSection() { - return html` - -
- - Valid domain names are: "example.com", "www.example.com", "example.com:8080", or - "https://www.example.com/".
Furthermore also one-level paths in domains are supported, eg. - "example.com/en" or "/en". - -
- ${this.#renderDomains()} ${this.#renderAddNewDomainButton()} - - `; - } - #renderDomains() { return html`
@@ -312,11 +301,9 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< static override styles = [ UmbTextStyles, css` - umb-property-layout { - padding-top: 0; - padding-bottom: 0; + umb-property-layout[orientation='vertical'] { + padding: 0; } - uui-button-group { width: 100%; } @@ -324,9 +311,6 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< uui-box:first-child { margin-bottom: var(--uui-size-layout-1); } - #domain-help-text { - margin-bottom: var(--uui-size-2); - } #dropdown { flex-grow: 0; From a3b832032b9f661f39f879b11591f481e328d958 Mon Sep 17 00:00:00 2001 From: Mathias Helsengren Date: Thu, 13 Nov 2025 15:58:18 +0100 Subject: [PATCH 4/7] Update src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts Forgot to remove this after I was done testing Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../modal/culture-and-hostnames-modal.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts index 854d2c311faa..99d9d1cd81f0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts @@ -86,7 +86,7 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< // Init override willUpdate(changedProperties: PropertyValues) { - if (changedProperties.has('_domains') && this._domains?.length) { + if (changedProperties.has('_domains')) { // Update sorter whenever _domains changes this.#sorter.setModel(this._domains); } From 4c1e16bfc12f67902c204a9b2523a37d9e8db54b Mon Sep 17 00:00:00 2001 From: Mathias Helsengren Date: Fri, 14 Nov 2025 09:40:57 +0100 Subject: [PATCH 5/7] Update src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts Changing grid-gap to just gap Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../modal/culture-and-hostnames-modal.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts index 99d9d1cd81f0..88ec454339e6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts @@ -328,14 +328,14 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< flex: 1; display: grid; grid-template-columns: 1fr 1fr auto; - grid-gap: var(--uui-size-1); + gap: var(--uui-size-1); } #sorter-wrapper { margin-bottom: var(--uui-size-2); display: flex; flex-direction: column; - grid-gap: var(--uui-size-1); + gap: var(--uui-size-1); } .handle { From f56e2299b831acf3ecf63fad42481b8c21251be0 Mon Sep 17 00:00:00 2001 From: Mathias Helsengren Date: Fri, 14 Nov 2025 10:34:03 +0100 Subject: [PATCH 6/7] Removed the disabled and readonly props I added since they are not needed. Removed the conditional rendering that was attached to the readonly and disabled properties --- .../culture-and-hostnames-modal.element.ts | 30 ++++--------------- 1 file changed, 5 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts index 88ec454339e6..1c873c42947e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts @@ -7,11 +7,9 @@ import { css, customElement, html, - property, query, repeat, state, - nothing, type PropertyValues, } from '@umbraco-cms/backoffice/external/lit'; import { UmbLanguageCollectionRepository } from '@umbraco-cms/backoffice/language'; @@ -32,11 +30,6 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< UmbCultureAndHostnamesModalData, UmbCultureAndHostnamesModalValue > { - #documentRepository = new UmbDocumentCultureAndHostnamesRepository(this); - #languageCollectionRepository = new UmbLanguageCollectionRepository(this); - - #unique?: string | null; - #sorter = new UmbSorterController(this, { getUniqueOfElement: (element) => { return element.getAttribute('data-sort-entry-id'); @@ -53,23 +46,10 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< }, }); - /** - * Disables the input - * @type {boolean} - * @attr - * @default false - */ - @property({ type: Boolean, reflect: true }) - disabled = false; - - /** - * Makes the input readonly - * @type {boolean} - * @attr - * @default false - */ - @property({ type: Boolean, reflect: true }) - readonly = false; + #documentRepository = new UmbDocumentCultureAndHostnamesRepository(this); + #languageCollectionRepository = new UmbLanguageCollectionRepository(this); + + #unique?: string | null; @state() private _languageModel: Array = []; @@ -238,7 +218,7 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< (domain) => domain.unique, (domain, index) => html`
- ${this.disabled || this.readonly ? nothing : html``} +
Date: Fri, 14 Nov 2025 12:36:17 +0100 Subject: [PATCH 7/7] Removed the item id from the element and changed css and sorter logic to target the hostname-item class instead --- .../modal/culture-and-hostnames-modal.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts index 1c873c42947e..104e74e046f3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/culture-and-hostnames/modal/culture-and-hostnames-modal.element.ts @@ -37,7 +37,7 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< getUniqueOfModel: (modelEntry: UmbDomainPresentationModel) => { return modelEntry.unique; }, - itemSelector: '#item', + itemSelector: '.hostname-item', containerSelector: '#sorter-wrapper', onChange: ({ model }) => { const oldValue = this._domains; @@ -217,7 +217,7 @@ export class UmbCultureAndHostnamesModalElement extends UmbModalBaseElement< this._domains, (domain) => domain.unique, (domain, index) => html` -
+