Skip to content

Commit

Permalink
Revert "Revert "Revert "umb-confirmation directive: move trashcan int…
Browse files Browse the repository at this point in the history 
…o directive and address accessibility issues (#8198)"""

This reverts commit c903a01.
  • Loading branch information
@nul800sebastiaan
nul800sebastiaan committed Oct 22, 2020
1 parent f3af025 commit 81cbe36
Show file tree
Hide file tree
Showing 8 changed files with 64 additions and 78 deletions.
32 changes: 12 additions & 20 deletions src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js
View file
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
show="vm.promptIsVisible"
ng-if="vm.promptIsVisible"
direction="left"
on-delete="vm.showPrompt()"
on-confirm="vm.confirmAction()"
on-cancel="vm.hidePrompt()">
</umb-confirm-action>
Expand Down Expand Up @@ -71,23 +71,17 @@ The prompt can be opened in four direction up, down, left or right.</p>

function link(scope, el, attr, ctrl) {

scope.clickButton = function (event) {
if(scope.onDelete) {
scope.onDelete({$event: event});
}
}
scope.clickConfirm = function() {
if(scope.onConfirm) {
scope.onConfirm();
}
};

scope.clickConfirm = function() {
if(scope.onConfirm) {
scope.onConfirm();
}
};

scope.clickCancel = function() {
if(scope.onCancel) {
scope.onCancel();
}
};
scope.clickCancel = function() {
if(scope.onCancel) {
scope.onCancel();
}
};

}

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

// OVERLAY
.umb_confirm-action__overlay {
position: absolute;
Expand Down
5 changes: 3 additions & 2 deletions src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html
View file
Expand Up @@ -12,9 +12,10 @@
<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>

<umb-confirm-action show="vm.promptIsVisible === $index"
<i class="icon-trash" ng-click="vm.showPrompt($index, tag)" localize="title" title="@buttons_deleteTag"></i>

<umb-confirm-action ng-if="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
31 changes: 11 additions & 20 deletions src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
View file
@@ -1,31 +1,22 @@
<div class="umb_confirm-action">
<button ng-if="onDelete" type="button" class="btn-icon" ng-click="clickButton($event)" localize="title" title="@general_delete">
<umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
<span class="sr-only">
<localize key="general_delete">Delete</localize>
</span>
</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()">

<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="btn-reset umb_confirm-action__overlay-action -confirm" ng-click="clickConfirm()" localize="title" title="@buttons_confirmActionConfirm">
<umb-icon icon="icon-check" class="icon-check"></umb-icon>
<button class="umb_confirm-action__overlay-action -confirm btn-reset" ng-click="clickConfirm()" localize="title" title="@buttons_confirmActionConfirm" type="button">
<i class="icon-check" aria-hidden="true"></i>
<span class="sr-only">
<localize key="buttons_confirmActionConfirm">Confirm</localize>
</span>
</button>

<button type="button" class="btn-reset umb_confirm-action__overlay-action -cancel" ng-click="clickCancel()" localize="title" title="@buttons_confirmActionCancel">
<umb-icon icon="icon-delete" class="icon-delete"></umb-icon>
<button class="umb_confirm-action__overlay-action -cancel btn-reset" ng-click="clickCancel()" localize="title" title="@buttons_confirmActionCancel" type="button">
<i class="icon-delete" aria-hidden="true"></i>
<span class="sr-only">
<localize key="buttons_confirmActionCancel">Cancel</localize>
</span>
</button>
</div>
</div>
10 changes: 6 additions & 4 deletions src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
View file
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
show="tab.deletePrompt"
ng-if="tab.deletePrompt"
direction="left"
on-delete="togglePrompt(tab)"
on-confirm="removeGroup($index)"
on-cancel="hidePrompt(tab)">
</umb-confirm-action>
Expand Down Expand Up @@ -266,10 +266,12 @@

<!-- delete property -->
<div ng-if="!property.locked" class="umb-group-builder__property-action">
<button aria-label="Delete property" class="btn-icon" ng-click="togglePrompt(property)">
<umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
</button>
<umb-confirm-action
show="property.deletePrompt"
ng-if="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
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
show="row.deletePrompt"
ng-if="row.deletePrompt"
direction="left"
on-delete="togglePrompt(row)"
on-confirm="removeRow(section, $index)"
on-cancel="hidePrompt(row)">
</umb-confirm-action>
Expand Down Expand Up @@ -209,9 +209,9 @@
</div>

<div class="umb-control-tool">
<umb-confirm-action show="control.deletePrompt"
<button class="umb-control-tool-icon icon-trash btn-reset" ng-click="togglePrompt(control)" type="button"></button>
<umb-confirm-action ng-if="control.deletePrompt"
direction="left"
on-delete="togglePrompt(control)"
on-confirm="removeControl(area, $index)"
on-cancel="hidePrompt(control)">
</umb-confirm-action>
Expand Down
42 changes: 22 additions & 20 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
View file
Expand Up @@ -2,9 +2,9 @@

<div class="list-view-layouts-container">

<div class="list-view-layouts" ui-sortable="vm.layoutsSortableOptions" ng-model="model.value">
<div class="list-view-layouts" ui-sortable="vm.layoutsSortableOptions" ng-model="model.value">

<div class="list-view-layout" ng-repeat="layout in model.value">
<div class="list-view-layout" ng-repeat="layout in model.value">

<i class="icon-navigation list-view-layout__sort-handle" aria-hidden="true" aria-label="Sort"></i>

Expand All @@ -14,43 +14,45 @@
<span class="list-view-layout__icon">
<i class="{{layout.icon}}" aria-hidden="true"></i>
</span>
</button>
</button>

<div ng-if="layout.isSystem === 1" class="list-view-layout__icon">
<div ng-if="layout.isSystem === 1" class="list-view-layout__icon">
<i class="{{layout.icon}}" aria-hidden="true"></i>
</div>
</div>

</div>
</div>

<div class="list-view-layout__name">
<input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.name" placeholder="Name..." class="-full-width-input" focus-when="{{ vm.focusLayoutName }}" />
<span ng-if="layout.isSystem === 1" class="list-view-layout__name-text">{{ layout.name }}</span>
<span ng-if="layout.isSystem === 1" class="list-view-layout__system">(system layout)</span>
</div>
<div class="list-view-layout__name">
<input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.name" placeholder="Name..." class="-full-width-input" focus-when="{{ vm.focusLayoutName }}" />
<span ng-if="layout.isSystem === 1" class="list-view-layout__name-text">{{layout.name}}</span>
<span ng-if="layout.isSystem === 1" class="list-view-layout__system">(system layout)</span>
</div>

<div class="list-view-layout__path">
<input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.path" placeholder="Layout path..." class="-full-width-input" />
</div>
<div class="list-view-layout__path">
<input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.path" placeholder="Layout path..." class="-full-width-input" />
</div>

<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">
<umb-confirm-action show="layout.deletePrompt"
<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-delete="vm.showPrompt(layout)"
on-confirm="vm.removeLayout($index, layout)"
on-cancel="vm.hidePrompt(layout)">
</umb-confirm-action>
</div>
</div>
</div>

</div>
</div>

</div>

<button type="button" class="list-view-add-layout mt2" ng-click="vm.addLayout()">Add layout</button>

</div>
</div>

</div>
9 changes: 6 additions & 3 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
View file
Expand Up @@ -10,12 +10,15 @@

<div class="icon-wrapper">
<i class="icon icon-navigation handle" aria-hidden="true" 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
show="promptIsVisible === $index"
ng-if="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 81cbe36

Please sign in to comment.