Use button elements in schedule overlay (#8640)
* Replace anchor elements with button elements * Apply styling to button element * Reset default button style * Add missing type attributes * Add aria-hidden attribute * Move type attribute for readability
This commit is contained in:
Bjarne Fyrstenborg
committed by
GitHub
GitHub
parent
5d93d8e874
commit
ea40cea420
@@ -16,8 +16,8 @@
|
||||
border-left: 1px solid @gray-10;
|
||||
}
|
||||
|
||||
.date-wrapper__date .flatpickr-input > a {
|
||||
|
||||
.date-wrapper__date .flatpickr-input > a,
|
||||
.date-wrapper__date .flatpickr-input > button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -25,16 +25,15 @@
|
||||
padding: 4px 15px;
|
||||
box-sizing: border-box;
|
||||
min-width: 200px;
|
||||
|
||||
color: @ui-action-discreet-type;
|
||||
border: 1px dashed @ui-action-discreet-border;
|
||||
border-radius: 3px;
|
||||
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
color: @ui-action-discreet-type-hover;
|
||||
border-color: @ui-action-discreet-border-hover;
|
||||
|
||||
|
||||
localize {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="datepicker" style="position: relative;">
|
||||
|
||||
<div ng-hide="hasTranscludedContent" class="input-append date">
|
||||
<input data-format="{{ options.format }}" type="text" class="datepickerinput" />
|
||||
<span class="add-on">
|
||||
<input type="text" data-format="{{ options.format }}" class="datepickerinput" />
|
||||
<span class="add-on" aria-hidden="true">
|
||||
<i class="icon-calendar"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="js-datePicker__transcluded-content" ng-transclude></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,25 +23,26 @@
|
||||
on-close="vm.datePickerClose(vm.variants[0], 'publish')">
|
||||
|
||||
<div>
|
||||
<button ng-show="vm.variants[0].releaseDate" class="btn umb-button--xs" style="outline: none;">
|
||||
<button type="button" ng-show="vm.variants[0].releaseDate" class="btn btn-reset umb-button--xs" style="outline: none;">
|
||||
{{vm.variants[0].releaseDateFormatted}}
|
||||
</button>
|
||||
|
||||
<a ng-hide="vm.variants[0].releaseDate" href="">
|
||||
<button type="button" class="btn-reset" ng-hide="vm.variants[0].releaseDate">
|
||||
<localize key="content_setDate">Set date</localize>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</umb-date-time-picker>
|
||||
|
||||
<a ng-show="vm.variants[0].releaseDate" ng-click="vm.clearPublishDate(vm.variants[0])" class="btn umb-button--xs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
|
||||
<button type="button" ng-show="vm.variants[0].releaseDate" ng-click="vm.clearPublishDate(vm.variants[0])" class="btn btn-reset umb-button--xs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
|
||||
<umb-icon icon="icon-wrong" class="icon icon-wrong"></umb-icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="date-wrapper__date">
|
||||
|
||||
<label class="bold">
|
||||
<localize key="content_unpublishDate"></localize>
|
||||
</label>
|
||||
@@ -55,20 +56,20 @@
|
||||
on-close="vm.datePickerClose(vm.variants[0], 'unpublish')">
|
||||
|
||||
<div>
|
||||
<button ng-show="vm.variants[0].expireDate" class="btn umb-button--xs" style="outline: none;">
|
||||
<button type="button" ng-show="vm.variants[0].expireDate" class="btn btn-reset umb-button--xs" style="outline: none;">
|
||||
{{vm.variants[0].expireDateFormatted}}
|
||||
</button>
|
||||
|
||||
<a ng-hide="vm.variants[0].expireDate" href="">
|
||||
<button type="button" class="btn-reset" ng-hide="vm.variants[0].expireDate">
|
||||
<localize key="content_setDate">Set date</localize>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</umb-date-time-picker>
|
||||
|
||||
<a ng-show="vm.variants[0].expireDate" ng-click="vm.clearUnpublishDate(vm.variants[0])" class="btn umb-button--xs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
|
||||
<button type="button" ng-show="vm.variants[0].expireDate" ng-click="vm.clearUnpublishDate(vm.variants[0])" class="btn btn-reset umb-button--xs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
|
||||
<umb-icon icon="icon-wrong" class="icon icon-wrong"></umb-icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -125,16 +126,16 @@
|
||||
on-open="vm.datePickerShow(variant, 'publish')"
|
||||
on-close="vm.datePickerClose(variant, 'publish')">
|
||||
<div>
|
||||
<button ng-show="variant.releaseDate" class="btn umb-button--xxs btn-outline umb-outline">
|
||||
<button type="button" ng-show="variant.releaseDate" class="btn btn-reset umb-button--xxs btn-outline umb-outline">
|
||||
{{variant.releaseDateFormatted}}
|
||||
</button>
|
||||
|
||||
<a ng-hide="variant.releaseDate" href="">
|
||||
<button type="button" class="btn-reset" ng-hide="variant.releaseDate">
|
||||
<localize key="content_setDate">Set date</localize>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</umb-date-time-picker>
|
||||
<button ng-show="variant.releaseDate" ng-click="vm.clearPublishDate(variant)" class="btn umb-button--xxs dropdown-toggle umb-button-group__toggle btn-outline umb-outline" style="margin-left: -2px;">
|
||||
<button type="button" ng-show="variant.releaseDate" ng-click="vm.clearPublishDate(variant)" class="btn umb-button--xxs dropdown-toggle umb-button-group__toggle btn-outline umb-outline" style="margin-left: -2px;">
|
||||
<umb-icon icon="icon-wrong" class="icon icon-wrong"></umb-icon>
|
||||
</button>
|
||||
</div>
|
||||
@@ -151,18 +152,18 @@
|
||||
on-open="vm.datePickerShow(variant, 'unpublish')"
|
||||
on-close="vm.datePickerClose(variant, 'unpublish')">
|
||||
<div>
|
||||
<button ng-show="variant.expireDate" class="btn umb-button--xxs btn-outline umb-outline">
|
||||
<button type="button" ng-show="variant.expireDate" class="btn btm-reset umb-button--xxs btn-outline umb-outline">
|
||||
{{variant.expireDateFormatted}}
|
||||
</button>
|
||||
|
||||
<a ng-hide="variant.expireDate" href="">
|
||||
<button type="button" class="btn-reset" ng-hide="variant.expireDate">
|
||||
<localize key="content_setDate">Set date</localize>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</umb-date-time-picker>
|
||||
<a ng-show="variant.expireDate" ng-click="vm.clearUnpublishDate(variant)" class="btn umb-button--xxs dropdown-toggle umb-button-group__toggle btn-outline umb-outline" style="margin-left: -2px;">
|
||||
<button type="button" ng-show="variant.expireDate" ng-click="vm.clearUnpublishDate(variant)" class="btn btn-reset umb-button--xxs dropdown-toggle umb-button-group__toggle btn-outline umb-outline" style="margin-left: -2px;">
|
||||
<umb-icon icon="icon-wrong" class="icon icon-wrong"></umb-icon>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,15 +11,14 @@
|
||||
on-change="datePickerChange(dateStr)">
|
||||
|
||||
<div class="input-append">
|
||||
<input
|
||||
name="datepicker"
|
||||
id="{{model.alias}}"
|
||||
type="text"
|
||||
ng-model="model.datetimePickerValue"
|
||||
ng-blur="inputChanged()"
|
||||
ng-required="model.validation.mandatory"
|
||||
val-server="value"
|
||||
class="datepickerinput">
|
||||
<input type="text"
|
||||
name="datepicker"
|
||||
id="{{model.alias}}"
|
||||
ng-model="model.datetimePickerValue"
|
||||
ng-blur="inputChanged()"
|
||||
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>
|
||||
<span class="sr-only"><localize key="content_removeDate">Clear date</localize></span>
|
||||
|
||||
Reference in New Issue
Block a user