revamped reconnection notification, closes #354

public/language/en/footer.json

@@ -1,7 +1,4 @@
 {
-	"disconnect.title": "Socket Disconnect",
-	"disconnect.message": "Looks like you disconnected, try reloading the page.",
-	"disconnect.reload_button": "Reload",
 	"chat.chatting_with": "Chat with <span id='chat-with-name'></span>",
 	"chat.placeholder": "type chat message, here press enter to send",
 	"chat.send": "Send",

public/src/app.js

@@ -23,8 +23,8 @@ var socket,
 				} else {
 					socket = io.connect(config.socket.address);
 
-					var reconnecting = false;
-					var reconnectTries = 0;
+					var reconnecting = false,
+						reconnectEl, reconnectTimer;
 
 					socket.on('event:connect', function (data) {
 						app.username = data.username;
@@ -40,17 +40,12 @@ var socket,
 
 					socket.on('connect', function (data) {
 						if (reconnecting) {
-							setTimeout(function () {
-								app.alert({
-									alert_id: 'connection_alert',
-									title: 'Connected',
-									message: 'Connection successful.',
-									type: 'success',
-									timeout: 5000
-								});
-							}, 1000);
+							reconnectEl.html('<i class="icon-ok"></i> Connected!');
 							reconnecting = false;
-							reconnectTries = 0;
+
+							setTimeout(function() {
+								reconnectEl.removeClass('active');
+							}, 3000);
 						}
 
 						socket.emit('api:updateHeader', {
@@ -63,33 +58,11 @@ var socket,
 					});
 
 					socket.on('reconnecting', function (data) {
-						function showDisconnectModal() {
-							$('#disconnect-modal').modal({
-								backdrop: 'static',
-								show: true
-							});
-
-							$('#reload-button').on('click', function () {
-								$('#disconnect-modal').modal('hide');
-								window.location.reload();
-							});
-						}
-
+						if (!reconnectEl) reconnectEl = $('#reconnect');
 						reconnecting = true;
-						reconnectTries++;
 
-						if (reconnectTries > 4) {
-							showDisconnectModal();
-							return;
-						}
-
-						app.alert({
-							alert_id: 'connection_alert',
-							title: 'Reconnecting',
-							message: 'You have disconnected from NodeBB, we will try to reconnect you. <br/><i class="icon-refresh icon-spin"></i>',
-							type: 'warning',
-							timeout: 5000
-						});
+						reconnectEl.addClass('active');
+						reconnectEl.html('<i class="icon-spinner icon-spin"></i> Reconnecting...');
 					});
 
 					socket.on('api:user.get_online_users', function (users) {

public/templates/footer.tpl

@@ -2,22 +2,6 @@
 
 	</div><!--END container -->
 
-	<div id="disconnect-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="You were disconnected" aria-hidden="true">
-		<div class="modal-dialog">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h3 id="myModalLabel">[[footer:disconnect.title]]</h3>
-				</div>
-				<div class="modal-body">
-					<span id="disconnect-text">[[footer:disconnect.message]]</span>
-				</div>
-				<div class="modal-footer">
-					<a id="reload-button" href="/" class="btn btn-primary">[[footer:disconnect.reload_button]]</a>
-				</div>
-			</div><!-- /.modal-content -->
-		</div><!-- /.modal-dialog -->
-	</div><!-- /.modal -->
-
 	<div id="chat-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true">
 		<div class="modal-dialog">
 			<div class="modal-content">

public/templates/header.tpl

@@ -69,6 +69,10 @@
 				</form>
 
 				<ul id="logged-in-menu" class="nav navbar-nav navbar-right hide">
+					<li>
+						<a href="#" id="reconnect"></a>
+					</li>
+
 					<li id="notifications-list" class="notifications dropdown text-center hidden-xs">
 						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="notif_dropdown"><i class="icon-circle-blank"></i></a>
 						<ul id="notif-list" class="dropdown-menu" aria-labelledby="notif_dropdown">

public/themes/vanilla/header.less

@@ -65,3 +65,19 @@
 		overflow: hidden;
 	}
 }
+
+#reconnect {
+	font-size: 14px;
+	-webkit-transition: opacity 250ms linear;
+	-moz-transition: opacity 250ms linear;
+	-ms-transition: opacity 250ms linear;
+	-o-transition: opacity 250ms linear;
+	transition: opacity 250ms linear;
+	-moz-opacity: 0.00;
+	opacity: 0.00;
+
+	&.active {
+		-moz-opacity: 1;
+		opacity: 1;
+	}
+}