Updated /delta

Switched from less to scss. Still no build script to update the final CSS, though.
Added preliminary support for storing account data on browser's local storage for offline viewing. No public backend currently support this feature.

1 files changed, 10 insertions, 3 deletions

diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js b/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js
index 66d20f1..5a44a4a 100644
--- a/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js
+++ b/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js
@@ -76,86 +76,93 @@ Clipperz.PM.UI.Components.CardList = React.createClass({
 
         focusOnSearchField: function () {
 console.log("focusOnSearchField", this.refs['searchField']);
                 this.refs['searchField'].getDOMNode.focus();
         },
 
         searchBox: function () {
                 var result;
 
                 if (this.state.showSearch) {
                                 result =React.DOM.div({className:'searchBox'}, [
                                                         React.DOM.div(null, [
                                                                 React.DOM.input({type:'search', placeholder:"search", ref:'searchField', onChange:this.updateSearchText})
                                                         ])
                                                 ]);
                 } else {
                         result = null;
                 }
 
                 return result;
         },
 
         //=========================================================================
 
+        showPreferences: function (anEvent) {
+                MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'showPreferences', anEvent);
+        },
+
+        //=========================================================================
+
         cardItem: function (aRecordReference) {
                         varreference = aRecordReference['_reference'];
                         varselectedCard = (reference == this.props.selectedCard);
 
-                        returnReact.DOM.div({className:'listItem', onClick:MochiKit.Base.method(this, 'handleClickOnCardDetail', reference)}, [
+                        //TODO: verify if it is possible to put the onClick handler on the container 'div', instead of adding it to each 'div' item.
+                        returnReact.DOM.div({className:'listItem', key:reference, onClick:MochiKit.Base.method(this, 'handleClickOnCardDetail', reference)}, [
                                         React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aRecordReference.label)),
         //                              React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aRecordReference.label + ' ' + aRecordReference.label + ' ' + aRecordReference.label + ' ' + aRecordReference.label + ' ' + aRecordReference.label)),
                                         React.DOM.div({className:'faviconWrapper'}, aRecordReference.favicon ? React.DOM.img({className:'favicon', src:aRecordReference.favicon}) : React.DOM.div({className:'favicon'}, '\u00A0')),
                                         React.DOM.div({className:'detailLinkWrapper'}, React.DOM.span({className:'detailLink ' + (selectedCard ? 'icon-spin' : '')}, (selectedCard ? "loading" : "detail")))
                                 ]);
         },
 
         handleClickOnCardDetail: function (aRecordReference, anEvent) {
                 MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'showRecord', aRecordReference);
         },
 
         cardListItems: function () {
                         varlist;
                         varresult;
 
                 list = this.props['cardList'];
 
                 if (typeof(list) != 'undefined') {
                         result = MochiKit.Base.map(MochiKit.Base.method(this, 'cardItem'), list);
                 } else {
                         result = null;
                 }
 
                 return result;
         },
 
         //=========================================================================
 
         handleChange: function (anEvent) {
         //              varrefs = this.refs;
         //      var refName = MochiKit.Base.filter(function (aRefName) { return refs[aRefName].getDOMNode() == anEvent.target}, MochiKit.Base.keys(this.refs))[0];
         //      var newState = {};
 //
         //      newState[refName] = event.target.value;
         //    this.setState(newState);
         },
 
         //=========================================================================
 
         render: function() {
                         returnReact.DOM.div(null, [
                                         React.DOM.div({className:'header'}, [
                                                 React.DOM.a({className:'account'}, 'clipperz'),
                                                 React.DOM.div({className:'features'}, [
-                                                        React.DOM.a({className:'addCard'}, 'add'),
+        //                                              React.DOM.a({className:'addCard'}, 'add'),
                                                         React.DOM.a({className:'search ' + (this.state.showSearch ? 'selected' : ''), onClick:this.toggleSearch}, 'search'),
-                                                        React.DOM.a({className:'settings'}, 'settings')
+                                                        React.DOM.a({className:'settings', onClick:this.showPreferences}, 'settings')
                                                 ]),
         //                                      this.searchBox()
                                         ]),
                                         this.searchBox(),
                                         React.DOM.div({className:'content cardList'}, this.cardListItems()),
                                 ]);
         }
 
         //=========================================================================
 });