From 481b4daced462e217714503180bd24c22fe3936e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.com>
Date: Mon, 19 Jul 2021 14:56:39 +0200
Subject: [PATCH] minor updates

---
 .../components/umbgroupsbuilder.directive.js      |  8 ++++++--
 .../src/less/components/umb-group-builder.less    | 15 ++++++++++++++-
 .../src/views/components/umb-groups-builder.html  |  2 +-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
index 4c9708d0e8..76d8761535 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
@@ -106,7 +106,8 @@
                     placeholder: "umb-group-builder__group-sortable-placeholder",
                     handle: ".umb-group-builder__group-handle",
                     items: ".umb-group-builder__group-sortable",
-                    stop: function (event, ui) {
+                    stop: function (e, ui) {
+
                         const groupKey = ui.item[0].dataset.groupKey ? ui.item[0].dataset.groupKey : false;
                         const group = groupKey ? scope.model.groups.find(group => group.key === groupKey) : {};
 
@@ -130,6 +131,9 @@
                     handle: ".umb-group-builder__property-handle",
                     items: ".umb-group-builder__property-sortable",
                     stop: function (e, ui) {
+
+                        // TODO: Ensure moving of properties works..
+
                         updatePropertiesSortOrder();
                     }
                 };
@@ -528,7 +532,7 @@
                 });
             }
 
-            scope.ungroupedPropertiesAreVisible = function({alias, properties}) {
+            scope.isUngroupedPropertiesVisible = function({alias, properties}) {
                 const isOpenTab = alias === scope.openTabAlias;
 
                 if (isOpenTab && properties.length > 0) {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
index 2d2b5bc894..10639df5e8 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
@@ -90,6 +90,12 @@
   justify-content: center;
   height: 100%;
   border-right: 1px solid @gray-9;
+  &:first-of-type {
+    border-bottom-left-radius: 3px;
+  }
+  &:last-of-type {
+    border-bottom-right-radius: 3px;
+  }
 
   &:hover {
     cursor: pointer;
@@ -214,13 +220,16 @@
 
 .umb-group-builder__tab--placeholder {
   border: 1px dashed @ui-action-discreet-border;
+  color: @ui-action-discreet-type;
   padding-right: 10px;
   min-width: 100px;
   background: transparent;
   border-radius: @baseBorderRadius;
   margin-left: 5px;
+  transition: color, border-color, 80ms;
   &:hover {
-    border: @ui-action-discreet-border-hover;
+    color: @ui-action-discreet-type-hover;
+    border-color: @ui-action-discreet-border-hover;
   }
 }
 
@@ -255,6 +264,10 @@
   margin-left: 10px;
 }
 
+.umb-group-builder__ungrouped-properties {
+    margin-top: 20px;
+}
+
 /* ---------- GROUPS ----------  */
 
 .umb-group-builder__groups {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
index 3c4fb7ac7a..360b89c033 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
@@ -87,7 +87,7 @@
     </div>
 
     <!-- Properties added directly to a tab -->
-    <umb-box ng-repeat="(tabIndex, tab) in tabs track by tab.key" ng-show="ungroupedPropertiesAreVisible(tab)">
+    <umb-box ng-repeat="(tabIndex, tab) in tabs track by tab.key" ng-show="isUngroupedPropertiesVisible(tab)" class="umb-group-builder__ungrouped-properties">
         <umb-box-content>
             <ul class="umb-group-builder__properties" ui-sortable="sortableOptionsProperty" ng-model="tab.properties" ng-show="tab.properties.length > 0 || sortingMode">
                 <li ng-repeat="(propertyIndex, property) in tab.properties track by property.alias" ng-class="{'umb-group-builder__property-sortable': sortingMode && !property.inherited}">