From 3829b0963f3e93a47cffc964d9fdf9478972fe0e Mon Sep 17 00:00:00 2001
From: Jacob Welander Jensen <64834767+Welander1994@users.noreply.github.com>
Date: Fri, 31 Jan 2025 14:09:55 +0100
Subject: [PATCH] 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 <madsr@hey.com>
---
 .../modal/sort-children-of-modal.element.ts   | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/entity-actions/sort-children-of/modal/sort-children-of-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/entity-actions/sort-children-of/modal/sort-children-of-modal.element.ts
index 9fa721f2c1..981c811a08 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/entity-actions/sort-children-of/modal/sort-children-of-modal.element.ts
+++ b/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;
+			}
 		`,
 	];
 }