clipperz/password-manager-mirror
1
0
Fork 0
mirror of http://git.whoc.org.uk/git/password-manager.git synced 2025-10-28 18:07:35 +01:00
Code Issues Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/delta/js/Clipperz/PM/UI/Components/Cards/Toolbar.js
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())));
},

56
frontend/delta/js/Clipperz/PM/UI/Components/DialogBox.js
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'])))
])
]);
}
//=========================================================================

6
frontend/delta/js/Clipperz/PM/UI/Components/Pages/MainPage.js
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
]);
}

17
frontend/delta/js/Clipperz/PM/UI/MainController.js
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'),

1
frontend/delta/properties/delta.properties.json
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",

1
frontend/delta/scss/clipperz.scss
View File

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

36
frontend/delta/scss/core/layout.scss
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 {
}
}
}
}
}

28
frontend/delta/scss/style/dialogBox.scss Normal file
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;
}
}
}
}