Implemented the dialog to ask for confirmation when the user ask to delete a card

No keyboard shortcut implemented, yet
This commit is contained in:
Giulio Cesare Solaroli 2014-08-04 18:33:37 +02:00
parent 336f6932b7
commit a362a03cbe
9 changed files with 348 additions and 30 deletions

View File

@ -73,7 +73,8 @@ Clipperz.PM.UI.Components.Cards.Toolbar = React.createClass({
},
selectCommandItem: function (anEvent) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, anEvent.target.dataset['broadcastEvent'], {'reference':this.props['_reference']});
//console.log("SELECT COMMAND ITEM", anEvent.currentTarget.dataset['broadcastEvent'], this.props['_reference']);
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, anEvent.currentTarget.dataset['broadcastEvent'], {'reference':this.props['_reference']});
},
//----------------------------------------------------------------------------
@ -82,7 +83,7 @@ Clipperz.PM.UI.Components.Cards.Toolbar = React.createClass({
var commandHandler = this.selectCommandItem;
return React.DOM.ul({}, MochiKit.Base.map(function (aCommand) {
return React.DOM.li({}, [React.DOM.span({'onClick':commandHandler, 'data-broadcast-event':aCommand['broadcastEvent']}, aCommand['label'])]);
return React.DOM.li({'onClick':commandHandler, 'data-broadcast-event':aCommand['broadcastEvent']}, [React.DOM.span({}, aCommand['label'])]);
}, MochiKit.Base.values(this.commands())));
},

View File

@ -26,25 +26,67 @@ Clipperz.Base.module('Clipperz.PM.UI.Components');
Clipperz.PM.UI.Components.DialogBox = React.createClass({
propTypes: {
'level': React.PropTypes.oneOf(['HIDE', 'INFO', 'WARNING', 'ERROR']).isRequired,
'message': React.PropTypes.string.isRequired,
'info': React.PropTypes.object.isRequired,
'deferred': React.PropTypes.object.isRequired
},
/*
ask: function (someInfo) {
var deferredResult;
deferredResult = new Clipperz.Async.Deferred('DialogBox.ask', {trace:false});
deferredResult.addCallback(someInfo.['possibleAnswers']['cancel']['answer']);
deferredResult.addCallback(someInfo['possibleAnswers']['cancel']['answer']);
deferredResult.callback();
// deferredResult.cancel();
return deferredResult;
},
*/
//-------------------------------------------------------------------------
handleKeyDown: function (anEvent) {
console.log("DIALOG BOX - key DOWN", anEvent);
},
handleKeyPress: function (anEvent) {
console.log("DIALOG BOX - key PRESS", anEvent);
},
handleKeyUp: function (anEvent) {
console.log("DIALOG BOX - key UP", anEvent);
},
//-------------------------------------------------------------------------
handleAnswerButton: function (anEvent) {
//console.log("HANDLE ANSWER BUTTON", anEvent.currentTarget.dataset['answerKey']);
//console.log("ANSWER INFO", this.props['info']['possibleAnswers'][anEvent.currentTarget.dataset['answerKey']]);
//console.log("<-- DEFERRED", this.props['deferred']);
this.props['info']['possibleAnswers'][anEvent.currentTarget.dataset['answerKey']]['answer'](this.props['deferred']);
},
renderAnswerButton: function (anAnswerInfoKey) {
var answerInfo = this.props['info']['possibleAnswers'][anAnswerInfoKey];
var classes = {
'button': true,
'isDefault': answerInfo['isDefault']
};
return React.DOM.div({'className':React.addons.classSet(classes), 'onClick':this.handleAnswerButton, 'data-answer-key':anAnswerInfoKey}, answerInfo['label'])
},
//=========================================================================
render: function () {
return React.DOM.div({className:'messageBox ' + this.props['level']}, this.props['message']);
//console.log("DIALOG BOX", this.props);
//console.log("--> DEFERRED", this.props['deferred']);
return React.DOM.div({'className':'dialogBox', 'onKeyDown':this.handleKeyDown, 'onKeyPress':this.handleKeyPress, 'onKeyUp':this.handleKeyUp}, [
React.DOM.div({'className':'mask'}),
React.DOM.div({'className':'dialog'}, [
React.DOM.h3({'className': 'message'}, this.props['info']['question']),
React.DOM.div({'className': 'answers'}, MochiKit.Base.map(this.renderAnswerButton, MochiKit.Base.keys(this.props['info']['possibleAnswers'])))
])
]);
}
//=========================================================================

View File

@ -54,10 +54,12 @@ Clipperz.PM.UI.Components.Pages.MainPage = React.createClass({
};
classes[this.props['style']] = true;
return React.DOM.div({className:React.addons.classSet(classes)}, [
//console.log("MAIN PAGE", this.props['ask']);
return React.DOM.div({'className':React.addons.classSet(classes)}, [
this.props['style'] != 'extra-wide' ? Clipperz.PM.UI.Components.Panels.SelectionPanel(this.props) : null,
Clipperz.PM.UI.Components.Panels.MainPanel(this.props),
Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanel(this.props)
Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanel(this.props),
this.props['ask'] ? Clipperz.PM.UI.Components.DialogBox(this.props['ask']) : null
]);
}

View File

@ -328,7 +328,7 @@ console.log("THE BROWSER IS OFFLINE");
this.overlay().show("creating user");
this.pages()['registrationPage'].setProps({disabled:true});
deferredResult = new Clipperz.Async.Deferred('MainController.registerNewUser', {trace:true});
deferredResult = new Clipperz.Async.Deferred('MainController.registerNewUser', {trace:false});
deferredResult.addCallback(Clipperz.PM.DataModel.User.registerNewAccount,
credentials['username'],
MochiKit.Base.partial(MochiKit.Async.succeed, credentials['passphrase'])
@ -953,10 +953,14 @@ console.log("SET USER", aUser);
ask: function (someInfo) {
var deferredResult;
var currentPage = this.pages()[this.currentPage()];
deferredResult = new Clipperz.Async.Deferred('MainController.ask', {trace:false});
currentPage.setProps({'ask': {'info': someInfo, 'deferred':deferredResult}});
this.currentPage().setProps({'ask':someInfo, 'deferred':deferredResult});
// deferredResult.addCallback(function (aResult) { console.log("ASK - OK", aResult); return aResult; });
// deferredResult.addErrback(function (aResult) { console.log("ASK - FAIL", aResult); return aResult; });
deferredResult.addBothPass(MochiKit.Base.method(currentPage, 'setProps', {'ask': null}));
return deferredResult;
},
@ -968,15 +972,18 @@ console.log("ADD CARD CLICK");
},
deleteCard_handler: function (anEvent) {
var self = this;
return Clipperz.Async.callbacks("MainController.deleteCard_handler", [
// MochiKit.Base.method(this, 'askConfirmation', {'message':"Delete card?"}),
MochiKit.Base.method(this, 'ask', {
MochiKit.Base.method(self, 'ask', {
'question': "Delete card?",
'possibleAnswers':{
'cancel': {'label':"No", 'isDefault':true, 'answer':MochiKit.Base.methodcaller('cancel')},
'cancel': {'label':"No", 'isDefault':true, 'answer':MochiKit.Base.methodcaller('cancel', new MochiKit.Async.CancelledError())},
'delete': {'label':"Yes", 'isDefault':false, 'answer':MochiKit.Base.methodcaller('callback')}
}
}),
//function (aValue) { console.log("<-- ASK", aValue); return aValue; },
MochiKit.Base.method(this.user(), 'getRecord', anEvent['reference']),
MochiKit.Base.method(this.user(), 'deleteRecord'),
MochiKit.Base.method(this.user(), 'saveChanges'),

View File

@ -137,6 +137,7 @@
"Clipperz/PM/UI/Components/Checkbox.js",
"Clipperz/PM/UI/Components/CardToolbar.js",
"Clipperz/PM/UI/Components/MessageBox.js",
"Clipperz/PM/UI/Components/DialogBox.js",
"Clipperz/PM/UI/Components/Selections.js",
"Clipperz/PM/UI/Components/TagIndexItem.js",

View File

@ -14,6 +14,7 @@
@import "style/settingsPanel";
@import "style/accountStatus";
@import "style/card";
@import "style/dialogBox";
//----------------------------------------------------------------------------

View File

@ -325,3 +325,39 @@ div.cardContent {
cursor: pointer;
}
div.dialogBox {
@include mask();
@include flexbox();
@include align-items(center);
@include justify-content(center);
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
div.dialog {
@include flex(none);
z-index: 99999;
h3.message {
}
div.answers {
@include flexbox();
@include flex-direction(row);
@include justify-content(flex-end);
div.button {
@include flex(none);
cursor: pointer;
&.isDefault {
}
}
}
}
}

View File

@ -0,0 +1,28 @@
div.dialog {
@include box-shadow(0px, 2px, 5px, rgba(50, 50, 50, 0.75));
@include border-radius(8px);
background-color: white;
padding: 30px;
h3.message {
font-size: 18pt;
font-weight: bold;
padding-bottom: 20px;
}
div.answers {
div.button {
border: 1px solid black;
margin-left: 10px;
padding: 5px 10px;
&.isDefault {
font-weight: bold;
color: white;
background-color: blue;
}
}
}
}

View File

@ -266,9 +266,9 @@ div.tooltip.RIGHT div.tooltip_body div.tooltip_text {
display: inline-block;
height: 20px;
cursor: pointer;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffa76f), to(#ff6622));
background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ffa76f);
background: linear-gradient(0deg, #ff6622, #ffa76f);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6622), to(#ff6622));
background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff6622);
background: linear-gradient(0deg, #ff6622, #ff6622);
border-radius: 5;
-moz-border-radius: 5;
-webkit-border-radius: 5;
@ -281,6 +281,9 @@ div.tooltip.RIGHT div.tooltip_body div.tooltip_text {
font-weight: lighter;
text-shadow: -1px -1px 1px #ff6622, 1px 1px 1px #ffa76f;
text-decoration: none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffa76f), to(#ff6622));
background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ffa76f);
background: linear-gradient(0deg, #ff6622, #ffa76f);
font-weight: normal;
}
.button.default:hover {
@ -292,9 +295,9 @@ div.tooltip.RIGHT div.tooltip_body div.tooltip_text {
display: inline-block;
height: 20px;
cursor: pointer;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bfbfbf), to(#999999));
background: -moz-linear-gradient(0% 100% 90deg, #999999, #bfbfbf);
background: linear-gradient(0deg, #999999, #bfbfbf);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999999), to(#999999));
background: -moz-linear-gradient(0% 100% 90deg, #999999, #999999);
background: linear-gradient(0deg, #999999, #999999);
border-radius: 5;
-moz-border-radius: 5;
-webkit-border-radius: 5;
@ -307,6 +310,9 @@ div.tooltip.RIGHT div.tooltip_body div.tooltip_text {
font-weight: lighter;
text-shadow: -1px -1px 1px #999999, 1px 1px 1px #bfbfbf;
text-decoration: none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bfbfbf), to(#999999));
background: -moz-linear-gradient(0% 100% 90deg, #999999, #bfbfbf);
background: linear-gradient(0deg, #999999, #bfbfbf);
}
.button:hover {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ababab), to(#999999));
@ -962,6 +968,7 @@ div.userInfoBox div.body div.accountInfo {
margin-top: 6px;
border-top: 1px solid white;
border-color: #f4aa84;
min-height: 76px;
}
div.userInfoBox div.body div.accountInfo h5 {
margin: 0px;
@ -1327,9 +1334,9 @@ div.subPanelContent ul li.selected {
display: inline-block;
height: 20px;
cursor: pointer;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59bc4c), to(#448833));
background: -moz-linear-gradient(0% 100% 90deg, #448833, #59bc4c);
background: linear-gradient(0deg, #448833, #59bc4c);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#448833), to(#448833));
background: -moz-linear-gradient(0% 100% 90deg, #448833, #448833);
background: linear-gradient(0deg, #448833, #448833);
border-radius: 5;
-moz-border-radius: 5;
-webkit-border-radius: 5;
@ -1342,12 +1349,64 @@ div.subPanelContent ul li.selected {
font-weight: lighter;
text-shadow: -1px -1px 1px #448833, 1px 1px 1px #59bc4c;
text-decoration: none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59bc4c), to(#448833));
background: -moz-linear-gradient(0% 100% 90deg, #448833, #59bc4c);
background: linear-gradient(0deg, #448833, #59bc4c);
}
.downloadOfflineCopy:hover {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#49a23d), to(#448833));
background: -moz-linear-gradient(0% 100% 90deg, #448833, #49a23d);
background: linear-gradient(0deg, #448833, #49a23d);
}
.deleteAccountButton {
display: inline-block;
height: 20px;
cursor: pointer;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a80700), to(#a80700));
background: -moz-linear-gradient(0% 100% 90deg, #a80700, #a80700);
background: linear-gradient(0deg, #a80700, #a80700);
border-radius: 5;
-moz-border-radius: 5;
-webkit-border-radius: 5;
border: 1px solid #cc0800;
padding-top: 4px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
color: white;
font-weight: lighter;
text-shadow: -1px -1px 1px #a80700, 1px 1px 1px #f41f00;
text-decoration: none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f41f00), to(#a80700));
background: -moz-linear-gradient(0% 100% 90deg, #a80700, #f41f00);
background: linear-gradient(0deg, #a80700, #f41f00);
}
.deleteAccountButton:hover {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cc1900), to(#a80700));
background: -moz-linear-gradient(0% 100% 90deg, #a80700, #cc1900);
background: linear-gradient(0deg, #a80700, #cc1900);
}
.deleteAccountButton.disabled {
display: inline-block;
height: 20px;
cursor: pointer;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a0a0a0), to(#a0a0a0));
background: -moz-linear-gradient(0% 100% 90deg, #a0a0a0, #a0a0a0);
background: linear-gradient(0deg, #a0a0a0, #a0a0a0);
border-radius: 5;
-moz-border-radius: 5;
-webkit-border-radius: 5;
border: 1px solid #b2b2b2;
padding-top: 4px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
color: white;
font-weight: lighter;
text-shadow: -1px -1px 1px #a0a0a0, 1px 1px 1px #c6c6c6;
text-decoration: none;
cursor: default;
}
div.SimpleMessagePanel {
position: relative;
left: -225px;
@ -1422,7 +1481,119 @@ div.SimpleMessagePanel div.passphrase input {
div.SimpleMessagePanel div.progressBarWrapper {
margin-left: 80px;
}
/* @end */
div.scrollable div.PaymentDialog {
top: 0px;
}
div.fixed div.PaymentDialog {
top: -166.66666666666666px;
}
div.PaymentDialog {
position: relative;
width: 600px;
left: -300px;
height: 500px;
background-color: red;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
div.PaymentDialog ul {
background-color: purple;
}
div.PaymentDialog ul li {
background-color: yellow;
display: inline-block;
width: 150px;
margin-right: 30px;
cursor: pointer;
}
div.PaymentDialog ul li.selected {
background-color: green;
}
/*
div.mainDialog {
position: relative;
left: -263px;
width: 525px;
height: 325px;
}
div.scrollable div.mainDialog {
top: 0px;
}
div.fixed div.mainDialog {
top: -118px;
}
div.mainDialog div.header {
height: 55px;
background: url(./images/old/cardDialog/background_header.png) no-repeat;
}
div.mainDialog div.header div.title {
padding-top: 16px;
padding-left: 20px;
padding-right: 20px;
}
div.mainDialog div.header div.title input {
width: 100%;
display: block;
font-size: 16pt;
margin: 0px;
border: 0px;
padding: 3px 10px;
color: #787872;
border: 1px solid #cccec0;
background-color: #cccec0;
}
div.mainDialog div.header div.title h3 {
display: block;
font-size: 16pt;
color: #787872;
margin: 0px;
border: 0px;
padding: 3px 10px;
}
div.mainDialog div.header div.title.selectedField input, div.mainDialog div.header div.title:hover input {
border: 1px solid #515247;
background-color: #b5b7ab;
}
div.mainDialog div.header div.title.disabled:hover input {
border: 1px solid #cccec0;
background-color: #cccec0;
}
div.mainDialog div.body {
padding-top: 0px;
padding-left: 10px;
padding-right: 9px;
min-height: 200px;
background: url(./images/old/cardDialog/background_body.png) repeat-y;
}
div.mainDialog div.body div.mask {
display: none;
}
div.mainDialog.loading div.body div.mask {
display: block;
position: absolute;
top: 55px;
left: 10px;
right: 9px;
bottom: 70px;
z-index: 1001;
background-color: white;
padding-left: 146px;
padding-right: 146px;
padding-top: 70px;
}
div.mainDialog.loading div.body .tabPanels {
display: none;
}
div.mainDialog.loading div.body div.mask h3.progressDescription {
margin: 0px;
text-align: center;
padding-bottom: 10px;
color: #cccec0;
font-size: 14pt;
font-weight: normal;
}
*//* @end */
/* @group Javascript Alert */
div#javaScriptAlert div.mask {
position: fixed;
@ -2530,19 +2701,48 @@ div.mainPanels div.otherPanel div.body h1 {
/* @end */
/* @group Account */
form.changePassphrase div.currentCredentials,
form.changePassphrase div.newPassphrase {
form.deleteAccount div.currentCredentials,
form.changePassphrase div.newPassphrase,
form.deleteAccount div.newPassphrase {
float: left;
padding: 10px 20px;
}
form.changePassphrase label {
form.changePassphrase label,
form.deleteAccount label {
display: inline-block;
width: 150px;
}
form.changePassphrase div.confirm {
form.changePassphrase input,
form.deleteAccount input {
width: 230px;
font-size: 13pt;
color: #787872;
height: 35px;
margin-left: 15px;
padding-left: 5px;
}
form.changePassphrase input.checkbox,
form.deleteAccount input.checkbox {
margin: 10px 8px 0px 0px;
height: auto;
width: auto;
border: 0px;
}
form.changePassphrase input.checkbox:hover,
form.deleteAccount input.checkbox:hover {
cursor: pointer;
}
form.changePassphrase div.field,
form.deleteAccount div.field {
padding-bottom: 5px;
}
form.changePassphrase div.confirm,
form.deleteAccount div.confirm {
clear: both;
padding: 10px 20px;
}
form.changePassphrase div.confirm label {
form.changePassphrase div.confirm label,
form.deleteAccount div.confirm label {
width: 500px;
}
div.accountPanel h3.manageOTP {