UI for connection is lost

css/style.css

@@ -190,6 +190,29 @@
 	z-index:20; 
 }
 
+#warning-connection-lost{
+	padding: 6px 0;
+	text-align: center;
+	color: #ffffff;
+	background-color: #CE7070;
+	font-size: 16px;
+	font-weight: bold;
+}
+
+#warning-connection-lost img {
+	margin-right: 4px;
+	float: right;
+	height: 20px;
+}
+
+#connection-lost{
+	right: 5px;
+	background: #fff;
+	width: 95%;
+	position: absolute;
+	top: 87px;
+}
+
 
 /* override WebODF styling here */
 

js/documents.js

@@ -93,6 +93,19 @@ var documentsMain = {
 		
 		hideProgress : function(){
 			$('.documentslist .progress').hide();
+		},
+		
+		showLostConnection : function(){
+			$('#memberList .memberListButton').css({opacity : 0.3});
+			$('#odf-toolbar').children(':not(#document-title)').hide();
+			$('<div id="connection-lost"></div>').prependTo('#memberList');
+			$('<div id="warning-connection-lost">' + t('documents', 'No connection to server. Trying to reconnect.') +'<img src="'+ OC.imagePath('core', 'loading-dark.gif') +'" alt="" /></div>').appendTo('#odf-toolbar');
+		},
+		
+		hideLostConnection : function() {
+			$('#connection-lost,#warning-connection-lost').remove();
+			$('#odf-toolbar').children(':not(#document-title)').show();
+			$('#memberList .memberListButton').css({opacity : 1});
 		}
 	},