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

Fixes: U4-7446 Grid - Confirm dialog on delete row/cell

Browse Source
This commit is contained in:
Mads Rasmussen
2015-11-25 09:24:19 +01:00
parent 776a9bc8e2
commit 5797c65a1d
13 changed files with 255 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js Normal file
View File

@@ -0,0 +1,39 @@
(function() {
'use strict';
function ConfirmAction() {
function link(scope, el, attr, ctrl) {
scope.clickConfirm = function() {
if(scope.onConfirm) {
scope.onConfirm();
}
};
scope.clickCancel = function() {
if(scope.onCancel) {
scope.onCancel();
}
};
}
var directive = {
restrict: 'E',
replace: true,
templateUrl: 'views/components/umb-confirm-action.html',
scope: {
direction: "@",
onConfirm: "&",
onCancel: "&"
},
link: link
};
return directive;
}
angular.module('umbraco.directives').directive('umbConfirmAction', ConfirmAction);
})();

35
src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmdelete.directive.js
View File

@@ -1,35 +0,0 @@
(function() {
'use strict';
function ConfirmDelete() {
function link(scope, el, attr, ctrl) {
scope.confirmOverlayOpen = false;
scope.toggleOverlay = function() {
scope.confirmOverlayOpen = !scope.confirmOverlayOpen;
};
scope.closeOverlay = function() {
scope.confirmOverlayOpen = false;
};
}
var directive = {
restrict: 'E',
replace: true,
templateUrl: 'views/components/umb-confirm-delete.html',
scope: {
confirmAction: "&"
},
link: link
};
return directive;
}
angular.module('umbraco.directives').directive('umbConfirmDelete', ConfirmDelete);
})();

14
src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
View File

@@ -157,6 +157,16 @@
}
/* ---------- DELETE PROMT ---------- */
scope.togglePrompt = function (object) {
object.deletePrompt = !object.deletePrompt;
};
scope.hidePrompt = function (object) {
object.deletePrompt = false;
};
/* ---------- TOOLBAR ---------- */
scope.toggleSortingMode = function(tool) {
@@ -404,13 +414,13 @@
}
};
scope.deleteProperty = function(tab, propertyIndex, group) {
scope.deleteProperty = function(tab, propertyIndex) {
// remove property
tab.properties.splice(propertyIndex, 1);
// if the last property in group is an placeholder - remove add new tab placeholder
if(group.properties.length === 1 && group.properties[0].propertyState === "init") {
if(tab.properties.length === 1 && tab.properties[0].propertyState === "init") {
angular.forEach(scope.model.groups, function(group, index, groups){
if(group.tabState === 'init') {

2
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -91,7 +91,7 @@
@import "components/umb-group-builder.less";
@import "components/umb-list-view.less";
@import "components/umb-table.less";
@import "components/umb-confirm-delete.less";
@import "components/umb-confirm-action.less";
@import "components/umb-keyboard-shortcuts-overview.less";
@import "components/umb-checkbox-list.less";
@import "components/umb-locked-field.less";

130
src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less Normal file
View File

@@ -0,0 +1,130 @@
// OVERLAY
.umb_confirm-action__overlay {
position: absolute;
z-index: 999999;
display: flex;
}
// positions
.umb_confirm-action__overlay.-top {
top: -50px;
right: auto;
bottom: auto;
left: 0;
animation: fadeInUp 0.2s;
flex-direction: column;
.umb_confirm-action__overlay-action {
margin-bottom: 5px;
}
.umb_confirm-action__overlay-action.-confirm {
order: 1;
}
.umb_confirm-action__overlay-action.-cancel {
order: 2;
}
}
.umb_confirm-action__overlay.-right {
top: 0;
right: -50px;
bottom: auto;
left: auto;
animation: fadeInLeft 0.2s;
flex-direction: row;
.umb_confirm-action__overlay-action {
margin-left: 5px;
}
.umb_confirm-action__overlay-action.-confirm {
order: 2;
}
.umb_confirm-action__overlay-action.-cancel {
order: 1;
}
}
.umb_confirm-action__overlay.-bottom {
top: auto;
right: auto;
bottom: -50px;
left: 0;
animation: fadeInDown 0.2s;
flex-direction: column;
.umb_confirm-action__overlay-action {
margin-top: 5px;
}
.umb_confirm-action__overlay-action.-confirm {
order: 2;
}
.umb_confirm-action__overlay-action.-cancel {
order: 1;
}
}
.umb_confirm-action__overlay.-left {
top: 0;
right: auto;
bottom: auto;
left: -50px;
animation: fadeInRight 0.2s;
flex-direction: row;
.umb_confirm-action__overlay-action {
margin-right: 5px;
}
.umb_confirm-action__overlay-action.-confirm {
order: 1;
}
.umb_confirm-action__overlay-action.-cancel {
order: 2;
}
}
// BUTTONS
.umb_confirm-action__overlay-action {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
border-radius: 40px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
font-size: 18px;
}
.umb_confirm-action__overlay-action:hover {
text-decoration: none;
color: #ffffff;
}
// confirm button
.umb_confirm-action__overlay-action.-confirm {
background: #ffffff;
color: @green !important;
}
.umb_confirm-action__overlay-action.-confirm:hover {
color: @green !important;
}
// cancel button
.umb_confirm-action__overlay-action.-cancel {
background: #ffffff;
color: @red !important;
}
.umb_confirm-action__overlay-action.-cancel:hover {
color: @red !important;
}

34
src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-delete.less
View File

@@ -1,34 +0,0 @@
.umb-confirm-delete {
position: relative;
}
.umb_confirm-delete__overlay-action {
position: absolute;
z-index: 999999;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
border-radius: 40px;
animation: fadeInRight 0.2s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.umb_confirm-delete__overlay-action:hover {
text-decoration: none;
color: #ffffff;
}
.umb_confirm-delete__overlay-action.-confirm {
background: @green;
top: 0;
left: -50px;
}
.umb_confirm-delete__overlay-action.-cancel {
background: @red;
top: 0;
left: -25px;
}

6
src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
View File

@@ -252,6 +252,7 @@
.umb-grid .cell-tools-remove {
display: inline-block;
position: relative;
}
.umb-grid .cell-tools-remove .iconBox:hover,
@@ -597,12 +598,15 @@
}
.umb-grid .umb-control-tools {
margin-left: auto;
display: inline-block;
margin-left: 10px;
}
.umb-grid .umb-control-tool {
font-size: 16px;
margin-right: 5px;
position: relative;
cursor: pointer;
}

8
src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
View File

@@ -59,10 +59,12 @@
position: absolute;
top: -30px;
right: 20px;
font-size: 18px;
}
.umb-group-builder__group-remove:hover {
cursor: pointer;
color: @blueDark;
}
.umb-group-builder__group-title-wrapper {
@@ -312,6 +314,12 @@ input.umb-group-builder__group-sort-value {
margin: 0 0 10px 0;
display: block;
font-size: 18px;
position: relative;
cursor: pointer;
}
.umb-group-builder__property-action:hover {
color: @blueDark;
}
.umb-group-builder__property-inherited-label {

16
src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html Normal file
View File

@@ -0,0 +1,16 @@
<div class="umb_confirm-action__overlay"
ng-class="{
'-top': direction === 'top',
'-right': direction === 'right',
'-bottom': direction === 'bottom',
'-left': direction === 'left'}"
on-outside-click="clickCancel()">
<a class="umb_confirm-action__overlay-action -confirm" href="" ng-click="clickConfirm()">
<i class="icon-check"></i>
</a>
<a class="umb_confirm-action__overlay-action -cancel" href="" ng-click="clickCancel()">
<i class="icon-delete"></i>
</a>
</div>

19
src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-delete.html
View File

@@ -1,19 +0,0 @@
<div class="umb-confirm-delete">
<a href="" ng-click="toggleOverlay()">
<i class="icon-trash"></i>
</a>
<div ng-if="confirmOverlayOpen" on-outside-click="closeOverlay()">
<a class="umb_confirm-delete__overlay-action -confirm" href="" ng-click="confirmAction()">
<i class="icon-check"></i>
</a>
<a class="umb_confirm-delete__overlay-action -cancel" href="" ng-click="closeOverlay()">
<i class="icon-delete"></i>
</a>
</div>
</div>

22
src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
View File

@@ -24,7 +24,13 @@
<div class="umb-group-builder__group" ng-if="tab.tabState !== 'init'" ng-class="{'-active':tab.tabState=='active', '-inherited': tab.inherited, 'umb-group-builder__group-handle -sortable': sortingMode && !tab.inherited}" ng-click="activateGroup(tab)">
<div class="umb-group-builder__group-remove" ng-if="!sortingMode && tab.properties.length <= 1 && model.groups.length > 1">
<umb-confirm-delete confirm-action="removeGroup($index)"></umbraco-confirm-delete>
<i class="icon-trash" ng-click="togglePrompt(tab)"></i>
<umb-confirm-action
ng-if="tab.deletePrompt"
direction="left"
on-confirm="removeGroup($index)"
on-cancel="hidePrompt(tab)">
</umb-confirm-action>
</div>
<div class="umb-group-builder__group-title-wrapper">
@@ -97,7 +103,7 @@
<ng-form name="propertyTypeForm">
<div class="control-group -no-margin" ng-if="!sortingMode">
<div class="umb-group-builder__property-meta-alias" ng-if="property.inherited">{{ property.alias }}</div>
<umb-locked-field ng-if="!property.inherited"
locked="locked"
@@ -146,17 +152,23 @@
</div>
<!-- row tools -->
<div tabindex="-1" class="umb-group-builder__property-actions" ng-if="!sortingMode">
<div class="umb-group-builder__property-actions" ng-if="!sortingMode">
<div ng-if="!property.inherited">
<!-- delete property -->
<div class="umb-group-builder__property-action">
<umb-confirm-delete confirm-action="deleteProperty(tab, $index, tab)"></umbraco-confirm-delete>
<i class="icon-trash" ng-click="togglePrompt(property)"></i>
<umb-confirm-action
ng-if="property.deletePrompt"
direction="left"
on-confirm="deleteProperty(tab, $index)"
on-cancel="hidePrompt(property)">
</umb-confirm-action>
</div>
<!-- settings for property -->
<a href="" class="umb-group-builder__property-action" ng-click="editPropertyTypeSettings(property, tab)">
<div class="umb-group-builder__property-action" ng-click="editPropertyTypeSettings(property, tab)">
<i class="icon icon-settings"></i>
</a>

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

@@ -473,8 +473,12 @@ angular.module("umbraco")
e.stopPropagation();
};
$scope.showPrompt = function (scopedObject) {
scopedObject.deletePrompt = true;
$scope.togglePrompt = function (scopedObject) {
scopedObject.deletePrompt = !scopedObject.deletePrompt;
};
$scope.hidePrompt = function (scopedObject) {
scopedObject.deletePrompt = false;
};
$scope.toggleAddRow = function() {

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

@@ -67,30 +67,6 @@
<!-- Row tool -->
<div class="row-tools" ng-show="currentRow === row">
<!-- delete row -->
<div class="cell-tools-remove">
<div ng-click="showPrompt(row)"
ng-mouseover="setWarnighlightRow(row)"
ng-mouseleave="disableWarnhighlightRow(row)">
<span class="prompt" ng-if="row.deletePrompt">
<localize key="general_areyousure" />
<a href ng-click="removeRow(section, $index)"><localize key="general_yes" /></a>
<a href ng-click="clearPrompt(row, $event)"><localize key="general_no" /></a>
</span>
<i ng-if="!row.deletePrompt" class="icon icon-trash" title="@general_delete" localize="title"></i>
</div>
</div>
<!-- <div class="cell-tools-move">
<div ng-mouseover="setInfohighlightRow(row)"
ng-mouseleave="disableInfohighlightRow(row)"
href>
<i class="icon icon-navigation" title="@general_move" localize="title"></i>
</div>
</div> -->
<div class="cell-tools-edit" ng-if="hasSettings">
<a ng-mouseover="setInfohighlightRow(row)"
ng-mouseleave="disableInfohighlightRow(row)"
@@ -100,6 +76,16 @@
</a>
</div>
<div class="cell-tools-remove">
<i class="icon-trash" ng-click="togglePrompt(row)"></i>
<umb-confirm-action
ng-if="row.deletePrompt"
direction="right"
on-confirm="removeRow(section, $index)"
on-cancel="hidePrompt(row)">
</umb-confirm-action>
</div>
</div>
</div>
@@ -167,16 +153,21 @@
<div class="umb-control-bar">
<div class="umb-control-title" ng-if="currentControl == control">
<!-- <div class="umb-control-tool">
<i class="umb-control-tool-icon icon-navigation"></i>
</div> -->
{{control.editor.name}}
</div>
<div class="umb-control-tools" ng-if="currentControl == control">
<div class="umb-control-tool" ng-click="removeControl(area, $index)">
<i class="umb-control-tool-icon icon-trash"></i>
</div>
<div class="umb-control-tool">
<i class="umb-control-tool-icon icon-trash" ng-click="togglePrompt(control)"></i>
<umb-confirm-action
ng-if="control.deletePrompt"
direction="right"
on-confirm="removeControl(area, $index)"
on-cancel="hidePrompt(control)">
</umb-confirm-action>
</div>
</div>
</div>