yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* Replace icon in date picker with <umb-icon> component

* Adjust height of clear button
This commit is contained in:
Bjarne Fyrstenborg
2021-03-23 03:06:44 +01:00
committed by GitHub
parent 95bf10e11b
commit ebd504e8c1
3 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Umbraco.Web.UI.Client/src/less/forms.less
View File

@@ -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;

17
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

@@ -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;
}

10
src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html
View File

@@ -19,12 +19,12 @@
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>
@@ -32,7 +32,7 @@
</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>