umb-confirmation directive: move trashcan into directive and address accessibility issues (#8198)
This commit is contained in:
Jan Skovgaard
@@ -14,10 +14,10 @@ The prompt can be opened in four direction up, down, left or right.</p>
|
||||
<div ng-controller="My.Controller as vm">
|
||||
|
||||
<div class="my-action" style="position:relative;">
|
||||
<i class="icon-trash" ng-click="vm.showPrompt()"></i>
|
||||
<umb-confirm-action
|
||||
ng-if="vm.promptIsVisible"
|
||||
show="vm.promptIsVisible"
|
||||
direction="left"
|
||||
on-delete="vm.showPrompt()"
|
||||
on-confirm="vm.confirmAction()"
|
||||
on-cancel="vm.hidePrompt()">
|
||||
</umb-confirm-action>
|
||||
@@ -71,17 +71,23 @@ The prompt can be opened in four direction up, down, left or right.</p>
|
||||
|
||||
function link(scope, el, attr, ctrl) {
|
||||
|
||||
scope.clickConfirm = function() {
|
||||
if(scope.onConfirm) {
|
||||
scope.onConfirm();
|
||||
}
|
||||
};
|
||||
scope.clickButton = function (event) {
|
||||
if(scope.onDelete) {
|
||||
scope.onDelete({$event: event});
|
||||
}
|
||||
}
|
||||
|
||||
scope.clickCancel = function() {
|
||||
if(scope.onCancel) {
|
||||
scope.onCancel();
|
||||
}
|
||||
};
|
||||
scope.clickConfirm = function() {
|
||||
if(scope.onConfirm) {
|
||||
scope.onConfirm();
|
||||
}
|
||||
};
|
||||
|
||||
scope.clickCancel = function() {
|
||||
if(scope.onCancel) {
|
||||
scope.onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
@@ -91,6 +97,8 @@ The prompt can be opened in four direction up, down, left or right.</p>
|
||||
templateUrl: 'views/components/umb-confirm-action.html',
|
||||
scope: {
|
||||
direction: "@",
|
||||
show: "<",
|
||||
onDelete: "&?",
|
||||
onConfirm: "&",
|
||||
onCancel: "&"
|
||||
},
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
//WRAPPER
|
||||
.umb_confirm-action {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// OVERLAY
|
||||
.umb_confirm-action__overlay {
|
||||
position: absolute;
|
||||
|
||||
@@ -11,10 +11,9 @@
|
||||
<span ng-repeat="tag in vm.viewModel track by $index" class="label label-primary tag" ng-keyup="vm.onKeyUpOnTag(tag, $event)" tabindex="0">
|
||||
<span ng-bind-html="tag"></span>
|
||||
|
||||
<i class="icon-trash" ng-click="vm.showPrompt($index, tag)" localize="title" title="@buttons_deleteTag"></i>
|
||||
|
||||
<umb-confirm-action ng-if="vm.promptIsVisible === $index"
|
||||
<umb-confirm-action show="vm.promptIsVisible === $index"
|
||||
direction="left"
|
||||
on-delete="vm.showPrompt($index, tag)"
|
||||
on-confirm="vm.removeTag(tag)"
|
||||
on-cancel="vm.hidePrompt()">
|
||||
</umb-confirm-action>
|
||||
|
||||
@@ -1,22 +1,29 @@
|
||||
<div class="umb_confirm-action__overlay"
|
||||
ng-class="{
|
||||
'-top': direction === 'top',
|
||||
'-right': direction === 'right',
|
||||
'-bottom': direction === 'bottom',
|
||||
'-left': direction === 'left'}"
|
||||
on-outside-click="clickCancel()">
|
||||
<div class="umb_confirm-action">
|
||||
<button ng-if="onDelete" type="button" class="btn-reset" ng-click="clickButton($event)">
|
||||
<i class="icon-trash" aria-hidden="true"></i>
|
||||
<span class="sr-only">Delete</span>
|
||||
</button>
|
||||
|
||||
<button class="umb_confirm-action__overlay-action -confirm btn-reset" ng-click="clickConfirm()" localize="title" title="@buttons_confirmActionConfirm" type="button">
|
||||
<div class="umb_confirm-action__overlay"
|
||||
ng-class="{
|
||||
'-top': direction === 'top',
|
||||
'-right': direction === 'right',
|
||||
'-bottom': direction === 'bottom',
|
||||
'-left': direction === 'left'}"
|
||||
on-outside-click="clickCancel()" ng-if="show">
|
||||
|
||||
<button type="button" class="umb_confirm-action__overlay-action -confirm btn-reset" ng-click="clickConfirm()" localize="title" title="@buttons_confirmActionConfirm">
|
||||
<i class="icon-check" aria-hidden="true"></i>
|
||||
<span class="sr-only">
|
||||
<localize key="buttons_confirmActionConfirm">Confirm</localize>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button class="umb_confirm-action__overlay-action -cancel btn-reset" ng-click="clickCancel()" localize="title" title="@buttons_confirmActionCancel" type="button">
|
||||
<button type="button" class="umb_confirm-action__overlay-action -cancel btn-reset" ng-click="clickCancel()" localize="title" title="@buttons_confirmActionCancel">
|
||||
<i class="icon-delete" aria-hidden="true"></i>
|
||||
<span class="sr-only">
|
||||
<localize key="buttons_confirmActionCancel">Cancel</localize>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -101,10 +101,10 @@
|
||||
</ng-form>
|
||||
|
||||
<div class="umb-group-builder__group-remove" ng-if="!sortingMode && canRemoveGroup(tab)">
|
||||
<i class="icon-trash" ng-click="togglePrompt(tab)"></i>
|
||||
<umb-confirm-action
|
||||
ng-if="tab.deletePrompt"
|
||||
show="tab.deletePrompt"
|
||||
direction="left"
|
||||
on-delete="togglePrompt(tab)"
|
||||
on-confirm="removeGroup($index)"
|
||||
on-cancel="hidePrompt(tab)">
|
||||
</umb-confirm-action>
|
||||
@@ -264,10 +264,10 @@
|
||||
|
||||
<!-- delete property -->
|
||||
<div ng-if="!property.locked" class="umb-group-builder__property-action">
|
||||
<button aria-label="Delete property" class="icon-trash" ng-click="togglePrompt(property)"></button>
|
||||
<umb-confirm-action
|
||||
ng-if="property.deletePrompt"
|
||||
show="property.deletePrompt"
|
||||
direction="left"
|
||||
on-delete="togglePrompt(property)"
|
||||
on-confirm="deleteProperty(tab, $index)"
|
||||
on-cancel="hidePrompt(property)">
|
||||
</umb-confirm-action>
|
||||
|
||||
@@ -95,10 +95,10 @@
|
||||
</div>
|
||||
|
||||
<div class="cell-tools-remove row-tool">
|
||||
<button class="icon-trash btn-reset" ng-click="togglePrompt(row)" type="button"></button>
|
||||
<umb-confirm-action
|
||||
ng-if="row.deletePrompt"
|
||||
show="row.deletePrompt"
|
||||
direction="left"
|
||||
on-delete="togglePrompt(row)"
|
||||
on-confirm="removeRow(section, $index)"
|
||||
on-cancel="hidePrompt(row)">
|
||||
</umb-confirm-action>
|
||||
@@ -205,9 +205,9 @@
|
||||
</div>
|
||||
|
||||
<div class="umb-control-tool">
|
||||
<button class="umb-control-tool-icon icon-trash btn-reset" ng-click="togglePrompt(control)" type="button"></button>
|
||||
<umb-confirm-action ng-if="control.deletePrompt"
|
||||
<umb-confirm-action show="control.deletePrompt"
|
||||
direction="left"
|
||||
on-delete="togglePrompt(control)"
|
||||
on-confirm="removeControl(area, $index)"
|
||||
on-cancel="hidePrompt(control)">
|
||||
</umb-confirm-action>
|
||||
|
||||
@@ -30,20 +30,18 @@
|
||||
<input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.path" placeholder="Layout path..." class="-full-width-input" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected"></umb-checkbox>
|
||||
|
||||
<div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">
|
||||
<button type="button" class="btn-icon" ng-click="vm.showPrompt(layout)" aria-label="Remove">
|
||||
<i class="icon-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
<umb-confirm-action ng-if="layout.deletePrompt"
|
||||
direction="left"
|
||||
on-confirm="vm.removeLayout($index, layout)"
|
||||
on-cancel="vm.hidePrompt(layout)">
|
||||
</umb-confirm-action>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected" />
|
||||
<div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">
|
||||
<umb-confirm-action
|
||||
show="layout.deletePrompt"
|
||||
direction="left"
|
||||
on-delete="vm.showPrompt(layout)"
|
||||
on-confirm="vm.removeLayout($index, layout)"
|
||||
on-cancel="vm.hidePrompt(layout)">
|
||||
</umb-confirm-action>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -10,15 +10,12 @@
|
||||
|
||||
<div class="icon-wrapper">
|
||||
<i class="icon icon-navigation handle" localize="title" title="@general_move"></i>
|
||||
|
||||
|
||||
<div class="umb-multiple-textbox__confirm" ng-show="model.value.length > model.config.min">
|
||||
<button type="button" class="umb-multiple-textbox__confirm-action" ng-click="showPrompt($index, item)" localize="title" title="@content_removeTextBox">
|
||||
<i class="icon-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<umb-confirm-action
|
||||
ng-if="promptIsVisible === $index"
|
||||
show="promptIsVisible === $index"
|
||||
direction="left"
|
||||
on-delete="showPrompt($index, item)"
|
||||
on-confirm="remove($index)"
|
||||
on-cancel="hidePrompt()">
|
||||
</umb-confirm-action>
|
||||
|
||||
Reference in New Issue
Block a user