V15/sort by selected icons (#18158)

* adds back the custom icon for the content nodes and give a hover effect to indicate that it is grabable, and applys the choosen color

* Update sort-children-of-modal.element.ts

* switches to use the umb-icon and updates styling

* removes the backoffice host

* Update appsettings.Development.template.json

* Update sort-children-of-modal.element.ts

* Update sort-children-of-modal.element.ts

---------

Co-authored-by: Mads Rasmussen <[email protected]>

Author: Welander1994

src/Umbraco.Web.UI.Client/src/packages/core/tree/entity-actions/sort-children-of/modal/sort-children-of-modal.element.ts

@@ -287,8 +287,9 @@ export class UmbSortChildrenOfModalElement extends UmbModalBaseElement<
 	}
 
 	#renderChild(item: UmbTreeItemModel) {
-		return html` <uui-table-row data-unique=${item.unique} class="${this._isSorting ? 'hidden' : ''}">
-			<uui-table-cell><uui-icon name="icon-navigation" aria-hidden="true"></uui-icon></uui-table-cell>
+		// TODO: find a way to get the icon for the item. We do not have the icon in the tree item model.
+		return html` <uui-table-row id="content-node" data-unique=${item.unique} class="${this._isSorting ? 'hidden' : ''}">
+			<uui-table-cell><umb-icon name="icon-navigation"></umb-icon></uui-table-cell>
 			<uui-table-cell>${item.name}</uui-table-cell>
 			<uui-table-cell>${this.#renderCreateDate(item)}</uui-table-cell>
 		</uui-table-row>`;
@@ -310,6 +311,14 @@ export class UmbSortChildrenOfModalElement extends UmbModalBaseElement<
 				width: 100%;
 			}
 
+			uui-table-cell {
+				padding: var(--uui-size-space-2) var(--uui-size-space-5);
+			}
+
+			uui-table-head-cell {
+				padding: 0 var(--uui-size-space-5);
+			}
+
 			uui-table-head-cell button {
 				background-color: transparent;
 				color: inherit;
@@ -328,9 +337,17 @@ export class UmbSortChildrenOfModalElement extends UmbModalBaseElement<
 				visibility: hidden;
 			}
 
+			uui-table-row[id='content-node']:hover {
+				cursor: grab;
+			}
+
 			uui-icon[name='icon-navigation'] {
 				cursor: hand;
 			}
+
+			uui-box {
+				--uui-box-default-padding: 0;
+			}
 		`,
 	];
 }