Replace icon in date picker with umb-icon component (#10040)

* Replace icon in date picker with <umb-icon> component * Adjust height of clear button
umbraco · Mar 23, 2021 · ebd504e · ebd504e
1 parent 95bf10e
commit ebd504e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -582,19 +582,21 @@ table.domains .help-inline {
     }
   }
   .add-on {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: auto;
     height: 22px;
     min-width: 18px;
-    padding: 5px 6px 3px 6px;
+    padding: 4px 6px;
     font-size: @baseFontSize;
     font-weight: normal;
     line-height: @baseLineHeight;
     text-align: center;
-    //text-shadow: 0 1px 0 @white;
     background-color: @white;
     border: 1px solid @inputBorder;
     color: @ui-option-type;
+
     &:hover {
         border-color:@inputBorderFocus;
         color: @ui-option-type-hover;

diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -838,22 +838,25 @@
 //
 // Date/time picker
 // --------------------------------------------------
-.bootstrap-datetimepicker-widget .btn{padding: 0;}
-.bootstrap-datetimepicker-widget .picker-switch .btn{ background: none; border: none;}
-.umb-datepicker .input-append .add-on{cursor: pointer;}
-.umb-datepicker .input-append .on-top {
-    border: 0 none;
+.bootstrap-datetimepicker-widget .btn {padding: 0;}
+.bootstrap-datetimepicker-widget .picker-switch .btn { background: none; border: none;}
+.umb-datepicker .input-append .btn-clear {
+    border: none;
     position: absolute;
     margin-left: -31px;
     margin-top: 1px;
-    display: inline-block;
-    padding: 5px 6px 3px 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 30px;
+    padding: 4px 6px;
     font-size: @baseFontSize;
     font-weight: normal;
     line-height: @baseLineHeight;
     text-align: center;
     background-color: @white;
     color: @ui-option-type;
+
     &:hover {
         color: @ui-option-type-hover;
     }

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html
@@ -19,20 +19,20 @@
                            ng-required="model.validation.mandatory"
                            val-server="value"
                            class="datepickerinput" />
-                    <button type="button" class="on-top" ng-click="clearDate()" ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
-                        <i class="icon-delete" aria-hidden="true"></i>
+                    <button type="button" class="btn-clear" ng-click="clearDate()" ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
+                        <umb-icon icon="icon-delete" class="icon-delete"></umb-icon>
                         <span class="sr-only"><localize key="content_removeDate">Clear date</localize></span>
                     </button>
-                    <span class="add-on" aria-hidden="true">
-                        <i class="icon-{{ datePickerConfig.noCalendar ? 'time' : 'calendar' }}"></i>
+                    <span class="add-on">
+                        <umb-icon icon="icon-{{ datePickerConfig.noCalendar ? 'time' : 'calendar' }}" class="icon-{{ datePickerConfig.noCalendar ? 'time' : 'calendar' }}"></umb-icon>
                     </span>
                 </div>
 
             </umb-date-time-picker>
 
         </div>
 
-        <div ng-messages="datePickerForm.datepicker.$error" show-validation-on-submit >
+        <div ng-messages="datePickerForm.datepicker.$error" show-validation-on-submit>
             <p class="help-inline" ng-message="required">{{mandatoryMessage}}</p>
             <p class="help-inline" ng-message="valServer">{{datePickerForm.datepicker.errorMsg}}</p>
             <p class="help-inline" ng-message="pickerError"><localize key="validation_invalidDate">Invalid date</localize></p>