fixes #2677 added possibility to minimise a widget (only headline will be displayed);

if a widget is displayed normal, it can now be minimised or maximised; if a widget is minimised it can only be maximised to restore the normal view;
the view status (minimized or normal) is saved within the dashboard layout and will be restored on reload

git-svn-id: http://dev.piwik.org/svn/trunk@5261 59fd770c-687e-43c8-a1e3-f5a4ff64c105

lang/en.php

@@ -518,6 +518,7 @@ $translations = array(
 	'Dashboard_WidgetPreview_js' => 'Widget preview',
 	'Dashboard_Close_js' => 'Close',
 	'Dashboard_Maximise_js' => 'Maximise',
+	'Dashboard_Minimise_js' => 'Minimise',
 	'Dashboard_TitleWidgetInDashboard_js' => 'Widget already in dashboard',
 	'Dashboard_TitleClickToAdd_js' => 'Click to add to dashboard',
 	'Dashboard_LoadingWidget_js' => 'Loading widget, please wait...',

plugins/Dashboard/templates/Dashboard.js

@@ -73,6 +73,7 @@ dashboard.prototype =
 			self.layout = layout;
 		}
 		layout = self.layout;
+		
 		widgetViewDataTableToRestore = {};
 		for(var columnNumber in layout) {
 			var widgetsInColumn = layout[columnNumber];
@@ -80,8 +81,9 @@ dashboard.prototype =
 				widgetParameters = widgetsInColumn[widgetId]["parameters"];
 				uniqueId = widgetsInColumn[widgetId]["uniqueId"];
 				widgetViewDataTableToRestore[uniqueId] = widgetParameters['viewDataTable'];
+				var isHidden = widgetsInColumn[widgetId]['isHidden'] ? widgetsInColumn[widgetId]['isHidden'] : false;
 				if(uniqueId.length>0) {
-					self.addEmptyWidget(columnNumber, uniqueId, false);
+					self.addEmptyWidget(columnNumber, uniqueId, false, isHidden);
 				}
 			}
 			self.addDummyWidgetAtBottomOfColumn(columnNumber);
@@ -131,7 +133,7 @@ dashboard.prototype =
 						'</div>');
 	},
 	
-	addEmptyWidget: function(columnNumber, uniqueId, addWidgetOnTop)
+	addEmptyWidget: function(columnNumber, uniqueId, addWidgetOnTop, isHidden)
 	{
 		var self = this;
 		
@@ -156,14 +158,22 @@ dashboard.prototype =
 						$(this).addClass('widgetHover');
 						$('.widgetTop', this).addClass('widgetTopHover');
 						$('.button#close, .button#maximise', this).show();
+						if(!$('.widgetContent', this).hasClass('hidden')) {
+							$('.button#minimise', this).show();
+						}
 					}
  				}, function() {
  					if(!self.isMaximised) {
  						$(this).removeClass('widgetHover');
  						$('.widgetTop', this).removeClass('widgetTopHover');
- 						$('.button#close, .button#maximise', this).hide();
+ 						$('.button#close, .button#maximise, .button#minimise', this).hide();
  					}
 			});
+		
+		if(isHidden) {
+			$('.widgetContent', widgetElement).toggleClass('hidden');
+		}
+		
 		$('.button#close', widgetElement)
 			.click( function(ev){
 				self.onDeleteItem(this, ev);
@@ -171,9 +181,26 @@ dashboard.prototype =
 
 		$('.button#maximise', widgetElement)
 			.click( function(ev){
-				self.onMaximiseItem(this, ev);
+				if($('.widgetContent', $(this).parents('.widget')).hasClass('hidden')) {
+					$('.widgetContent', $(this).parents('.widget')).removeClass('hidden');
+					$('.button#minimise', $(this).parents('.widget')).show();
+					self.saveLayout();
+				} else {
+					self.onMaximiseItem(this, ev);
+				}
 			});
 
+		$('.button#minimise', widgetElement)
+			.click( function(ev){
+				if(!self.isMaximised) {
+					$('.widgetContent', $(this).parents('.widget')).addClass('hidden');
+					$('.button#minimise', $(this).parents('.widget')).hide();
+					self.saveLayout();
+				} else {
+					self.widgetDialog.dialog("close");
+				}
+			});
+		
 		widgetElement.show();
 		return widgetElement;
 	},
@@ -214,9 +241,9 @@ dashboard.prototype =
 	},
 
 	closeWidgetDialog: function() {
-	    if(piwik.dashboardObject.widgetDialog) {
-	        piwik.dashboardObject.widgetDialog.dialog('close');
-	    }
+		if(piwik.dashboardObject.widgetDialog) {
+			piwik.dashboardObject.widgetDialog.dialog('close');
+		}
 	},
 	
 	onMaximiseItem: function(target, ev) {
@@ -235,6 +262,7 @@ dashboard.prototype =
 			autoOpen: true,
 			close: function(event, ui) {
 				self.isMaximised = false;
+				$('.button#minimise', self.widgetDialog).hide()
 				self.widgetDialog.dialog("destroy");
 				$('#placeholder').replaceWith(self.widgetDialog);
 				self.widgetDialog.removeAttr('style');
@@ -243,11 +271,11 @@ dashboard.prototype =
 			}
 		});
 		self.widgetDialog.find('div.piwik-graph').trigger('piwikResizeGraph');
-        $('body').click(function(ev) {
-            if(ev.target.className == "ui-widget-overlay") {
-                self.widgetDialog.dialog("close");
-            }
-        });
+		$('body').click(function(ev) {
+			if(ev.target.className == "ui-widget-overlay") {
+				self.widgetDialog.dialog("close");
+			}
+		});
 	},
 	
 	
@@ -269,15 +297,15 @@ dashboard.prototype =
 	},
 	
 	// Called by DataTables when the View type changes.
-    // We want to restore the Dashboard with the same view types as the user selected
+	// We want to restore the Dashboard with the same view types as the user selected
 	setDataTableViewChanged: function(uniqueId, newViewDataTable)
 	{
 		this.viewDataTableToSave[uniqueId] = newViewDataTable;
 		if(newViewDataTable == 'tableAllColumns' || newViewDataTable == 'tableGoals') {
-		    $('#maximise', $('#'+uniqueId)).click();
+			$('#maximise', $('#'+uniqueId)).click();
 		}
 		if(!this.isMaximised) {
-		    this.saveLayout();
+			this.saveLayout();
 		}
 	},
 	
@@ -303,7 +331,8 @@ dashboard.prototype =
 				layout[columnNumber][j] = 
 				{
 					"uniqueId": uniqueId,
-					"parameters": widgetParameters
+					"parameters": widgetParameters,
+					"isHidden": $('.widgetContent', $(widgetElement)).hasClass('hidden') ? 1 : 0
 				};
 			}
 			columnNumber++;
@@ -320,7 +349,7 @@ dashboard.prototype =
 				dataType: 'html',
 				async: true,
 				error: piwikHelper.ajaxHandleError,
-				data: {	"layout": layoutString }
+				data: { "layout": layoutString }
 			};
 			$.ajax(ajaxRequest);
 		}

plugins/Dashboard/templates/dashboard.css

@@ -35,6 +35,11 @@
 	border: 1px solid #aba494;
 }
 
+.widgetContent.hidden {
+    position: absolute;
+    top: -3000px;
+}
+
 .widgetContent h2 {
 	font-size:1.2em;
 	margin-left:10px;
@@ -75,7 +80,7 @@
 	cursor: pointer;
 }
 
-#close.button, #maximise.button {
+#close.button, #maximise.button, #minimise.button {
 	float: right;
 	display: none;
 	margin: 6px 6px 0 0;

plugins/Dashboard/templates/widgetMenu.js

@@ -72,6 +72,9 @@ widgetsHelper.getEmptyWidgetHtml = function (uniqueId, widgetName)
 					'<div class="button" id="maximise">'+
 						'<img src="themes/default/images/maximise.png" title="'+_pk_translate('Dashboard_Maximise_js')+'" />'+
 					'</div>'+
+					'<div class="button" id="minimise">'+
+						'<img src="themes/default/images/minimise.png" title="'+_pk_translate('Dashboard_Minimise_js')+'" />'+
+					'</div>'+
 					'<div class="widgetName">'+widgetName+'</div>'+
 				'</div>'+
 				'<div class="widgetContent">'+