From f42c469663b0910d143df6280fc2d3e8c06dacec Mon Sep 17 00:00:00 2001 From: Giulio Cesare Solaroli Date: Fri, 19 Sep 2014 18:27:26 +0200 Subject: [PATCH] Added very first rough prototype of tag editor --- .../Clipperz/PM/UI/Components/Cards/Detail.js | 3 +- .../Clipperz/PM/UI/Components/Cards/Edit.js | 8 +- .../PM/UI/Components/Cards/TagEditor.js | 142 ++++++++++++++++++ .../Clipperz/PM/UI/Components/Cards/View.js | 9 +- .../delta/js/Clipperz/PM/UI/MainController.js | 98 ++++++++---- .../delta/properties/delta.properties.json | 1 + frontend/delta/scss/clipperz.scss | 1 + frontend/delta/scss/core/fonts.scss | 3 +- frontend/delta/scss/core/tagEditor.scss | 31 ++++ frontend/delta/scss/style/card.scss | 29 ++-- 10 files changed, 261 insertions(+), 64 deletions(-) create mode 100644 frontend/delta/js/Clipperz/PM/UI/Components/Cards/TagEditor.js create mode 100644 frontend/delta/scss/core/tagEditor.scss diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/Detail.js b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/Detail.js index ec7ff37..f52148a 100644 --- a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/Detail.js +++ b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/Detail.js @@ -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; diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js index 9d73b24..2bf08ee 100644 --- a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js +++ b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js @@ -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 }); }, //............................................................................ diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/TagEditor.js b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/TagEditor.js new file mode 100644 index 0000000..ac52945 --- /dev/null +++ b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/TagEditor.js @@ -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() + ]) + ]); + }, + + //========================================================================= +}); diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/View.js b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/View.js index 2852ed3..3357cfc 100644 --- a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/View.js +++ b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/View.js @@ -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 }); }, //............................................................................ diff --git a/frontend/delta/js/Clipperz/PM/UI/MainController.js b/frontend/delta/js/Clipperz/PM/UI/MainController.js index 5fb6395..92f3384 100644 --- a/frontend/delta/js/Clipperz/PM/UI/MainController.js +++ b/frontend/delta/js/Clipperz/PM/UI/MainController.js @@ -56,38 +56,18 @@ Clipperz.PM.UI.MainController = function() { ]); this.registerForNotificationCenterEvents([ - 'doLogin', - 'registerNewUser', - 'showRegistrationForm', - 'goBack', - - 'toggleSelectionPanel', - 'toggleSettingsPanel', - - 'matchMediaQuery', - 'unmatchMediaQuery', - - 'selectAllCards', - 'selectRecentCards', - 'tagSelected', - 'selectUntaggedCards', - + 'doLogin', 'registerNewUser', 'showRegistrationForm', 'goBack', + 'toggleSelectionPanel', 'toggleSettingsPanel', + 'matchMediaQuery', 'unmatchMediaQuery', + 'selectAllCards', 'selectRecentCards', 'tagSelected', 'selectUntaggedCards', 'refreshCardEditDetail', // 'refreshCardEditToolbar', - 'saveCardEdits', - 'cancelCardEdits', - + 'saveCardEdits', 'cancelCardEdits', 'cardSelected', - 'addCardClick', - 'deleteCard', - 'archiveCard', - 'cloneCard', - 'editCard', - - 'showArchivedCards', - 'hideArchivedCards', - + 'deleteCard', 'archiveCard', 'cloneCard', 'editCard', + 'addTag', 'removeTag', + 'showArchivedCards', 'hideArchivedCards', 'goBackToMainPage', 'maskClick', ]); @@ -626,9 +606,14 @@ console.log("SET USER", aUser); return aValue; }, + allTags: function (shouldIncludeArchivedCards) { + return this.user().getTags(shouldIncludeArchivedCards); + }, + renderTags: function () { return Clipperz.Async.callbacks("MainController.renderTags", [ - MochiKit.Base.method(this.user(), 'getTags', this.shouldIncludeArchivedCards()), +// MochiKit.Base.method(this.user(), 'getTags', this.shouldIncludeArchivedCards()), + MochiKit.Base.method(this, 'allTags', this.shouldIncludeArchivedCards()), MochiKit.Base.method(this, 'setPageProperties', 'mainPage', 'tags'), MochiKit.Base.method(this, 'getArchivedCardsCount'), MochiKit.Base.method(this, 'setPageProperties', 'mainPage', 'archivedCardsCount'), @@ -1046,9 +1031,10 @@ console.log("SET USER", aUser); MochiKit.Base.method(this.user(), 'createNewRecord'), MochiKit.Base.methodcaller('reference'), MochiKit.Base.method(this, 'refreshUI'), - MochiKit.Base.bind(function () { - this.pages()[this.currentPage()].setProps({'mode': 'edit'}); - }, this), +// MochiKit.Base.bind(function () { +// this.pages()[this.currentPage()].setProps({'mode': 'edit'}); +// }, this), + MochiKit.Base.method(this, 'enterEditMode'), ], {trace:false}); }, @@ -1092,9 +1078,55 @@ console.log("SET USER", aUser); ], {trace:false}); }, + enterEditMode: function () { + var currentPage = this.pages()[this.currentPage()]; + + currentPage.setProps({'mode': 'edit'}); + + return Clipperz.Async.callbacks("MainController.enterEditMode", [ + MochiKit.Base.method(this, 'allTags', true), + MochiKit.Base.keys, + function (aValue) { + currentPage.setProps({'allTags': aValue}); + }, + ], {trace:false}); + + }, + editCard_handler: function (anEvent) { //console.log("EDIT CARD", anEvent['reference']); - this.pages()[this.currentPage()].setProps({'mode': 'edit'}); +// this.pages()[this.currentPage()].setProps({'mode': 'edit'}); + this.enterEditMode(); + }, + + addTag_handler: function (anEvent) { + var record = this.pages()[this.currentPage()].props['selectedCard']['_record']; + var tag = anEvent; + var deferredResult; + + deferredResult = new Clipperz.Async.Deferred('MainController.addTag', {trace:false}); + deferredResult.addMethod(record, 'addTag', tag); + deferredResult.addMethod(this, 'collectRecordInfo', record); + deferredResult.addMethod(this, 'setPageProperties', this.currentPage(), 'selectedCard'); +// deferredResult.addMethod(this, 'refreshCurrentPage'); + deferredResult.callback(); + + return deferredResult; + }, + + removeTag_handler: function (anEvent) { + var record = this.pages()[this.currentPage()].props['selectedCard']['_record']; + var tag = anEvent; + var deferredResult; + + deferredResult = new Clipperz.Async.Deferred('MainController.removeTag', {trace:false}); + deferredResult.addMethod(record, 'removeTag', tag); + deferredResult.addMethod(this, 'collectRecordInfo', record); + deferredResult.addMethod(this, 'setPageProperties', this.currentPage(), 'selectedCard'); +// deferredResult.addMethod(this, 'refreshCurrentPage'); + deferredResult.callback(); + + return deferredResult; }, goBackToMainPage_handler: function (anEvent) { diff --git a/frontend/delta/properties/delta.properties.json b/frontend/delta/properties/delta.properties.json index 4cf5250..957e693 100644 --- a/frontend/delta/properties/delta.properties.json +++ b/frontend/delta/properties/delta.properties.json @@ -159,6 +159,7 @@ "Clipperz/PM/UI/Components/Cards/Edit.js", "Clipperz/PM/UI/Components/Cards/CommandToolbar.js", "Clipperz/PM/UI/Components/Cards/EditToolbar.js", + "Clipperz/PM/UI/Components/Cards/TagEditor.js", "Clipperz/PM/UI/Components/AccountStatus.js", diff --git a/frontend/delta/scss/clipperz.scss b/frontend/delta/scss/clipperz.scss index 0dad85a..f51b66a 100644 --- a/frontend/delta/scss/clipperz.scss +++ b/frontend/delta/scss/clipperz.scss @@ -6,6 +6,7 @@ @import "core/overlay"; @import "core/behavior"; @import "core/layout"; +@import "core/tagEditor"; @import "style/loadingPage"; @import "style/loginPage"; diff --git a/frontend/delta/scss/core/fonts.scss b/frontend/delta/scss/core/fonts.scss index a8090df..d15a0c0 100644 --- a/frontend/delta/scss/core/fonts.scss +++ b/frontend/delta/scss/core/fonts.scss @@ -78,7 +78,8 @@ // generator: IcoMoon font-style: normal; font-weight: normal; - src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'); + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAMAIAAAwBAR1NVQuUv5xcAAADMAAABzk9TLzIIIvzGAAACnAAAAGBjbWFw52cCOwAAAvwAAAB0Z2FzcAAAABAAAANwAAAACGdseWbJg89gAAADeAAADNRoZWFkAZ02KQAAEEwAAAA2aGhlYQP+AisAABCEAAAAJGhtdHgfygIxAAAQqAAAAKhsb2NhKMAlwgAAEVAAAABWbWF4cAAzANwAABGoAAAAIG5hbWWH7XEQAAARyAAAAYRwb3N0AAMAAAAAE0wAAAAgAAEAAAAKAB4ALAABbGF0bgAIAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAoAAAABACQADwBGAFwAagCUALIAwgDmAPoBCAESASgBOgFmAX4BigABAA8ABAAFAAYABwAIAAkADgAPABEAEgATABQAFQAWACkAAQAEACgACAAHAAcAAwAGAAQAEwAHAAEABAAlAAQABAAGAA0AAgAGABgAJwAIABEADwAPAAQAEAAHABQAHQAIAA4ADAASABIACAATABgAAgAGABAAHAAEABEAEAAIABsABgAIAA4ACAAVAAgAAQAEACEABQAPAAQADAAOAAIABgAWABsABwAEAAwADgAWABMACAAbAAYABAAMAA4ACAAHAAEABAAkAAcAEQAEAAcADAAQAAoAAQAEABoABAAIABAAFgABAAQAHAACAA0AAQAEACIACAAEABQAFAAXABEAEwAHAAEABAAgAAYACAAGAAgAEAAVAAIABgAeACYACwALABEAFwADAAcACAAVAAQADAAOAB8ABgAIAAQAEwAGAAsAAgAGABAAGQAEAAQACgAUAB4AAwAEAAoAAQAEACMAAwATAA4AAQAEACgAAgApAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmEAHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAGAAAAAUABAAAwAEAAEAIABpAHAAdQB3AHrmEP/9//8AAAAAACAAYQBrAHIAdwB65gD//f//AAH/4/+j/6L/of+g/54aGQADAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAAC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A6wEJgRyBZYF0gYOBigGYAZqAAAAAQAAACoA2gAIAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABABwAAAABAAAAAAACAA4AeAABAAAAAAADABwAMgABAAAAAAAEABwAhgABAAAAAAAFABYAHAABAAAAAAAGAA4ATgABAAAAAAAKADQAogADAAEECQABABwAAAADAAEECQACAA4AeAADAAEECQADABwAMgADAAEECQAEABwAhgADAAEECQAFABYAHAADAAEECQAGABwAXAADAAEECQAKADQAogBjAGwAaQBwAHAAZQByAHoALQBpAGMAbwBuAHMAVgBlAHIAcwBpAG8AbgAgADEALgAwAGMAbABpAHAAcABlAHIAegAtAGkAYwBvAG4Ac2NsaXBwZXJ6LWljb25zAGMAbABpAHAAcABlAHIAegAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGMAbABpAHAAcABlAHIAegAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('truetype'); + } //======================================================================================== diff --git a/frontend/delta/scss/core/tagEditor.scss b/frontend/delta/scss/core/tagEditor.scss new file mode 100644 index 0000000..ea54a75 --- /dev/null +++ b/frontend/delta/scss/core/tagEditor.scss @@ -0,0 +1,31 @@ +.tagEditor { + + &.readWrite { + border: 1px solid red; + } + + ul { + @include flexbox(); + @include flex-direction(row); + @include align-items(flex-start); + + li.tag { + @include flex(none); + font-size: 14pt; + padding-right: 10px; + + &:before { + content: 'tag'; + @include icon-font(); + font-size: 10pt; + padding-right: 4px; + } + + span.tagRemoveButton { + @include icon-font(); + color: gray; + cursor: pointer; + } + } + } +} diff --git a/frontend/delta/scss/style/card.scss b/frontend/delta/scss/style/card.scss index f034c54..b1d2aad 100644 --- a/frontend/delta/scss/style/card.scss +++ b/frontend/delta/scss/style/card.scss @@ -224,27 +224,10 @@ $cardViewBasePadding: 10px; padding: $cardViewBasePadding; } - .cardTags { - @include flexbox(); - @include flex-direction(row); - @include align-items(flex-start); - + .tagEditor { padding: $cardViewBasePadding; - - .cardTag { - @include flex(none); - font-size: 14pt; - padding-right: 10px; - - &:before { - content: 'tag'; - @include icon-font(); - font-size: 10pt; - padding-right: 4px; - } - } } - + .cardNotes { padding: $cardViewBasePadding; } @@ -281,7 +264,9 @@ $cardViewBasePadding: 10px; } } - + .removeField { + cursor: pointer; + } } .fieldAction { @@ -298,6 +283,10 @@ $cardViewBasePadding: 10px; } + .newCardField { + cursor: pointer; + } + .cardDirectLogin { font-size: 18pt; padding: $cardViewBasePadding;