From a6fcaecd9cfd126e4ce2089b15236e8940a9eb2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Fri, 10 Jan 2020 14:57:43 +0100
Subject: [PATCH] correcting presentation and styling of picked data type

---
 .../less/components/umb-group-builder.less    | 42 ++++++++++++++-----
 .../datatypepicker/datatypepicker.html        |  2 +-
 .../propertysettings/propertysettings.html    | 33 ++++++++-------
 src/Umbraco.Web.UI/Umbraco/config/lang/da.xml |  3 +-
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  1 +
 .../Umbraco/config/lang/en_us.xml             |  1 +
 6 files changed, 55 insertions(+), 27 deletions(-)

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 f9d8772d45..b4c756e422 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
@@ -501,27 +501,41 @@ input.umb-group-builder__group-sort-value {
         }
     }
 
-    .editor {
+    .editor-wrapper {
         margin-bottom: 10px;
 
+        .editor {
+            display: flex;
+            align-items: center;
+
+            border: 1px solid @gray-10;
+            color: @ui-action-discreet-type;
+            border-radius: @baseBorderRadius;
+
+            box-shadow: 0 2px 5px 0 rgba(0,0,0,.12);
+        }
+
+        .editor-info {
+            flex: 1 0 auto;
+            text-align: left;
+            display: flex;
+            align-items: center;
+        }
+
         .editor-icon-wrapper {
-            border: 1px solid @gray-8;
             width: 60px;
             height: 60px;
             text-align: center;
             line-height: 60px;
-            border-radius: 5px;
-            float: left;
-            margin-right: 20px;
+            flex: 0 0 60px;
 
             .icon {
-                font-size: 26px;
+                font-size: 32px;
             }
         }
-
+        
         .editor-details {
-            float: left;
-            margin-top: 10px;
+            flex: 0 0 auto;
 
             .editor-name {
                 display: block;
@@ -534,9 +548,15 @@ input.umb-group-builder__group-sort-value {
             }
         }
 
-        .editor-settings-icon {
+        .editor-remove-icon {
+            flex: 0 0 48px;
+            width: 48px;
+            height: 100%;
             font-size: 18px;
-            margin-top: 8px;
+            color: @ui-action-type;
+            &:hover {
+                color: @ui-action-type-hover;
+            }
         }
     }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
index 957e03b64d..b31a396c2d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
@@ -24,7 +24,7 @@
                                     ng-model="vm.searchTerm"
                                     class="umb-search-field search-query search-input input-block-level"
                                     localize="placeholder"
-                                    placeholder="@placeholders_filter"
+                                    placeholder="@placeholders_search"
                                     umb-auto-focus
                                     no-dirty-check />
                         </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.html
index ef55c93217..d0010b3977 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.html
@@ -41,7 +41,7 @@
                             </div>
                         </div>
 
-                        <div class="umb-control-group control-group">
+                        <div class="umb-control-group control-group -no-border">
                             <textarea data-element="property-description"
                                     class="editor-description"
                                     ng-model="model.property.description"
@@ -63,21 +63,26 @@
 
                             <div class="editor clearfix" ng-if="model.property.editor">
 
-                                <a href="" class="editor-icon-wrapper" ng-click="vm.openDataTypePicker(model.property)">
-                                    <i class="icon {{ model.property.dataTypeIcon }}" ng-class="{'icon-autofill': model.property.dataTypeIcon == null}"></i>
-                                </a>
+                                <button class="btn-reset editor-info" ng-click="vm.openDataTypeSettings(model.property)">
+                                    <div class="editor-icon-wrapper">
+                                        <i class="icon {{ model.property.dataTypeIcon }}" ng-class="{'icon-autofill': model.property.dataTypeIcon == null}"></i>
+                                    </div>
 
-                                <div class="editor-details">
-                                    <a href="" class="editor-name" ng-click="vm.openDataTypePicker(model.property)">{{ model.property.dataTypeName }}</a>
-                                    <a href="" class="editor-editor" ng-click="vm.openDataTypePicker(model.property)">{{ model.property.editor }}</a>
-                                </div>
+                                    <div class="editor-details">
+                                        <span class="editor-name">{{ model.property.dataTypeName }}</span>
+                                        <span class="editor-editor">{{ model.property.editor }}</span>
+                                    </div>
 
-                                <a href class="editor-settings-icon pull-right"
-                                ng-click="vm.openDataTypeSettings(model.property)"
-                                hotkey="alt+shift+d"
-                                ng-if="model.property.editor">
-                                    <i class="icon icon-settings"></i>
-                                </a>
+                                </button>
+
+                                <button class="editor-remove-icon btn-reset pull-right"
+                                    ng-click="vm.openDataTypePicker(model.property)"
+                                    hotkey="alt+shift+d"
+                                    localize="title"
+                                    title="@actions_changeDataType"
+                                >
+                                    <i class="icon icon-wrong"></i>
+                                </button>
 
                             </div>
 
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
index 804ecf1894..fbfaccc768 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -8,7 +8,8 @@
     <key alias="assignDomain">Tilføj domæne</key>
     <key alias="auditTrail">Revisionsspor</key>
     <key alias="browse">Gennemse elementer</key>
-    <key alias="changeDocType">Skift dokumenttype</key>
+    <key alias="changeDocType">Skift Dokument Type</key>
+    <key alias="changeDataType">Skift Input Type</key>
     <key alias="copy">Kopier</key>
     <key alias="create">Opret</key>
     <key alias="export">Eksportér</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 357192b578..878427bdde 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -9,6 +9,7 @@
     <key alias="auditTrail">Audit Trail</key>
     <key alias="browse">Browse Node</key>
     <key alias="changeDocType">Change Document Type</key>
+    <key alias="changeDataType">Change Data Type</key>
     <key alias="copy">Copy</key>
     <key alias="create">Create</key>
     <key alias="export">Export</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index e3545ccc36..5e0bcdf35a 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -9,6 +9,7 @@
     <key alias="auditTrail">Audit Trail</key>
     <key alias="browse">Browse Node</key>
     <key alias="changeDocType">Change Document Type</key>
+    <key alias="changeDataType">Change Data Type</key>
     <key alias="copy">Copy</key>
     <key alias="create">Create</key>
     <key alias="export">Export</key>