From 349a46c311fef19fe7a5896b4aa08bb3a2b1a699 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 11 Jun 2020 19:14:46 +0200
Subject: [PATCH] Adjust property editor settings (#8251)

Co-authored-by: Bjarne Fyrstenborg <bf@oerskov-gruppen.lan>
---
 .../less/components/umb-group-builder.less    |  1 -
 .../propertysettings/propertysettings.html    | 26 +++++++------------
 .../macros/infiniteeditors/parameter.html     | 25 ++++++++----------
 3 files changed, 21 insertions(+), 31 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 ac7a2c63ce7a..6eded29b8b1a 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
@@ -527,7 +527,6 @@ input.umb-group-builder__group-sort-value {
         text-align: left;
         display: flex;
         align-items: center;
-        max-width: calc(100% - 48px);
         min-height: 80px;
         color: @ui-action-discreet-type;
 
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 1b28e846076f..af9295f1ede6 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
@@ -54,34 +54,32 @@
 
                         <div class="editor-wrapper umb-control-group control-group" ng-model="model.property.editor" val-require-component ng-if="!model.property.locked">
 
-                            <a data-element="editor-add" href="" ng-if="!model.property.editor" class="editor-placeholder" hotkey="alt+shift+e" ng-click="vm.openDataTypePicker(model.property)">
+                            <button type="button" class="btn-reset editor-placeholder" data-element="editor-add" ng-if="!model.property.editor" hotkey="alt+shift+e" ng-click="vm.openDataTypePicker(model.property)">
                                 <localize key="defaultdialogs_selectEditor"></localize>
                                 <div ng-messages="model.property.editor" show-validation-on-submit>
                                     <span class="umb-validation-label" ng-message="required">Required editor</span>
                                 </div>
-                            </a>
+                            </button>
 
                             <div class="editor clearfix" ng-if="model.property.editor">
 
-                                <button class="btn-reset editor-info" ng-click="vm.openDataTypeSettings(model.property)">
+                                <button type="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>
+                                        <i class="icon {{ model.property.dataTypeIcon }}" ng-class="{'icon-autofill': model.property.dataTypeIcon == null}" aria-hidden="true"></i>
                                     </div>
 
                                     <div class="editor-details">
                                         <span class="editor-name">{{ model.property.dataTypeName }}</span>
                                         <span class="editor-editor">{{ model.property.editor }}</span>
                                     </div>
-
                                 </button>
 
-                                <button class="editor-remove-icon btn-reset pull-right"
+                                <button type="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>
+                                    title="@actions_changeDataType">
+                                    <i class="icon icon-wrong" aria-hidden="true"></i>
                                 </button>
                             </div>
 
@@ -108,8 +106,7 @@ <h5><localize key="validation_validation"></localize></h5>
                                    placeholder="@validation_mandatoryMessage"
                                    ng-model="model.property.validation.mandatoryMessage"
                                    ng-if="model.property.validation.mandatory"
-                                   ng-keypress="vm.submitOnEnter($event)">
-                            </input>
+                                   ng-keypress="vm.submitOnEnter($event)" />
 
                             <label class="mt3">
                                 <localize key="validation_customValidation"></localize>
@@ -144,8 +141,7 @@ <h5><localize key="validation_validation"></localize></h5>
                             <h5><localize key="contentTypeEditor_cultureVariantHeading" /></h5>
                             <umb-toggle data-element="permissions-allow-culture-variant"
                                         checked="model.property.allowCultureVariant"
-                                        on-click="vm.toggleAllowCultureVariants()"
-                            >
+                                        on-click="vm.toggleAllowCultureVariants()">
                             </umb-toggle>
 
                         </div>
@@ -155,8 +151,7 @@ <h5><localize key="contentTypeEditor_segmentVariantHeading" /></h5>
 
                             <umb-toggle data-element="permissions-allow-segment-variant"
                                         checked="model.property.allowSegmentVariant"
-                                        on-click="vm.toggleAllowSegmentVariants()"
-                            >
+                                        on-click="vm.toggleAllowSegmentVariants()">
                             </umb-toggle>
 
                         </div>
@@ -195,7 +190,6 @@ <h5><localize key="general_options"></localize></h5>
                                         on-click="vm.toggleIsSensitiveData()">
                             </umb-toggle>
 
-
                         </div>
                     </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html b/src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html
index 5a18ddf2cb6a..8a915be57b91 100644
--- a/src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html
+++ b/src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html
@@ -41,25 +41,22 @@
                             </div>
                         </div>
 
-                        <a data-element="editor-add" href="" ng-if="!model.parameter.editor" class="editor-placeholder" hotkey="alt+shift+e" ng-click="vm.openMacroParameterPicker(model.parameter)">
+                        <button type="button" class="btn-reset editor-placeholder" data-element="editor-add" ng-if="!model.parameter.editor" hotkey="alt+shift+e" ng-click="vm.openMacroParameterPicker(model.parameter)">
                             <localize key="shortcuts_addEditor"></localize>
-                        </a>
+                        </button>
 
                         <div class="editor clearfix" ng-if="model.parameter.editor">
 
-                            <div class="editor-details">
-                                <button class="btn-reset editor-info" ng-click="vm.openMacroParameterPicker(model.parameter)">
-
-                                    <div class="editor-icon-wrapper">
-                                        <i class="icon {{model.parameter.dataTypeIcon}}" ng-class="{'icon-autofill': model.parameter.dataTypeIcon == null}"></i>
-                                    </div>
+                            <button type="button" class="btn-reset editor-info" ng-click="vm.openMacroParameterPicker(model.parameter)">
+                                <div class="editor-icon-wrapper">
+                                    <i class="icon {{ model.parameter.dataTypeIcon }}" ng-class="{'icon-autofill': model.parameter.dataTypeIcon == null}" aria-hidden="true"></i>
+                                </div>
 
-                                    <div class="editor-details">
-                                        <a href="" class="editor-name">{{model.parameter.dataTypeName}}</a>
-                                        <a href="" class="editor-editor">{{model.parameter.editor}}</a>
-                                    </div>
-                                </button>
-                            </div>
+                                <div class="editor-details">
+                                    <span class="editor-name">{{ model.parameter.dataTypeName }}</span>
+                                    <span class="editor-editor">{{ model.parameter.editor }}</span>
+                                </div>
+                            </button>
 
                         </div>