General improvements to the UI

More work still needed, but still a meaningful step forward.

frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js

@@ -231,6 +231,26 @@ console.log("DROP");	//, anEvent);
 		MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'refreshCardEditDetail', reference);
 	},
 
+	toggleLock: function (aField) {
+		var	reference = this.props['_reference'];
+		
+		return function (anEvent) {
+//console.log("FIELD", aField.isHidden(), aField);
+//			aField.setIsHidden(!aField.isHidden());
+//			MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'refreshCardEditDetail', reference);
+
+			return Clipperz.Async.callbacks("Clipperz.PM.UI.Components.Cards.Edit.toggleLock", [
+				MochiKit.Base.method(aField, 'isHidden'),
+				MochiKit.Base.operator.lognot,
+				MochiKit.Base.method(aField, 'setIsHidden'),
+				function (aValue) {
+					MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'refreshCardEditDetail', reference);
+				},
+			], {trace:false});
+
+		};
+	},
+
 	//============================================================================
 
 	renderLabel: function (aLabel) {
@@ -285,10 +305,17 @@ console.log("DROP");	//, anEvent);
 //								'onDrop':this.drop,
 								'onDragEnd':this.dragEnd
 		}, [
-			React.DOM.div({'className':'fieldValues'}, [
+			React.DOM.div({'className':'fieldEditAction'}, [
 				React.DOM.span({'className':'removeField', 'onClick':this.removeField(field)}, "remove field"),
-				React.DOM.input({'className':'fieldLabel', 'onChange':this.handleChange(field, 'setLabel'), 'defaultValue':aField['label'], 'placeholder': "label"}),
-				React.DOM.textarea({'className':React.addons.classSet(cardFieldValueClasses), 'onChange':this.handleChange(field, 'setValue'), 'defaultValue':aField['value'], 'placeholder': "value"}),
+				React.DOM.span({'className':'toggleLock', 'onClick':this.toggleLock(field)}, aField['isHidden'] ? "locked" : "unlocked"),
+			]),
+			React.DOM.div({'className':'fieldValues'}, [
+				React.DOM.div({'className':'fieldLabel'}, [
+					React.DOM.input({'_className_':'_fieldLabel_', 'onChange':this.handleChange(field, 'setLabel'), 'defaultValue':aField['label'], 'placeholder': "label"}),
+				]),
+				React.DOM.div({'className':'fieldValue'}, [
+					React.DOM.textarea({'className':React.addons.classSet(cardFieldValueClasses), 'onChange':this.handleChange(field, 'setValue'), 'defaultValue':aField['value'], 'placeholder': "value"}),
+				])
 			]),
 			React.DOM.div({'className':'fieldAction action'}, aField['actionType'].toLowerCase())
 		]);
@@ -362,9 +389,9 @@ console.log("DROP");	//, anEvent);
 				React.DOM.div({'className':'content'}, [
 					this.renderLabel(this.props['label']),
 					this.renderTags(this.props['tags']),
-					this.renderNotes(this.props['notes']),
 					this.renderFields(this.fields()),
 					this.renderAddNewField(),
+					this.renderNotes(this.props['notes']),
 					this.renderDirectLogins(this.props['directLogins'])
 				])
 			]),

frontend/delta/js/Clipperz/PM/UI/Components/Cards/View.js

@@ -50,7 +50,8 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
 	//----------------------------------------------------------------------------
 
 	renderEmpty: function () {
-		return	React.DOM.h4({}, "EMPTY");
+//		return	React.DOM.h4({}, "EMPTY");
+		return	React.DOM.h4({}, "");
 	},
 	
 	//----------------------------------------------------------------------------
@@ -58,8 +59,8 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
 	renderLoading: function () {
 		return	React.DOM.div({className:'loading'},[
 			this.renderLabel(),
-			React.DOM.h5({className:'message'}, "loading")
-/*
+//			React.DOM.h5({className:'message'}, "loading")
+
 			React.DOM.div({className:'overlay'}, [
 				React.DOM.div({className:'spinner'}, [
 					React.DOM.div({className:'bar01'}),
@@ -76,7 +77,6 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
 					React.DOM.div({className:'bar12'})
 				])
 			])
-*/
 		]);
 	},
 	
@@ -87,7 +87,16 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
 	},
 	
 	renderNotes: function (someNotes) {
-		return	React.DOM.div({'className':'cardNotes'}, someNotes);
+		var	result;
+
+//console.log("NOTES", someNotes);
+		if (someNotes != "") {
+			result = React.DOM.div({'className':'cardNotes'}, someNotes);
+		} else {
+			result = null;
+		}
+
+		return	result;
 	},
 
 	//............................................................................
@@ -98,10 +107,18 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
 	
 	renderTags: function (someTags) {
 		var	tags;
+		var	result;
 
+//console.log("TAGS", someTags);
 		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	Clipperz.PM.UI.Components.Cards.TagEditor({'selectedTags':tags, 'readOnly':true });
+
+		if (tags.length > 0) {
+			result = Clipperz.PM.UI.Components.Cards.TagEditor({'selectedTags':tags, 'readOnly':true });
+		} else {
+			result = null;
+		}
+
+		return result;
 	},
 
 	//............................................................................
@@ -119,6 +136,7 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
 		cardFieldValueClasses['hidden'] = aField['isHidden'];
 		
 		return	React.DOM.div({'className':React.addons.classSet(cardFieldClasses)}, [
+			React.DOM.div({'className':'fieldEditAction'}, null),
 			React.DOM.div({'className':'fieldValues'}, [
 				React.DOM.div({'className':'fieldLabel'}, aField['label']),
 				React.DOM.div({'className':React.addons.classSet(cardFieldValueClasses)}, aField['value']),
@@ -157,8 +175,8 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
 			React.DOM.div({'className':'content'}, [
 				this.renderLabel(this.props['label']),
 				this.renderTags(this.props['tags']),
-				this.renderNotes(this.props['notes']),
 				this.renderFields(this.props['fields']),
+				this.renderNotes(this.props['notes']),
 				this.renderDirectLogins(this.props['directLogins'])
 			])
 		]);

frontend/delta/js/Clipperz/PM/UI/Components/Selections.js

@@ -88,7 +88,8 @@ Clipperz.PM.UI.Components.Selections = React.createClass({
 			React.DOM.ul({'className':'defaultSet'}, [
 				React.DOM.li({'className':'allCards', 'onClick': this.selectAll}, "All"),
 				React.DOM.li({'className':'recentCards', 'onClick': this.selectRecent}, "Recent"),
-				React.DOM.li({'className':'untaggedCards', 'onClick': this.selectUntaggedCards}, "Untagged - " + this.props['untaggedCardsCount'])
+//				React.DOM.li({'className':'untaggedCards', 'onClick': this.selectUntaggedCards}, "Untagged - " + this.props['untaggedCardsCount'])
+				React.DOM.li({'className':'untaggedCards', 'onClick': this.selectUntaggedCards}, "Untagged")
 			]),
 			React.DOM.div({'className':'search'}, [
 				React.DOM.form({'className':'searchForm'}, [

frontend/delta/js/Clipperz/PM/UI/MainController.js

@@ -87,6 +87,7 @@ Clipperz.PM.UI.MainController = function() {
 	Mousetrap.bind(['up',    'k'],			MochiKit.Base.method(this, 'selectPreviousCard'));
 	Mousetrap.bind(['down',  'j'],			MochiKit.Base.method(this, 'selectNextCard'));
 
+	Mousetrap.bind(['* a'],					MochiKit.Base.method(this, 'selectAllCards_handler'));
 
 	return this;
 }
@@ -649,15 +650,15 @@ console.log("THE BROWSER IS OFFLINE");
 		var deferredResult;
 
 		deferredResult = new Clipperz.Async.Deferred('MainController.refreshUI', {trace:false});
-//		deferredResult.addMethod(this, 'resetRecordsInfo'),
 		deferredResult.addMethod(this, 'refreshSelectedCards');
 		deferredResult.addMethod(this, 'renderTags');
 		
 		if (selectedCardReference != null) {
 			deferredResult.addMethod(this.user(), 'getRecord', selectedCardReference);
 			deferredResult.addMethod(this, 'collectRecordInfo');
-			deferredResult.addMethod(this, 'setPageProperties', 'mainPage', 'selectedCard');
+			deferredResult.addMethod(this, 'setPageProperties', this.currentPage(), 'selectedCard');
 		}
+
 		deferredResult.callback();
 		
 		return deferredResult;
@@ -1128,7 +1129,8 @@ console.log("THE BROWSER IS OFFLINE");
 
 	goBackToMainPage: function (anEvent) {
 		if (this.currentPage() == 'cardDetailPage') {
-//			this.updateSelectedCard(anEvent, true, false);	//	TODO: is this statement really needed?
+			var	resetSelection = null;
+			this.updateSelectedCard(resetSelection, true, false);
 			this.moveOutPage(this.currentPage(), 'mainPage');
 		}
 	},
@@ -1261,19 +1263,27 @@ console.log("THE BROWSER IS OFFLINE");
 
 	addCardClick_handler: function () {
 		var	newRecordReference;
+		var newRecord;
+
 		return Clipperz.Async.callbacks("MainController.addCardClick_handler", [
 			MochiKit.Base.method(this.user(), 'createNewRecord'),
-			MochiKit.Base.methodcaller('reference'),
-//			MochiKit.Base.method(this, 'selectCard'),
 			function (aValue) {
-				newRecordReference = aValue;
-//				return {'reference': newRecordReference, 'label': ""};
-				return newRecordReference;
+				newRecord = aValue;
+				return newRecord;
 			},
+			MochiKit.Base.methodcaller('addField', {'label':"", 'value':"", 'isHidden':false}),
+			function () { return newRecord; },
+			MochiKit.Base.methodcaller('reference'),
+//			function (aValue) {
+//				newRecordReference = aValue;
+//				return newRecordReference;
+//			},
 			MochiKit.Base.method(this, 'refreshUI'),
-			MochiKit.Base.bind(function () {
+			function () { return newRecord; },
+			MochiKit.Base.methodcaller('reference'),
+			MochiKit.Base.bind(function (aRecordReference) {
 				return this.selectCard({
-					'reference': newRecordReference,
+					'reference': aRecordReference,
 					'label': ""
 				}, true);
 			}, this),