Reviewed UI and removed the option to create new certificates

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

@@ -34,7 +34,7 @@ Clipperz.PM.UI.AttachmentController = function(someParameters) {
 		this.LATEST_ENCRYPTION_VERSION = '1.0';	// Versions aren't handled completely yet!
 
 		this.fileQueue       = [];
-		this.notifications   = [];
+//		this.notifications   = [];
 		this.operationsCount = null;
 
 		this.encryptedDocument = null;
@@ -56,19 +56,20 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
 	},
 
 	//-------------------------------------------------------------------------
-
+/*
 	notifyUpdate: function() {
-		MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'updateAttachmentQueueInfo', this.getQueueInfo(), this.getNotificationsInfo());
+//		MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'updateAttachmentQueueInfo', this.getQueueInfo(), this.getNotificationsInfo());
+		MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'updateNotifications');
 	},
-
+*/
 	getQueueInfo: function() {
 		return this.fileQueue;
 	},
-
+/*
 	getNotificationsInfo: function() {
 		return this.notifications;
 	},
-
+*/
 	//=========================================================================
 	// Entry points
 	//=========================================================================
@@ -164,7 +165,7 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
 
 		var count = this.updateOperationsCount();
 
-		this.notifyUpdate();
+//		this.notifyUpdate();
 
 		processNextElements = true;
 		for (i in this.fileQueue) {
@@ -209,7 +210,7 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
 					case 'WAITING_SAVE':
 						this.saveFile(currentElement['reference'], currentElement['decryptedArray'], currentElement['meta']['name'], currentElement['meta']['type']);
 						processNextElements = false;
-						Clipperz.Sound.beep();
+//						Clipperz.Sound.beep();
 						break;
 				}
 			}
@@ -247,7 +248,6 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
 
 	addFileToQueue: function(someParameters) {
 		this.fileQueue.push(someParameters);
-		this.addNotification(someParameters);
 
 		this.dispatchQueueOperations();
 	},
@@ -268,6 +268,10 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
 
 		MochiKit.Base.update(this.fileQueue[queuePosition], someParameters);
 
+		if ((someParameters['status'] == 'DONE') || (someParameters['status'] == 'FAILED')) {
+			this.addNotification(this.fileQueue[queuePosition], someParameters['status']);
+		}
+
 		this.dispatchQueueOperations();
 	},
 
@@ -293,13 +297,38 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
 	// Notifications
 	//=========================================================================
 
-	addNotification: function(aQueueElement) {
-		this.notifications.push({
-			'id': this.randomId(),
-			'queueElement': aQueueElement
-		})
-	},
+	addNotification: function(aQueueElement, aStatus) {
+//console.log("ADD ATTACHMENT NOTIFICATION", aQueueElement);
+		var messagePrefix = "";
+		var	message;
+		var	filename;
+		var	level;
+		
+		if (aStatus == 'DONE') {
+			level = 'info';
+			if (aQueueElement['process'] == 'DOWNLOAD') {
+				messagePrefix = "downloaded attachment ";
+			} else if (aQueueElement['process'] == 'UPLOAD') {
+				messagePrefix = "uploaded attachment ";
+			}
+		} else if (aStatus == 'FAILED') {
+			level = 'error';
+			if (aQueueElement['process'] == 'DOWNLOAD') {
+				messagePrefix = "error downloading attachment ";
+			} else if (aQueueElement['process'] == 'UPLOAD') {
+				messagePrefix = "error uploading attachment ";
+			}
+		} else {
+			level = 'warning';
+			messagePrefix = "???";
+		}
 
+		filename = aQueueElement['meta']['name'];
+		message = messagePrefix + filename;
+
+		MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'addNotification', {'message':message, 'level':level});
+	},
+/*
 	removeNotification: function(aNotificationId) {
 		var i, position;
 
@@ -314,14 +343,15 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
 			this.notifications.splice(position, 1);
 		}
 
-		this.notifyUpdate();
+//		this.notifyUpdate();
 	},
-
+*/
+/*
 	randomId: function() {
-		return Clipperz.Crypto.PRNG.defaultRandomGenerator().getRandomBytes(32).toHexString().substring(2);
+		return Clipperz.Crypto.randomKey();
+//		return Clipperz.Crypto.PRNG.defaultRandomGenerator().getRandomBytes(32).toHexString().substring(2);
 	},
-
-
+*/
 	//=========================================================================
 	// Queue Processing: READ
 	//=========================================================================
@@ -432,6 +462,7 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
 				'status': 'DONE',
 				'requestProgress': 1,
 			}),
+			//	add notification
 		], {trace:false});
 	},
 

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

@@ -29,12 +29,14 @@ Clipperz.PM.UI.Components.ButtonClass = React.createClass({
 	displayName: 'Clipperz.PM.UI.Components.Button',
 
 	propTypes: {
-		'eventName':	React.PropTypes.string.isRequired,
-		'label':		React.PropTypes.string.isRequired,
-		'handler':		React.PropTypes.func.isRequired,
-		'className':	React.PropTypes.string,
-		'badgeTopContent': React.PropTypes.number,
-		'badgeBottomContent': React.PropTypes.number,
+		'eventName':			React.PropTypes.string.isRequired,
+		'label':				React.PropTypes.string.isRequired,
+		'handler':				React.PropTypes.func.isRequired,
+		'className':			React.PropTypes.string,
+		'badgeTopContent':		React.PropTypes.number,
+		'badgeTopLevel':		React.PropTypes.string,
+		'badgeBottomContent':	React.PropTypes.number,
+		'badgeBottomLevel':		React.PropTypes.string,
 	},
 
 	//=========================================================================
@@ -52,18 +54,18 @@ Clipperz.PM.UI.Components.ButtonClass = React.createClass({
 
 		badgeTop = null;
 		if (this.props['badgeTopContent']) {
-			badgeTop = React.DOM.span({'className': 'badge top'}, this.props['badgeTopContent']);
+			badgeTop = React.DOM.span({'className': Clipperz.PM.UI.Components.classNames('badge', 'top', this.props['badgeTopLevel'])}, this.props['badgeTopContent']);
 		};
 
 		badgeBottom = null;
 		if (this.props['badgeBottomContent']) {
-			badgeBottom = React.DOM.span({'className': 'badge bottom'}, this.props['badgeBottomContent']);
+			badgeBottom = React.DOM.span({'className': Clipperz.PM.UI.Components.classNames('badge', 'bottom', this.props['badgeBottomLevel'])}, this.props['badgeBottomContent']);
 		};
 
 	
-		return	React.DOM.div({className:Clipperz.PM.UI.Components.classNames(classes), onClick:this.props['handler']}, [
-			React.DOM.div({className:this.props['eventName']}, [
-				React.DOM.h3({className:'label'}, this.props['label']),
+		return	React.DOM.div({'className':Clipperz.PM.UI.Components.classNames(classes), onClick:this.props['handler']}, [
+			React.DOM.div({'className':this.props['eventName']}, [
+				React.DOM.h3({'className':'label'}, this.props['label']),
 				badgeTop,
 				badgeBottom,
 			])

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

@@ -63,33 +63,66 @@ Clipperz.PM.UI.Components.CardToolbarClass = React.createClass({
 	
 	//============================================================================
 
-	renderWithSidePanels: function () {
+	notificationCounter: function () {
+		var	result;
+		
+		console.log("CARD TOOLBAR NOTIFICATIONS", this.props['notifications']);
+
+		if (this.props['notifications']) {
+			result = this.props['notifications'].length;
+		} else {
+			result = null;
+		}
+/*
 		var attachmentDownloadNotificationNumber = MochiKit.Base.filter(function(anElement) {
 			return anElement['queueElement']['process'] == 'DOWNLOAD';
 		}, this.props['attachmentQueueInfo']['notifications']).length;
 
 		var attachmentUploadNotificationNumber = this.props['attachmentQueueInfo']['notifications'].length - attachmentDownloadNotificationNumber;
-
 //		attachmentDownloadNotificationNumber = 2;
 //		attachmentUploadNotificationNumber = 3;
+/*
 		var verifyingCertificateNotificationNumber = this.props['certificateQueueInfo'] ? MochiKit.Base.filter(function (anCertificationInfo) {
 			return anCertificationInfo['status'] == 'requested';
 		}, this.props['certificateQueueInfo']).length : 0;
 		var verifiedCertificateNotificationNumber = this.props['certificateQueueInfo'] ? MochiKit.Base.filter(function (anCertificationInfo) {
 			return anCertificationInfo['status'] == 'published';
 		}, this.props['certificateQueueInfo']).length : 0;
+*/
+		return result;
+	},
 
+	notificationLevel: function () {
+		var	result = 'info';
+		var i, c;
+		
+		c = this.props['notifications'].length;
+		for (i=0; i<c; i++) {
+			var	level;
+			
+			level = this.props['notifications'][i]['level'];
+			if (level == 'error') {
+				result = 'error';
+			} else if ((level == 'warning') && (result == 'info')) {
+				result = 'warning';
+			}
+		}
+		
+		return result;
+	},
+
+	renderWithSidePanels: function () {
 		return [
 			React.DOM.div({className:'selectionToggle'}, [
-				Clipperz.PM.UI.Components.Button({eventName:'selectionToggleButton', label:"tags", handler:this.selectionToggleHandler})
+				Clipperz.PM.UI.Components.Button({'eventName':'selectionToggleButton', 'label':"tags", 'handler':this.selectionToggleHandler})
 			]),
 			this.renderWithoutSidePanels(),
 
 			// TODO: validate and adjust names
-			React.DOM.div({className:'settingsToggle'}, [
-				Clipperz.PM.UI.Components.Button({eventName:'certificateQueueToggleButton', label:"certificate",  handler:this.certificateQueueToggleHandler, badgeTopContent:verifyingCertificateNotificationNumber, badgeBottomContent:verifiedCertificateNotificationNumber}),
-				Clipperz.PM.UI.Components.Button({eventName:'attachmentQueueToggleButton',  label:"\u2191\u2193", handler:this.attachmentQueueToggleHandler,  badgeTopContent:attachmentDownloadNotificationNumber, badgeBottomContent:attachmentUploadNotificationNumber}),
-				Clipperz.PM.UI.Components.Button({eventName:'settingsToggleButton', label:"menu", handler:this.settingsToggleHandler})
+			React.DOM.div({'className':'settingsToggle'}, [
+//				Clipperz.PM.UI.Components.Button({eventName:'certificateQueueToggleButton', label:"certificate",  handler:this.certificateQueueToggleHandler, badgeTopContent:verifyingCertificateNotificationNumber, badgeBottomContent:verifiedCertificateNotificationNumber}),
+//				Clipperz.PM.UI.Components.Button({eventName:'attachmentQueueToggleButton',  label:"\u2191\u2193", handler:this.attachmentQueueToggleHandler,  badgeTopContent:attachmentDownloadNotificationNumber, badgeBottomContent:attachmentUploadNotificationNumber}),
+				Clipperz.PM.UI.Components.Button({'eventName':'settingsToggleButton', 'label':"menu", 'handler':this.settingsToggleHandler, 'badgeTopContent':this.notificationCounter(), 'badgeTopLevel':this.notificationLevel()})
 			])
 		];
 	},
@@ -102,36 +135,36 @@ Clipperz.PM.UI.Components.CardToolbarClass = React.createClass({
 //console.log("CARD TOOLBAR", this.props['filter']['type']);
 
 			if (this.props['filter']['type'] == 'RECENT') {
-				result = [React.DOM.div({className:'clipperz'}, [React.DOM.span({className:'logo recent'}, "recent")])];
+				result = [React.DOM.div({'className':'clipperz'}, [React.DOM.span({'className':'logo recent'}, "recent")])];
 			} else if (this.props['filter']['type'] == 'WITH_ATTACHMENTS') {
-					result = [React.DOM.div({className:'clipperz'}, [React.DOM.span({className:'logo withAttachments'}, "attachment")])];
+					result = [React.DOM.div({'className':'clipperz'}, [React.DOM.span({'className':'logo withAttachments'}, "attachment")])];
 			} else if (this.props['filter']['type'] == 'TAG') {
-				result = [React.DOM.div({className:'clipperz'}, [
-					React.DOM.span({className:'logo tag'}, "tag"),
-					React.DOM.span({className:'value'}, this.props['filter']['value'])
+				result = [React.DOM.div({'className':'clipperz'}, [
+					React.DOM.span({'className':'logo tag'}, "tag"),
+					React.DOM.span({'className':'value'}, this.props['filter']['value'])
 				])];
 			} else if (this.props['filter']['type'] == 'UNTAGGED') {
-				result = [React.DOM.div({className:'clipperz'}, [
-					React.DOM.span({className:'logo tag'}, "tag"),
-					React.DOM.span({className:'value'}, "untagged")
+				result = [React.DOM.div({'className':'clipperz'}, [
+					React.DOM.span({'className':'logo tag'}, "tag"),
+					React.DOM.span({'className':'value'}, "untagged")
 				])];
 			} else if (this.props['filter']['type'] == 'SEARCH') {
-				result = [React.DOM.div({className:'clipperz'}, [
-					React.DOM.span({className:'logo search'}, "search"),
-					React.DOM.span({className:'value'}, this.props['filter']['value'])
+				result = [React.DOM.div({'className':'clipperz'}, [
+					React.DOM.span({'className':'logo search'}, "search"),
+					React.DOM.span({'className':'value'}, this.props['filter']['value'])
 					])];
 			} else {
-				result = [React.DOM.div({className:'clipperz'}, [React.DOM.span({className:'logo clipperz'}, "clipperz")])];
+				result = [React.DOM.div({'className':'clipperz'}, [React.DOM.span({'className':'logo clipperz'}, "clipperz")])];
 			}
 		} else {
-			result = [React.DOM.div({className:'clipperz'}, [React.DOM.span({className:'logo clipperz'}, "clipperz")])];
+			result = [React.DOM.div({'className':'clipperz'}, [React.DOM.span({'className':'logo clipperz'}, "clipperz")])];
 		}
 		
 		return result;
 	},
 
 	render: function () {
-		return	React.DOM.div({className:'cardToolbar ' + this.props['style']}, [
+		return	React.DOM.div({'className':'cardToolbar ' + this.props['style']}, [
 			React.DOM.header({}, this.props['enableSidePanels'] ? this.renderWithSidePanels() : this.renderWithoutSidePanels()),
 			Clipperz.PM.UI.Components.AccountStatus(MochiKit.Base.update(this.props['accountInfo'], this.props['proxyInfo'])),
 			Clipperz.PM.UI.Components.MessageBox(this.props['messageBox']),

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

@@ -63,9 +63,9 @@ Clipperz.PM.UI.Components.Cards.CommandToolbarClass = React.createClass({
 		return {
 			'delete':	{ 'label': "delete",		'broadcastEvent': 'deleteCard',			'enabled': this.isFeatureEnabled('DELETE_CARD')},
 			'archive':	{ 'label': archiveLabel,	'broadcastEvent': 'toggleArchiveCard',	'enabled': this.isFeatureEnabled('EDIT_CARD')},
-//			'share':	{ 'label': "share",		'broadcastEvent': 'shareCard' },
+//			'share':	{ 'label': "share",			'broadcastEvent': 'shareCard' },
 			'clone':	{ 'label': "clone",			'broadcastEvent': 'cloneCard',			'enabled': this.isFeatureEnabled('ADD_CARD')},
-			'register':	{ 'label': "register",		'broadcastEvent': 'createCertificate',	'enabled': this.isFeatureEnabled('REGISTER_CARD') && !this.isCardCertified()},
+//			'register':	{ 'label': "register",		'broadcastEvent': 'createCertificate',	'enabled': this.isFeatureEnabled('REGISTER_CARD') && !this.isCardCertified()},
 			'edit':		{ 'label': "edit",			'broadcastEvent': 'editCard',			'enabled': this.isFeatureEnabled('EDIT_CARD') && !this.isCardCertified()}
 		};
 	},

frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/Plan.js

@@ -41,6 +41,25 @@ Clipperz.PM.UI.Components.ExtraFeatures.PlanClass = React.createClass({
 
 	//=========================================================================
 
+	hasSomeCertificate: function () {
+		return ((this.props['accountInfo']['certificateQuota']['used']['published'] > 0) || (this.props['accountInfo']['certificateQuota']['used']['requested'] > 0));
+	},
+
+	renderCertificateSection: function () {
+		var	result;
+		
+		if (this.hasSomeCertificate()) {
+			result = React.DOM.div({'className': 'certificates'}, [
+				React.DOM.h2({}, "Certificates"),
+				this.renderCertificateIcons(),
+			]);
+		} else {
+			result = null;
+		}
+		
+		return result;
+	},
+
 	renderCertificateIcons: function () {
 		var	result;
 		var	totalCertificates;
@@ -72,7 +91,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.PlanClass = React.createClass({
 		return React.DOM.ul({}, [
 			React.DOM.li({'className':'published'}, "published: " + ((publishedCertificates > 0) ? publishedCertificates : '-')),
 			React.DOM.li({'className':'requested'}, "requested: " + ((requestedCertificates > 0) ? requestedCertificates : '-')),
-			React.DOM.li({'className':'available'}, "available: " + ((availableCertificates > 0) ? availableCertificates : '-')),
+//			React.DOM.li({'className':'available'}, "available: " + ((availableCertificates > 0) ? availableCertificates : '-')),
 		]);
 	},
 	
@@ -99,10 +118,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.PlanClass = React.createClass({
 					])
 				]),
 
-				React.DOM.div({'className': 'certificates'}, [
-					React.DOM.h2({}, "Certificates"),
-					this.renderCertificateIcons(),
-				]),
+				this.renderCertificateSection(),
 				
 				React.DOM.div({'className': 'upgrade'}, [
 					React.DOM.button({'className':'button disabled', 'type':'submit'}, "upgrade")

frontend/delta/js/Clipperz/PM/UI/Components/Pages/MainPage.js

@@ -70,8 +70,8 @@ Clipperz.PM.UI.Components.Pages.MainPageClass = React.createClass({
 			classes[this.props['style']] = true;
 
 			result = React.DOM.div({'key':'mainPage', 'className':Clipperz.PM.UI.Components.classNames(classes)}, [
-				Clipperz.PM.UI.Components.AttachmentQueueBox(this.props),
-				Clipperz.PM.UI.Components.CertificateQueueBox(this.props),
+//				Clipperz.PM.UI.Components.AttachmentQueueBox(this.props),
+//				Clipperz.PM.UI.Components.CertificateQueueBox(this.props),
 				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),

frontend/delta/js/Clipperz/PM/UI/Components/Panels/ExtraFeaturesPanel.js

@@ -134,6 +134,21 @@ Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanelClass = React.createClass({
 	
 	//=========================================================================
 
+	acknowledgeNotification: function (aNotificationID) {
+		return MochiKit.Base.bind(function () {
+			MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'acknowledgeNotification', aNotificationID);
+		}, this);
+	},
+
+	renderNotification: function (aNotification) {
+		return	React.DOM.div({'key':aNotification['id'], 'className':Clipperz.PM.UI.Components.classNames('notification', aNotification['level'])}, [
+			React.DOM.span({'className':'acknowledge', 'onClick':this.acknowledgeNotification(aNotification['id'])}, [
+				React.DOM.span({}, "close")
+			]),
+			React.DOM.span({'className':'message'}, aNotification['message'])
+		]);
+	},
+
 	renderIndex: function () {
 		var	offlineCopyButtonClasses = {
 			'button': true,
@@ -146,8 +161,8 @@ Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanelClass = React.createClass({
 					Clipperz.PM.UI.Components.Button({'key':'button', 'eventName':'settingsToggleButton', 'label':"menu", 'handler':this.settingsToggleHandler})
 				])
 			]),
-
 			React.DOM.div({'key':'ulWrapper'}, [
+				this.props['notifications'].length ? React.DOM.div({'key':'notifications', 'className':'notifications'}, MochiKit.Base.map(MochiKit.Base.method(this, 'renderNotification'), this.props['notifications'])) : null,
 				React.DOM.ul({'key':'ul'}, [
 					React.DOM.li({'key':'account', 'className':this.state['index']['account'] ? 'open' : 'closed'}, [
 						React.DOM.h1({'key':'accountH1', 'onClick':this.toggleIndexState('account')}, "Account"),
@@ -256,8 +271,8 @@ Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanelClass = React.createClass({
 						React.DOM.h1({'key':'aboutH1', 'onClick':this.toggleIndexState('about')}, "About"),
 						React.DOM.div({'key':'address', 'className':'address'}, [
 							"Clipperz Srl",
-							"Piazza Nuova, 10",
-							"48012 Bagnacavallo",
+							"Via Selice, 66/a",
+							"40026 Imola",
 							"Italy"
 						]),
 						React.DOM.ul({'key':'data'}, [

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

@@ -84,6 +84,7 @@ Clipperz.PM.UI.Components.SelectionsClass = React.createClass({
 		var	selectedCardCount;
 		var	filterType;
 		var	filterValue;
+		var	certificateSelector;
 
 //console.log("SELECTIONS PROPS", this.props);
 //console.log("withAttachmentCardsCount", this.props['withAttachmentCardsCount']);
@@ -95,6 +96,15 @@ Clipperz.PM.UI.Components.SelectionsClass = React.createClass({
 		filterType = (this.props['filter'] && this.props['filter']['type']) ? this.props['filter']['type'] : 'ALL';
 		filterValue = (this.props['filter'] && this.props['filter']['value']) ? this.props['filter']['value'] : null;
 
+		if (this.props['withCertificateCardsCount']) {
+			certificateSelector =	React.DOM.li({'className':'withCertificateCards', 'onClick': this.selectWithCertificate}, [
+										React.DOM.span({'className':'label'}, "With certificate"),
+										React.DOM.span({'className':'count'}, this.props['withCertificateCardsCount'] ? this.props['withCertificateCardsCount'] : '-')
+									]);
+		} else {
+			certificateSelector =	null;
+		}
+
 		return	React.DOM.div({'key':'selections', 'id':'selections', 'className':filterType}, [
 			React.DOM.ul({'className':'defaultSet'}, [
 				React.DOM.li({'className':'allCards', 'onClick': this.selectAll}, [
@@ -105,10 +115,7 @@ Clipperz.PM.UI.Components.SelectionsClass = React.createClass({
 					React.DOM.span({'className':'label'}, "Recent"),
 					React.DOM.span({'className':'count'}, this.props['allCardsCount'] ? '10' : '-')
 				]),
-				React.DOM.li({'className':'withCertificateCards', 'onClick': this.selectWithCertificate}, [
-					React.DOM.span({'className':'label'}, "With certificate"),
-					React.DOM.span({'className':'count'}, this.props['withCertificateCardsCount'] ? this.props['withCertificateCardsCount'] : '-')
-				]),
+				certificateSelector,
 				React.DOM.li({'className':'withAttachmentCards', 'onClick': this.selectWithAttachments}, [
 					React.DOM.span({'className':'label'}, "With attachments"),
 					React.DOM.span({'className':'count'}, this.props['withAttachmentCardsCount'] ? this.props['withAttachmentCardsCount'] : '-')

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

@@ -30,13 +30,14 @@ Clipperz.PM.UI.MainController = function() {
 	this._mediaQueryStyle = "narrow";
 	this._user		= null;
 	this._filter	= {'type':'ALL'};
+	this._notifications = [];
 
 	this._shouldIncludeArchivedCards = false;
 
 	this._isSelectionPanelOpen = false;
 	this._isSettingsPanelOpen = false;
-	this._isAttachmentQueueBoxOpen = false;
-	this._isCertificateQueueBoxOpen = false;
+//	this._isAttachmentQueueBoxOpen = false;
+//	this._isCertificateQueueBoxOpen = false;
 	
 	this._pageStack = ['loadingPage'];
 	this._overlay =  new Clipperz.PM.UI.Components.Overlay();
@@ -78,15 +79,15 @@ Clipperz.PM.UI.MainController = function() {
 		'importCards',
 		'downloadExport',
 		'updateProgress',
-		'toggleSelectionPanel', 'hideSelectionPanel', 'toggleSettingsPanel', 'toggleAttachmentQueueBox', 'toggleCertificateQueueBox',
+		'toggleSelectionPanel', 'hideSelectionPanel', 'toggleSettingsPanel', //	'toggleAttachmentQueueBox', 'toggleCertificateQueueBox',
 		'matchMediaQuery', 'unmatchMediaQuery',
 		'selectAllCards', 'selectRecentCards', 'selectCardsWithCertificate', 'selectCardsWithAttachments', 'selectUntaggedCards', 'tagSelected', 'search',
 		'refreshCardEditDetail',
 		'saveCardEdits', 'cancelCardEdits',
 		'selectCard',
 		'addCardClick',
-		'deleteCard', 'toggleArchiveCard', 'cloneCard', 'createCertificate', 'editCard',
-		'downloadCertificate',	'showCertificatePreview', 'hideCertificatePreview', 'closeCertificateNotification', 'showCertificateCard',
+		'deleteCard', 'toggleArchiveCard', 'cloneCard', 'editCard',	//	'createCertificate',
+		'downloadCertificate',	'showCertificatePreview', 'hideCertificatePreview', 'showCertificateCard',	//	'closeCertificateNotification'
 		'addTag', 'removeTag',
 		'showArchivedCards', 'hideArchivedCards',
 		'goBackToMainPage',
@@ -95,7 +96,8 @@ Clipperz.PM.UI.MainController = function() {
 		'downloadOfflineCopy',
 		'runDirectLogin', 'removeDirectLogin',
 		'exitSearch',
-		'updateAttachmentQueueInfo', 'addAttachment', 'removeAttachment', 'getAttachment', 'cancelAttachment', 'closeAttachmentNotification',
+		'addAttachment', 'removeAttachment', 'getAttachment', 'cancelAttachment',	// 'closeAttachmentNotification', 'updateAttachmentQueueInfo', 
+		'addNotification', 'acknowledgeNotification',
 	]);
 
 	this._attachmentController = new Clipperz.PM.UI.AttachmentController({
@@ -104,7 +106,7 @@ Clipperz.PM.UI.MainController = function() {
 		'reloadServerStatusCallback': MochiKit.Base.method(this, 'reloadAttachmentServerStatusCallback')
 	});
 	
-	this._certificateQueueStatus = [];
+//	this._certificateQueueStatus = [];
 
 	document.addEventListener('dragover', MochiKit.Base.method(this, 'blockDragOver'), false);
 
@@ -420,7 +422,7 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 		deferredResult.addMethod(this, 'setUser', user);
 		deferredResult.addMethod(this, 'updateUserPreferences');
 		deferredResult.addMethod(this, 'runApplication');
-		deferredResult.addMethod(this, 'updateCertificateQueueInfo');
+//		deferredResult.addMethod(this, 'updateCertificateQueueInfo');
 		deferredResult.addMethod(this.overlay(), 'done', "", 1);
 		deferredResult.addErrback(MochiKit.Base.method(this, 'genericErrorHandler', someCredentials, "login failed"));
 		deferredResult.addErrback(MochiKit.Base.bind(function (anEvent, anError) {
@@ -539,7 +541,7 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 		});
 		// deferredResult.addMethod(unlockPage, 'resetUnlockForm');
 		deferredResult.addCallback(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'enableLock');
-		deferredResult.addMethod(this, 'updateCertificateQueueInfo');
+//		deferredResult.addMethod(this, 'updateCertificateQueueInfo');
 		deferredResult.addMethod(overlay, 'done', "", 0.5);
 		deferredResult.addErrback(MochiKit.Async.succeed, true);
 		deferredResult.callback();
@@ -1302,15 +1304,19 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 		var elementFetchCallback;
 
 		if (this._attachmentController) {
+//console.log(">>> attachmentController", this._attachmentController);
 			queue = this._attachmentController.getQueueInfo();
-			notifications = this._attachmentController.getNotificationsInfo();
+//			notifications = this._attachmentController.getNotificationsInfo();
 			elementFetchCallback = MochiKit.Base.method(this._attachmentController, 'getQueueElement');
 		} else {
+//console.log(">>> attachmentController -> NULL");
 			queue = [];
-			notifications = [];
+//			notifications = [];
 			elementFetchCallback = null;
 		}
 
+
+//console.log("<<< attachmentController", queue, notifications);
 		return {
 			'queue': queue,
 			'notifications': notifications,
@@ -1378,14 +1384,15 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 				'accountInfo':					this.userAccountInfo(),
 				'selectionPanelStatus':			this.isSelectionPanelOpen()	? 'OPEN' : 'CLOSED',
 				'settingsPanelStatus':			this.isSettingsPanelOpen()	? 'OPEN' : 'CLOSED',
-				'attachmentQueueBoxStatus':		this.isAttachmentQueueBoxOpen()	? 'OPEN' : 'CLOSED',
-				'certificateQueueBoxStatus':	this.isCertificateQueueBoxOpen() ? 'OPEN' : 'CLOSED',
+//				'attachmentQueueBoxStatus':		this.isAttachmentQueueBoxOpen()	? 'OPEN' : 'CLOSED',
+//				'certificateQueueBoxStatus':	this.isCertificateQueueBoxOpen() ? 'OPEN' : 'CLOSED',
 				'featureSet':					this.featureSet(),
 				'features':						this.features(),
 				'proxyInfo':					this.proxyInfo(),
 				'locked':						false,
+				'notifications':				this.notifications(),
 				'attachmentQueueInfo':			this.attachmentQueueInfo(),
-				'certificateQueueInfo':			this.certificateQueueInfo(),
+//				'certificateQueueInfo':			this.certificateQueueInfo(),
 //				'shouldIncludeArchivedCards':	this.shouldIncludeArchivedCards(),
 //				'cards':				…,
 //				'tags':					…,
@@ -1393,8 +1400,9 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 			};
 		} else if (aPageName == 'cardDetailPage') {
 			extraProperties = {
+				'notifications':				this.notifications(),
 				'attachmentQueueInfo':			this.attachmentQueueInfo(),
-				'certificateQueueInfo':			this.certificateQueueInfo(),
+//				'certificateQueueInfo':			this.certificateQueueInfo(),
 				'proxyInfo':					this.proxyInfo(),
 			};
 		} else if (aPageName == 'errorPage') {
@@ -1496,7 +1504,7 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 			}, this)
 		], {trace:false});
 	},
-
+/*
 	isAttachmentQueueBoxOpen: function() {
 		return this._isAttachmentQueueBoxOpen;
 	},
@@ -1510,9 +1518,9 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 			}, this)
 		], {trace:false});
 	},
-
+*/
 	//----------------------------------------------------------------------------
-
+/*
 	isCertificateQueueBoxOpen: function() {
 		return this._isCertificateQueueBoxOpen;
 	},
@@ -1526,7 +1534,7 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 			}, this)
 		], {trace:false});
 	},
-
+*/
 	//----------------------------------------------------------------------------
 
 	selectedCardInfo: function () {
@@ -1956,10 +1964,10 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 				newRecord = aValue;
 				return newRecord;
 			},
-//			MochiKit.Base.methodcaller('addField', {'label':"username", 'value':"", 'hidden':false}),
-//			function () { return newRecord; },
-//			MochiKit.Base.methodcaller('addField', {'label':"password", 'value':"", 'hidden':true}),
-//			function () { return newRecord; },
+			MochiKit.Base.methodcaller('addField', {'label':"username", 'value':"", 'hidden':false}),
+			function () { return newRecord; },
+			MochiKit.Base.methodcaller('addField', {'label':"password", 'value':"", 'hidden':true}),
+			function () { return newRecord; },
 			MochiKit.Base.methodcaller('reference'),
 			MochiKit.Base.method(this, 'refreshUI'),
 			function () { return newRecord; },
@@ -2105,7 +2113,7 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 			MochiKit.Base.method(this.pages()[this.currentPage()], 'setProps', {'showCertificatePreview': false})
 		], {trace:false});
 	},
-
+/*
 	createCertificate_handler: function (anEvent) {
 //console.log("CREATE CERTIFICATE HANDLER", anEvent);
 //console.log("CREATE CERTIFICATE", this.user().accountInfo(), this.userAccountInfo());
@@ -2165,9 +2173,9 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 		
 		return result;
 	},
-
+*/
 	//...........................................................................
-
+/*
 	updateCertificateQueueInfo: function () {
 		return Clipperz.Async.callbacks("MainController.updateCertificateQueueInfo", [
 			MochiKit.Base.method(this.user().connection(), 'message', 'getCertificatesStatus', {}),
@@ -2223,7 +2231,7 @@ console.log("showCertificateCard_handler");
 			MochiKit.Base.method(this, 'selectCard_handler', {'cardInfo': {'reference':aRecordReference}, 'update': true}),
 		], {trace:false});
 	},
-
+*/
 	//===========================================================================
 	
 	addTag_handler: function (anEvent) {
@@ -2542,12 +2550,58 @@ console.log("showCertificateCard_handler");
 	
 	//============================================================================
 
+	addNotification_handler: function (aNotification) {
+console.log("ADD NOTIFICATION", aNotification);
+		var	notification;
+
+		notification = {
+			'id':		Clipperz.PM.Crypto.randomKey(),
+			'date':		new Date(),
+			'message':	aNotification['message'],
+			'level':	aNotification['level'],
+			'callback':	aNotification['callback'],
+		};
+
+		this.notifications().unshift(notification);
+		this.updateNotifications();
+	},
+
+	acknowledgeNotification_handler: function (aNotificationReference) {
+console.log("ACKNOWLEDGE NOTIFICATION", aNotificationReference);
+		var	objectIndex = -1;
+		var	i, c;
+		
+		c = this.notifications().length;
+		for (i=0; i<c; i++) {
+			if (this.notifications()[i]['id'] == aNotificationReference) {
+				objectIndex = i;
+			}
+		}
+		
+		if (objectIndex != -1) {
+			Clipperz.Base.removeObjectAtIndexFromArray(objectIndex, this.notifications());
+		} else {
+			console.log("WARNING: notification with ID '" + aNotificationReference + "' not found");
+		}
+		this.updateNotifications();
+	},
+
+	notifications: function () {
+		return this._notifications;
+	},
+
+	updateNotifications: function () {
+console.log("UPDATE NOTIFICATIONS");
+		this.setPageProperties(this.currentPage(), 'notifications', this.notifications());
+	},
+
+/*
 	updateAttachmentQueueInfo_handler: function(someProperties) {
 		return Clipperz.Async.callbacks("MainController.updateAttachmentQueueInfo_handler", [
 			MochiKit.Base.method(this, 'setPageProperties', this.currentPage(), 'attachmentQueueInfo', this.attachmentQueueInfo())
 		], {trace:false});
 	},
-
+*/
 	addAttachment_handler: function (aFileInfo) {	//	aReference, someMetadata, aKey, aNonce
 		var deferredResult;
 		var	record = aFileInfo['record'];
@@ -2623,14 +2677,14 @@ console.log("showCertificateCard_handler");
 	cancelAttachment_handler: function(anAttachment) {
 		return this.attachmentController().cancelAttachment(anAttachment);
 	},
-
+/*
 	closeAttachmentNotification_handler: function(aNotificationId) {
 		return Clipperz.Async.callbacks("MainController.", [
 			MochiKit.Base.method(this.attachmentController(), 'removeNotification', aNotificationId)
 		], {trace:false});
 
 	},
-
+*/
 	//----------------------------------------------------------------------------
 
 	reloadAttachmentServerStatusCallback: function(aRecord) {

frontend/delta/properties/delta.properties.json

@@ -58,43 +58,43 @@
 	"js": [
 		"MochiKit/Base.js",
 		"MochiKit/Iter.js",
-		"-- MochiKit/Logging.js",
-		"-- MochiKit/DateTime.js",
-		"-- MochiKit/Format.js",
+		"--# MochiKit/Logging.js",
+		"--# MochiKit/DateTime.js",
+		"--# MochiKit/Format.js",
 		"MochiKit/Async.js",
 		"MochiKit/DOM.js",
 		"MochiKit/Style.js",
-		"-- MochiKit/LoggingPane.js",
-		"-- MochiKit/Color.js",
+		"--# MochiKit/LoggingPane.js",
+		"--# MochiKit/Color.js",
 		"MochiKit/Signal.js",
-		"-- MochiKit/Position.js",
+		"--# MochiKit/Position.js",
 		"MochiKit/Selector.js",
-		"-- MochiKit/Visual.js",
+		"--# MochiKit/Visual.js",
 
-		"-- React/react-0.14.7.js",
-		"-- React/react-dom-0.14.7.js",
+		"--# React/react-0.14.7.js",
+		"--# React/react-dom-0.14.7.js",
 		"React/react.min-0.14.7.js",
 		"React/react-dom.min-0.14.7.js",
 
 		"MouseTrap/mousetrap.js",
-		"-- MouseTrap/mousetrap-bind-dictionary.js",
-		"-- MouseTrap/mousetrap-global-bind.js",
-		"-- MouseTrap/mousetrap-pause.js",
+		"--# MouseTrap/mousetrap-bind-dictionary.js",
+		"--# MouseTrap/mousetrap-global-bind.js",
+		"--# MouseTrap/mousetrap-pause.js",
 
-		"-- Hammer/hammer-1.0.5.js",
-		"-- Cubiq/add2home.js",
-		"-- Modernizr/modernizr-2.8.2.js",
+		"--# Hammer/hammer-1.0.5.js",
+		"--# Cubiq/add2home.js",
+		"--# Modernizr/modernizr-2.8.2.js",
 		"OnMediaQuery/onmediaquery-0.2.0.js",
 		
 		"FileSaver/Blob.js",
 		"FileSaver/FileSaver.js",
 
 		"PapaParse/papaparse.js",
-		"-- PapaParse/papaparse.min.js",
+		"--# PapaParse/papaparse.min.js",
 
 		"xDate/xdate-0.8.js",
 		
-		"-- Filesize/filesize.js",
+		"--# Filesize/filesize.js",
 		"Filesize/filesize.min.js",
 
 		"-- WEBCRYPTO AND PROMISES POLYFILL FOR IE11",
@@ -111,17 +111,17 @@
 		"Clipperz/Base.js",
 		"Clipperz/Async.js",
 		"Clipperz/CSVProcessor.js",
-		"-- Clipperz/KeePassExportProcessor.js",
+		"--# Clipperz/KeePassExportProcessor.js",
 		"Clipperz/Date.js",
-		"-- Clipperz/DOM.js",
+		"--# Clipperz/DOM.js",
 		"Clipperz/Logging.js",
 		"Clipperz/Signal.js",
-		"-- Clipperz/Style.js",
-		"-- Clipperz/Visual.js",
-		"-- Clipperz/Set.js",
-		"-- Clipperz/Profile.js",
+		"--# Clipperz/Style.js",
+		"--# Clipperz/Visual.js",
+		"--# Clipperz/Set.js",
+		"--# Clipperz/Profile.js",
 		"Clipperz/KeyValueObjectStore.js",
-		"Clipperz/Sound.js",
+		"-- Clipperz/Sound.js",
 
 		"Clipperz/Crypto/SHA.js",
 		"Clipperz/Crypto/AES.js",
@@ -136,19 +136,19 @@
 		"Clipperz/PM/Strings/Strings_en-US.js",
 		"-- # Clipperz/PM/Strings/Strings_en-GB.js",
 		"-- # Clipperz/PM/Strings/Strings_en-CA.js",
-		"-- Clipperz/PM/Strings/Strings_it-IT.js",
-		"-- Clipperz/PM/Strings/Strings_pt-BR.js",
+		"--# Clipperz/PM/Strings/Strings_it-IT.js",
+		"--# Clipperz/PM/Strings/Strings_pt-BR.js",
 		"-- # Clipperz/PM/Strings/Strings_pt-PT.js",
-		"-- Clipperz/PM/Strings/Strings_ja-JP.js",
-		"-- Clipperz/PM/Strings/Strings_zh-CN.js",
-		"-- Clipperz/PM/Strings/Strings_es-ES.js",
-		"-- Clipperz/PM/Strings/Strings_fr-FR.js",
+		"--# Clipperz/PM/Strings/Strings_ja-JP.js",
+		"--# Clipperz/PM/Strings/Strings_zh-CN.js",
+		"--# Clipperz/PM/Strings/Strings_es-ES.js",
+		"--# Clipperz/PM/Strings/Strings_fr-FR.js",
 		"-- # Clipperz/PM/Strings/Strings_de-DE.js",
 		"-- # Clipperz/PM/Strings/Strings_el-GR.js",
 		"-- # Clipperz/PM/Strings/Strings_ru-RU.js",
 		"-- # Clipperz/PM/Strings/Strings_he-IL.js",
 		"Clipperz/PM/Strings.js",
-		"-- Clipperz/PM/Strings/MessagePanelConfigurations.js",
+		"--# Clipperz/PM/Strings/MessagePanelConfigurations.js",
 
 		"Clipperz/PM/Date.js",
 
@@ -157,13 +157,13 @@
 		"Clipperz/PM/Proxy/Proxy.JSON.js",
 		"Clipperz/PM/Proxy/Proxy.Offline.js",
 		"Clipperz/PM/Proxy/Proxy.Offline.DataStore.js",
-		"-- Clipperz/PM/Proxy/Proxy.Offline.MemoryDataStore.js",
+		"--# Clipperz/PM/Proxy/Proxy.Offline.MemoryDataStore.js",
 		"Clipperz/PM/Proxy/Proxy.Offline.LocalStorageDataStore.js",
 
 		"Clipperz/PM/Connection.js",
 		"Clipperz/PM/Crypto.js",
 		"Clipperz/PM/PIN.js",
-		"-- Clipperz/PM/BookmarkletProcessor.js",
+		"--# Clipperz/PM/BookmarkletProcessor.js",
 
 		"Clipperz/PM/DefaultCards.js",
 
@@ -188,25 +188,25 @@
 
 		"Clipperz/PM/DataModel/DevicePreferences.js",
 
-		"-- Clipperz/PM/UI/Web/Components/BaseComponent.js",
-		"-- Clipperz/PM/UI/Web/Components/Overlay.js",
-		"-- Clipperz/PM/UI/Web/Components/LoginForm.js",
-		"-- Clipperz/PM/UI/Web/Components/RegistrationWizard.js",
+		"--# Clipperz/PM/UI/Web/Components/BaseComponent.js",
+		"--# Clipperz/PM/UI/Web/Components/Overlay.js",
+		"--# Clipperz/PM/UI/Web/Components/LoginForm.js",
+		"--# Clipperz/PM/UI/Web/Components/RegistrationWizard.js",
 
-		"-- Clipperz/PM/UI/Web/Controllers/MainController.js",
+		"--# Clipperz/PM/UI/Web/Controllers/MainController.js",
 
 		"Clipperz/PM/UI/Components.js",
 		"Clipperz/PM/UI/Components/Overlay.js",
 		"Clipperz/PM/UI/Components/Button.js",
-		"-- Clipperz/PM/UI/Components/Checkbox.js",
+		"--# 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",
 		"Clipperz/PM/UI/Components/Help.js",
-		"Clipperz/PM/UI/Components/AttachmentQueueBox.js",
-		"Clipperz/PM/UI/Components/CertificateQueueBox.js",
+		"-- Clipperz/PM/UI/Components/AttachmentQueueBox.js",
+		"-- Clipperz/PM/UI/Components/CertificateQueueBox.js",
 		"Clipperz/PM/UI/Components/RadialProgressIndicator.js",
 
 		"Clipperz/PM/UI/Components/ExpiredPanel.js",
@@ -241,7 +241,7 @@
 		"Clipperz/PM/UI/Components/ExtraFeatures/DataImport/CSV/Notes.js",
 		"Clipperz/PM/UI/Components/ExtraFeatures/DataImport/CSV/Hidden.js",
 
-		"-- Clipperz/PM/UI/Components/Cards/FavIcon.js",
+		"--# Clipperz/PM/UI/Components/Cards/FavIcon.js",
 		"Clipperz/PM/UI/Components/Cards/List.js",
 		"Clipperz/PM/UI/Components/Cards/Detail.js",
 		"Clipperz/PM/UI/Components/Cards/View.js",
@@ -257,7 +257,7 @@
 		"Clipperz/PM/UI/Components/AccountStatus.js",
 
 		"Clipperz/PM/UI/MainController.js",
-		"-- Clipperz/PM/UI/MainDesktopController.js",
+		"--# Clipperz/PM/UI/MainDesktopController.js",
 		"Clipperz/PM/UI/DirectLoginController.js",
 		"Clipperz/PM/UI/ExportController.js",
 		"Clipperz/PM/UI/CertificateDownloadController.js",

frontend/delta/scss/core/layout.scss

@@ -370,7 +370,59 @@ div.cardToolbar {
 						padding-right: 8px;
 						padding-left: 8px;
 					}
-					
+/*
+					.settingsToggleButton {
+//						font-family: "clipperz-font";
+//						margin-right: 10px;
+
+//						h3 {
+//							font-weight: bold;
+//							font-size: 32pt;
+//							letter-spacing: -12px;
+//						}
+
+						.badge {
+							font-family: "clipperz-font";
+							position: absolute;
+							margin-top: -2px;
+							margin-left: -18px;
+							width: auto;
+							height: 16px;
+							line-height: 16px;
+							text-align: center;
+							font-size: 8pt;
+							font-weight: bold;
+							border-radius: 8px;
+							padding: 1px 5px 0px 5px;
+
+							&.top {
+								top: 11px;
+							}
+
+							&.bottom {
+								top: 25px;
+								margin-left: -36px;
+							}
+
+							&.info {
+								color: white;
+								background-color: #1863a1;
+							}
+							
+							&.warning {
+								color: #999;
+								background-color: yellow;
+							}
+							
+							&.error {
+								color: white;
+								background-color: red;
+							}
+							
+						}
+					}
+*/
+/*					
 					.attachmentQueueToggleButton {
 						font-family: "clipperz-font";
 						margin-right: 10px;
@@ -443,7 +495,7 @@ div.cardToolbar {
 							}
 						}
 					}
-
+*/
 				}
 			}
 			
@@ -459,9 +511,22 @@ div.cardToolbar {
 
 /* IE fix for badges being shifted to left. */
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-	.attachmentQueueToggleButton {
+//	.attachmentQueueToggleButton {
+//		.badge {
+//			.top {
+//				margin-left: 37px;
+//			}
+//
+//			.bottom {
+//				margin-left: 7px;
+//			}
+//		}
+//	}
+	
+	.settingsToggleButton {
+		background-color: pink;
 		.badge {
-			.top {
+			&.top {
 				margin-left: 37px;
 			}
 
@@ -470,9 +535,11 @@ div.cardToolbar {
 			}
 		}
 	}
+	
 }
 
 $arrow-size: 8px;
+/*
 div.attachmentQueueStatus {
 	position: fixed;
 	top: calc(48px - #{$arrow-size});
@@ -784,7 +851,7 @@ div.certificateQueueStatus {
 			}
 		}
 	}
-/*
+/ *
 	.radialProgressIndicator {
 		height: 25px;
 
@@ -796,7 +863,7 @@ div.certificateQueueStatus {
 			fill: $clipperz-orange;
 		}
 	}
-*/
+* /
 }
 
 
@@ -849,7 +916,7 @@ div.certificateQueueStatus {
 
 	}
 }
-
+*/
 //=============================================================================
 
 
@@ -1220,4 +1287,52 @@ div.help {
 			}
 		}
 	}
-}
+}
+
+
+.settingsToggleButton {
+	.badge {
+		font-family: "clipperz-font";
+
+//		position: absolute;
+//		margin-left: -18px;
+//		margin-top: -2px;
+		position: fixed;
+		right: 4px;
+		margin-top: -4px;
+
+		width: auto;
+		height: 16px;
+		line-height: 16px;
+		text-align: center;
+		font-size: 8pt;
+		font-weight: bold;
+		border-radius: 8px;
+		padding: 1px 5px 0px 5px;
+
+		&.top {
+			top: 11px;
+		}
+
+		&.bottom {
+			top: 25px;
+			margin-left: -36px;
+		}
+
+		&.info {
+			color: white;
+			background-color: #1863a1;
+		}
+		
+		&.warning {
+			color: #999;
+			background-color: yellow;
+		}
+		
+		&.error {
+			color: white;
+			background-color: red;
+		}
+		
+	}
+}

frontend/delta/scss/style/settingsPanel.scss

@@ -44,6 +44,59 @@ refer to http://www.clipperz.com.
 		& > div {
 			border-top: 1px solid white;
 
+			& > div.notifications {
+				background-color: gray;
+				border-bottom: 1px solid white;
+				
+				.notification {
+					@include flexbox();
+					@include flex-direction(row);
+					padding: 3px;
+
+					&.info {
+						color: white;
+						background-color: #1863a1;
+					}
+		
+					&.warning {
+						color: #999;
+						background-color: yellow;
+					}
+		
+					&.error {
+						color: white;
+						background-color: red;
+					}
+					
+					span.acknowledge {
+						@include flex(none);
+						cursor: pointer;
+						padding: 4px;
+						
+						span {
+							display: block;
+							@include icon-font();
+							font-size: 5pt;
+							background-color: white;
+							color: gray;
+							width: 11px;
+							padding-left: 4px;
+							height: 14px;
+							border-radius: 7px;
+							line-height: 14px;
+						}
+					}
+					
+					span.message {
+						@include flex(auto);
+//						overflow: auto;
+						overflow-x: auto;
+						overflow-y: visible;
+						padding: 4px;
+					}
+				}
+			}
+
 			& > ul > li {
 //				padding: 10px;
 //				padding-right: 0px;