cleanup

src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts

@@ -103,14 +103,14 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement {
 		});
 	}
 
-	// #openInsertPartialViewSidebar() {
-	// 	this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL);
-	// 	this.#openModal?.onSubmit().then((value) => {
-	// 		this.#getPartialViewSnippet(value).then(() => {
-	// 			this.#dispatchInsertEvent();
-	// 		});
-	// 	});
-	// }
+	#openInsertPartialViewSidebar() {
+		this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL);
+		this.#openModal?.onSubmit().then((value) => {
+			this.#getPartialViewSnippet(value).then(() => {
+				this.#dispatchInsertEvent();
+			});
+		});
+	}
 
 	#openInsertDictionaryItemModal() {
 		this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {
@@ -143,15 +143,17 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement {
 					id="insert-button"
 					label="open insert menu">
 					<ul id="insert-menu" slot="dropdown">
+						<!-- 
+						TODO: uncomment when insert value has endpoint and is properly implemented	
 						<li>
 							<uui-menu-item
 								class="insert-menu-item"
 								target="_blank"
 								label="Value"
 								title="Value"
-								@click=${this.#openInsertValueSidebar}>
+								>
 							</uui-menu-item>
-						</li>
+						</li> -->
 
 						<li>
 							<uui-menu-item

src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts

@@ -74,26 +74,44 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 	}
 
 	#openInsertDictionaryItemModal() {
-		this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {pickableFilter: item => item.id !== null});
+		this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {
+			pickableFilter: (item) => item.id !== null,
+		});
 		this.#openModal?.onSubmit().then((dictionaryItemPickerModalResult) => {
 			if (dictionaryItemPickerModalResult)
 				this.modalHandler?.submit({ value: dictionaryItemPickerModalResult, type: CodeSnippetType.dictionaryItem });
 		});
 	}
 
+	//TODO: insert this when we have insert value implemented
+	#renderInsertValueButton() {
+		return html`<uui-button @click=${this.#openInsertValueSidebar} look="placeholder" label="Insert value"
+			><h3>Value</h3>
+			<p>
+				Displays the value of a named field from the current page, with options to modify the value or fallback to
+				alternative values.
+			</p></uui-button
+		>`;
+	}
+
+	//TODO: insert this when we have partial views
+	#renderInsertPartialViewButton() {
+		return html`${this.data?.hidePartialViews
+			? ''
+			: html`<uui-button @click=${this.#openInsertPartialViewSidebar} look="placeholder" label="Insert value"
+					><h3>Partial view</h3>
+					<p>
+						A partial view is a separate template file which can be rendered inside another template, it's great for
+						reusing markup or for separating complex templates into separate files.
+					</p></uui-button
+			  >`}`;
+	}
+
 	render() {
 		return html`
 			<umb-body-layout headline="Insert">
 				<div id="main">
 					<uui-box>
-						<uui-button @click=${this.#openInsertValueSidebar} look="placeholder" label="Insert value"
-							><h3>Value</h3>
-							<p>
-								Displays the value of a named field from the current page, with options to modify the value or fallback
-								to alternative values.
-							</p></uui-button
-						>
-
 						<uui-button @click=${this.#openInsertDictionaryItemModal} look="placeholder" label="Insert Dictionary item"
 							><h3>Dictionary item</h3>
 							<p>
@@ -138,16 +156,9 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 	];
 }
 
-//TODO: insert this when we have partial views
-// ${this.data?.hidePartialViews
-// 	? ''
-// 	: html`<uui-button @click=${this.#openInsertPartialViewSidebar} look="placeholder" label="Insert value"
-// 			><h3>Partial view</h3>
-// 			<p>
-// 				A partial view is a separate template file which can be rendered inside another template, it's great
-// 				for reusing markup or for separating complex templates into separate files.
-// 			</p></uui-button
-// 	  >`}
+
+
+
 
 declare global {
 	interface HTMLElementTagNameMap {

src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-input.element.ts

@@ -31,10 +31,6 @@ export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement {
 	@property({ attribute: false })
 	snippetMethod?: (value: string, isMandatory: boolean) => string;
 
-	firstUpdated() {
-		console.log(this.snippetMethod);
-	}
-
 	validate() {
 		if (!this.form) return true;
 

src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts

@@ -1,3 +1,4 @@
+import camelCase from 'lodash-es/camelCase.js';
 import { UmbTemplatingInsertMenuElement } from '../../components/insert-menu/templating-insert-menu.element.js';
 import { UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL } from '../../modals/insert-section-modal/insert-section-modal.element.js';
 import type { UmbCodeEditorElement } from '../../../core/components/code-editor/code-editor.element.js';
@@ -7,8 +8,6 @@ import { css, html, customElement, query, state, nothing } from '@umbraco-cms/ba
 import { UMB_MODAL_CONTEXT_TOKEN, UMB_TEMPLATE_PICKER_MODAL, UmbModalContext } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { Subject, debounceTime } from '@umbraco-cms/backoffice/external/rxjs';
-import camelCase from 'lodash-es/camelCase.js';
-//import { UmbCodeEditorElement } from '@umbraco-cms/backoffice/components';
 
 @customElement('umb-template-workspace-editor')
 export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
@@ -72,7 +71,6 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
 			});
 
 			this.inputQuery$.pipe(debounceTime(250)).subscribe((nameInputValue) => {
-				console.log(nameInputValue);
 				this.#templateWorkspaceContext?.setName(nameInputValue);
 				if (this.#isNew && !this._alias) this.#templateWorkspaceContext?.setAlias(camelCase(nameInputValue));
 			});
@@ -124,8 +122,6 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
 		const layoutBlockRegex = /(@{[\s\S][^if]*?Layout\s*?=\s*?)("[^"]*?"|null)(;[\s\S]*?})/gi;
 		const masterTemplate = await this.#templateWorkspaceContext?.setMasterTemplate(id);
 
-		//root item selected
-
 		//Reset master template or is did not exist and the declaration exists
 		if (masterTemplate === null && layoutBlockRegex.test(this._content)) {
 			const string = this._content?.replace(layoutBlockRegex, `$1null$3`);
@@ -194,10 +190,6 @@ ${this._content}`;
 			@input=${this.#onCodeEditorInput}></umb-code-editor>`;
 	}
 
-	#save() {
-		this.#templateWorkspaceContext?.save();
-	}
-
 	render() {
 		// TODO: add correct UI elements
 		return html`<umb-workspace-editor alias="Umb.Workspace.Template">
@@ -207,17 +199,14 @@ ${this._content}`;
 					.value=${this._alias}
 					@change=${this.#onAliasInput}></umb-template-alias-input
 			></uui-input>
-			<uui-button @click=${this.#save} .color=${'danger'} look="primary"
-				>TEMPORARY SAVE BUTTON - REMOVE ME WHEN THE ACTION IS BACK</uui-button
-			>
 			<uui-box>
 				<div slot="header" id="code-editor-menu-container">
 					${this.#renderMasterTemplatePicker()}
 					<div>
 						<umb-templating-insert-menu @insert=${this.#insertSnippet}></umb-templating-insert-menu>
-						<uui-button look="secondary" id="query-builder-button" label="Query builder">
+						<!-- <uui-button look="secondary" id="query-builder-button" label="Query builder">
 							<uui-icon name="umb:wand"></uui-icon>Query builder
-						</uui-button>
+						</uui-button> -->
 						<uui-button
 							look="secondary"
 							id="sections-button"
@@ -259,6 +248,8 @@ ${this._content}`;
 				min-height: calc(100dvh - 300px);
 				margin: var(--uui-size-layout-1);
 				--uui-box-default-padding: 0;
+				/* remove header border bottom as code editor looks better in this box */
+				--uui-color-divider-standalone: transparent;
 			}
 
 			uui-input {

src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.element.ts

@@ -1,6 +1,5 @@
 import { UmbTemplateWorkspaceContext } from './template-workspace.context.js';
-import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
-import { css, html , customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import type { IRoutingInfo, PageComponent, UmbRoute, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
@@ -45,31 +44,6 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement {
 				this.#routerPath = event.target.absoluteRouterPath;
 			}}></umb-router-slot>`;
 	}
-
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-
-			umb-code-editor {
-				--editor-height: calc(100vh - 300px);
-			}
-
-			uui-box {
-				margin: 1em;
-				--uui-box-default-padding: 0;
-			}
-
-			uui-input {
-				width: 100%;
-				margin: 1em;
-			}
-		`,
-	];
 }
 
 export default UmbTemplateWorkspaceElement;