mirror of
http://git.whoc.org.uk/git/password-manager.git
synced 2025-10-30 02:47:36 +01:00
Added very first rough prototype of tag editor
This commit is contained in:
Giulio Cesare Solaroli
@@ -27,12 +27,13 @@ Clipperz.PM.UI.Components.Cards.Detail = React.createClass({
|
||||
|
||||
viewComponentProps: function () {
|
||||
var result;
|
||||
|
||||
|
||||
result = this.props['selectedCard'];
|
||||
if (result) {
|
||||
result['style'] = this.props['style'];
|
||||
result['ask'] = (this.props['style'] == 'narrow') ? this.props['ask'] : null;
|
||||
result['showGlobalMask'] = this.props['showGlobalMask'];
|
||||
result['allTags'] = this.props['allTags'];
|
||||
}
|
||||
|
||||
return result;
|
||||
|
||||
@@ -243,15 +243,13 @@ console.log("DROP"); //, anEvent);
|
||||
|
||||
//............................................................................
|
||||
|
||||
renderTag: function (aTag) {
|
||||
return React.DOM.div({'className':'cardTag'}, aTag);
|
||||
},
|
||||
|
||||
renderTags: function (someTags) {
|
||||
var tags;
|
||||
var allTags;
|
||||
|
||||
tags = MochiKit.Base.filter(Clipperz.PM.DataModel.Record.isRegularTag, someTags).sort(Clipperz.Base.caseInsensitiveCompare);
|
||||
return React.DOM.div({'className':'cardTags'}, MochiKit.Base.map(this.renderTag, tags));
|
||||
allTags = tags;
|
||||
return Clipperz.PM.UI.Components.Cards.TagEditor({'selectedTags':tags, 'allTags':allTags, 'readOnly':false });
|
||||
},
|
||||
|
||||
//............................................................................
|
||||
|
||||
142
frontend/delta/js/Clipperz/PM/UI/Components/Cards/TagEditor.js
Normal file
142
frontend/delta/js/Clipperz/PM/UI/Components/Cards/TagEditor.js
Normal file
@@ -0,0 +1,142 @@
|
||||
/*
|
||||
|
||||
Copyright 2008-2013 Clipperz Srl
|
||||
|
||||
This file is part of Clipperz, the online password manager.
|
||||
For further information about its features and functionalities please
|
||||
refer to http://www.clipperz.com.
|
||||
|
||||
* Clipperz is free software: you can redistribute it and/or modify it
|
||||
under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
* Clipperz is distributed in the hope that it will be useful, but
|
||||
WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
||||
See the GNU Affero General Public License for more details.
|
||||
|
||||
* You should have received a copy of the GNU Affero General Public
|
||||
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
|
||||
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
|
||||
|
||||
Clipperz.PM.UI.Components.Cards.TagEditor = React.createClass({
|
||||
|
||||
//============================================================================
|
||||
|
||||
propTypes: {
|
||||
'allTags': React.PropTypes.array,
|
||||
'selectedTags': React.PropTypes.array.isRequired,
|
||||
'readOnly': React.PropTypes.bool.isRequired,
|
||||
'updateTagsCallback': React.PropTypes.func,
|
||||
},
|
||||
|
||||
//----------------------------------------------------------------------------
|
||||
|
||||
isReadOnly: function () {
|
||||
return this.props['readOnly'];
|
||||
},
|
||||
|
||||
//----------------------------------------------------------------------------
|
||||
|
||||
stillNotUsedTags: function () {
|
||||
// return MochiKit.Base.filter(function, this.props['allTags']);
|
||||
},
|
||||
|
||||
//----------------------------------------------------------------------------
|
||||
|
||||
removeTagHandler: function (anEvent) {
|
||||
this.removeTag(anEvent.currentTarget.dataset['label']);
|
||||
},
|
||||
|
||||
addTag: function (aTag) {
|
||||
//console.log("ADD TAG", aTag);
|
||||
// TODO: here we may need to include the record or its reference to let the MainController handle it properly.
|
||||
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'addTag', aTag);
|
||||
},
|
||||
|
||||
removeTag: function (aTag) {
|
||||
//console.log("REMOVE TAG", aTag);
|
||||
// TODO: here we may need to include the record or its reference to let the MainController handle it properly.
|
||||
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'removeTag', aTag);
|
||||
},
|
||||
|
||||
//----------------------------------------------------------------------------
|
||||
|
||||
handleKeyDown: function(anEvent) {
|
||||
switch (anEvent.keyCode) {
|
||||
|
||||
case 9: // tab
|
||||
console.log("TAB");
|
||||
// if (anEvent.shiftKey || !this.state.isOpen) {
|
||||
// return;
|
||||
// }
|
||||
// this.selectFocusedOption();
|
||||
break;
|
||||
|
||||
case 13: // enter
|
||||
console.log("ENTER");
|
||||
this.addTag(anEvent.currentTarget.value);
|
||||
anEvent.currentTarget.value = "";
|
||||
// this.selectFocusedOption();
|
||||
break;
|
||||
|
||||
case 27: // escape
|
||||
console.log("ESCAPE");
|
||||
// if (this.state.isOpen) {
|
||||
// this.closeOnEscape();
|
||||
// } else {
|
||||
// this.clearValue();
|
||||
// }
|
||||
break;
|
||||
|
||||
case 38: // up
|
||||
console.log("UP");
|
||||
// this.focusPreviousOption();
|
||||
break;
|
||||
|
||||
case 40: // down
|
||||
console.log("DOWN");
|
||||
// this.focusNextOption();
|
||||
break;
|
||||
|
||||
default: return;
|
||||
}
|
||||
|
||||
anEvent.preventDefault();
|
||||
},
|
||||
|
||||
//----------------------------------------------------------------------------
|
||||
|
||||
renderTag: function (aTag) {
|
||||
return React.DOM.li({'className':'tag'}, [
|
||||
React.DOM.span({'className':'tagLabel'}, aTag),
|
||||
this.isReadOnly() ? null : React.DOM.span({'className':'tagRemoveButton', 'onClick':this.removeTagHandler, 'data-label':aTag}, 'delete')
|
||||
])
|
||||
},
|
||||
|
||||
renderEditField: function () {
|
||||
return React.DOM.input({'type':'text', 'onKeyDown': this.handleKeyDown});
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var classes = {
|
||||
'tagEditor': true,
|
||||
'readOnly': this.props['readOnly'],
|
||||
'readWrite': !this.props['readOnly']
|
||||
};
|
||||
|
||||
return React.DOM.div({'className':React.addons.classSet(classes)}, [
|
||||
React.DOM.ul({},[
|
||||
MochiKit.Base.map(this.renderTag, this.props['selectedTags']),
|
||||
this.isReadOnly() ? null : this.renderEditField()
|
||||
])
|
||||
]);
|
||||
},
|
||||
|
||||
//=========================================================================
|
||||
});
|
||||
@@ -78,15 +78,16 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
|
||||
|
||||
//............................................................................
|
||||
|
||||
renderTag: function (aTag) {
|
||||
return React.DOM.div({'className':'cardTag'}, aTag);
|
||||
},
|
||||
// renderTag: function (aTag) {
|
||||
// return React.DOM.div({'className':'cardTag'}, aTag);
|
||||
// },
|
||||
|
||||
renderTags: function (someTags) {
|
||||
var tags;
|
||||
|
||||
tags = MochiKit.Base.filter(Clipperz.PM.DataModel.Record.isRegularTag, someTags).sort(Clipperz.Base.caseInsensitiveCompare);
|
||||
return React.DOM.div({'className':'cardTags'}, MochiKit.Base.map(this.renderTag, tags));
|
||||
// return React.DOM.div({'className':'cardTags'}, MochiKit.Base.map(this.renderTag, tags));
|
||||
return Clipperz.PM.UI.Components.Cards.TagEditor({'selectedTags':tags, 'readOnly':true });
|
||||
},
|
||||
|
||||
//............................................................................
|
||||
|
||||
Reference in New Issue
Block a user