Skip to content

Commit

Permalink
umb-confirmation directive: move trashcan into directive and address …
Browse files Browse the repository at this point in the history 
…accessibility issues (#8198)
  • Loading branch information
@BatJan
BatJan authored Jul 23, 2020
1 parent ad29e62 commit 1cd79d8
Show file tree
Hide file tree
Showing 8 changed files with 66 additions and 52 deletions.
32 changes: 20 additions & 12 deletions src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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();
}
};

}

Expand All @@ -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: "&"
},
Expand Down
5 changes: 5 additions & 0 deletions src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
//WRAPPER
.umb_confirm-action {
display: inline-block;
}

// OVERLAY
.umb_confirm-action__overlay {
position: absolute;
Expand Down
5 changes: 2 additions & 3 deletions src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
25 changes: 16 additions & 9 deletions src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
View file
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 4 additions & 4 deletions src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
26 changes: 12 additions & 14 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
9 changes: 3 additions & 6 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 1cd79d8

Please sign in to comment.