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

Revert "umb-confirmation directive: move trashcan into directive and address accessibility issues (#8198)"

Browse Source 
This reverts commit 1cd79d81af.

# Conflicts:
#	src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
#	src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
#	src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
This commit is contained in:
Sebastiaan Janssen
2020-10-13 15:36:39 +02:00
parent 9a5e0940f8
commit f9b49fc5f3
8 changed files with 64 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js
View File

@@ -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>
@@ -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();
}
};
}
@@ -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: "&"
},

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

5
src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html
View File

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

31
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
src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
View File

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

8
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
View File

@@ -100,10 +100,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>
@@ -215,9 +215,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>

42
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
View File

@@ -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>
@@ -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
src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
View File

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