From 4cf42bbb68c52d88209629726532012495ee5b59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 29 Oct 2019 17:38:02 +0100
Subject: [PATCH 1/2] Added specific styling to the DataType Delete dialog for
 better looks and overview

---
 src/Umbraco.Web.UI.Client/src/less/belle.less |  2 ++
 .../umb-dialog-datatype-delete.less           | 33 +++++++++++++++++++
 .../src/views/datatypes/delete.html           | 14 ++++----
 3 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/contextdialogs/umb-dialog-datatype-delete.less

diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 83d254c73c..245ad394ac 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -187,6 +187,8 @@
 @import "components/users/umb-user-preview.less";
 @import "components/users/umb-user-picker-list.less";
 
+@import "components/contextdialogs/umb-dialog-datatype-delete.less";
+
 
 // Utilities
 @import "utilities/layout/_display.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/contextdialogs/umb-dialog-datatype-delete.less b/src/Umbraco.Web.UI.Client/src/less/components/contextdialogs/umb-dialog-datatype-delete.less
new file mode 100644
index 0000000000..0e0b8f22bd
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/contextdialogs/umb-dialog-datatype-delete.less
@@ -0,0 +1,33 @@
+.umb-dialog-datatype-delete {
+    
+
+    .umb-dialog-datatype-delete__table-head-column-name {
+        width: 140px;
+    }
+
+    .umb-table-body__icon {
+        margin-right: 5px;
+        vertical-align: top;
+        display: inline-block;
+    }
+
+    .table tbody td {
+        vertical-align: top;
+    }
+    .table tbody td > span {
+        margin: 5px 0;
+        vertical-align: middle;
+    }
+    .table tbody p {
+        line-height: 12px;
+        margin: 5px 0;
+        vertical-align: middle;
+    }
+
+    .table tbody .icon {
+        vertical-align: top;
+        margin-right: 5px;
+        display: inline-block;
+    }
+
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/datatypes/delete.html b/src/Umbraco.Web.UI.Client/src/views/datatypes/delete.html
index 6c415e9f38..ce2e75e742 100644
--- a/src/Umbraco.Web.UI.Client/src/views/datatypes/delete.html
+++ b/src/Umbraco.Web.UI.Client/src/views/datatypes/delete.html
@@ -1,4 +1,4 @@
-<div class="umb-dialog umb-pane" ng-controller="Umbraco.Editors.DataType.DeleteController as vm">
+<div class="umb-dialog umb-pane umb-dialog-datatype-delete" ng-controller="Umbraco.Editors.DataType.DeleteController as vm">
     <div class="umb-dialog-body">
 
         <ng-switch on="currentNode.nodeType">
@@ -44,14 +44,14 @@
                             <table class="table table-condensed table-bordered">
                                 <thead>
                                     <tr>
-                                        <th><localize key="general_name">Name</localize></th>
+                                        <th class="umb-dialog-datatype-delete__table-head-column-name"><localize key="general_name">Name</localize></th>
                                         <th><localize key="general_properties">Properties</localize></th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     <tr ng-repeat="relation in vm.references.documentTypes">
                                         <td><span title="{{::relation.name}}({{::relation.alias}})"><i class="umb-table-body__icon {{relation.icon}}"></i>{{::relation.name}}</span></td>
-                                        <td><span><span class="red" ng-repeat="property in relation.properties"><i class="icon icon-alert red"></i>{{::property.name}}{{$last ? '' : ', '}}</span></span></td>
+                                        <td><span><p class="red" ng-repeat="property in relation.properties"><i class="icon icon-alert red"></i>{{::property.name}}</p></span></td>
                                     </tr>
                                 </tbody>
                             </table>
@@ -68,14 +68,14 @@
                             <table class="table table-condensed table-bordered">
                                 <thead>
                                     <tr>
-                                        <th><localize key="general_name">Name</localize></th>
+                                        <th class="umb-dialog-datatype-delete__table-head-column-name"><localize key="general_name">Name</localize></th>
                                         <th><localize key="general_properties">Properties</localize></th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     <tr ng-repeat="relation in vm.references.mediaTypes">
                                         <td><span title="{{::relation.name}}({{::relation.alias}})"><i class="umb-table-body__icon {{relation.icon}}"></i>{{::relation.name}}</span></td>
-                                        <td><span><span class="red" ng-repeat="property in relation.properties"><i class="icon icon-alert red"></i>{{::property.name}}{{$last ? '' : ', '}}</span></span></td>
+                                        <td><span><p class="red" ng-repeat="property in relation.properties"><i class="icon icon-alert red"></i>{{::property.name}}</p></span></td>
                                     </tr>
                                 </tbody>
                             </table>
@@ -92,14 +92,14 @@
                             <table class="table table-condensed table-bordered">
                                     <thead>
                                         <tr>
-                                            <th><localize key="general_name">Name</localize></th>
+                                            <th class="umb-dialog-datatype-delete__table-head-column-name"><localize key="general_name">Name</localize></th>
                                             <th><localize key="general_properties">Properties</localize></th>
                                         </tr>
                                     </thead>
                                     <tbody>
                                         <tr ng-repeat="relation in vm.references.memberTypes">
                                             <td><span title="{{::relation.name}}({{::relation.alias}})"><i class="umb-table-body__icon {{relation.icon}}"></i>{{::relation.name}}</span></td>
-                                            <td><span><span class="red" ng-repeat="property in relation.properties"><i class="icon icon-alert red"></i>{{::property.name}}{{$last ? '' : ', '}}</span></span></td>
+                                            <td><span><p class="red" ng-repeat="property in relation.properties"><i class="icon icon-alert red"></i>{{::property.name}}</p></span></td>
                                         </tr>
                                     </tbody>
                                 </table>

From 9e4b9e6431920373301656dcf15936473ed0709e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 31 Oct 2019 11:53:30 +0100
Subject: [PATCH 2/2] changed span to div

---
 src/Umbraco.Web.UI.Client/src/views/datatypes/delete.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/datatypes/delete.html b/src/Umbraco.Web.UI.Client/src/views/datatypes/delete.html
index ce2e75e742..bc201e2c39 100644
--- a/src/Umbraco.Web.UI.Client/src/views/datatypes/delete.html
+++ b/src/Umbraco.Web.UI.Client/src/views/datatypes/delete.html
@@ -51,7 +51,7 @@
                                 <tbody>
                                     <tr ng-repeat="relation in vm.references.documentTypes">
                                         <td><span title="{{::relation.name}}({{::relation.alias}})"><i class="umb-table-body__icon {{relation.icon}}"></i>{{::relation.name}}</span></td>
-                                        <td><span><p class="red" ng-repeat="property in relation.properties"><i class="icon icon-alert red"></i>{{::property.name}}</p></span></td>
+                                        <td><div><p class="red" ng-repeat="property in relation.properties"><i class="icon icon-alert red"></i>{{::property.name}}</p></div></td>
                                     </tr>
                                 </tbody>
                             </table>
@@ -75,7 +75,7 @@
                                 <tbody>
                                     <tr ng-repeat="relation in vm.references.mediaTypes">
                                         <td><span title="{{::relation.name}}({{::relation.alias}})"><i class="umb-table-body__icon {{relation.icon}}"></i>{{::relation.name}}</span></td>
-                                        <td><span><p class="red" ng-repeat="property in relation.properties"><i class="icon icon-alert red"></i>{{::property.name}}</p></span></td>
+                                        <td><div><p class="red" ng-repeat="property in relation.properties"><i class="icon icon-alert red"></i>{{::property.name}}</p></div></td>
                                     </tr>
                                 </tbody>
                             </table>
@@ -99,7 +99,7 @@
                                     <tbody>
                                         <tr ng-repeat="relation in vm.references.memberTypes">
                                             <td><span title="{{::relation.name}}({{::relation.alias}})"><i class="umb-table-body__icon {{relation.icon}}"></i>{{::relation.name}}</span></td>
-                                            <td><span><p class="red" ng-repeat="property in relation.properties"><i class="icon icon-alert red"></i>{{::property.name}}</p></span></td>
+                                            <td><div><p class="red" ng-repeat="property in relation.properties"><i class="icon icon-alert red"></i>{{::property.name}}</p></div></td>
                                         </tr>
                                     </tbody>
                                 </table>