notification: slight animation for loading... and do not remove public stream items on click (we can not mark them read)

Zotlabs/Widget/Notifications.php

@@ -144,7 +144,7 @@ class Notifications {
 		$o = replace_macros(get_markup_template('notifications_widget.tpl'), array(
 			'$module' => \App::$module,
 			'$notifications' => $notifications,
-			'$loading' => t('Loading...')
+			'$loading' => t('Loading')
 		));
 
 		return $o;

include/nav.php

@@ -313,7 +313,7 @@ EOT;
 		'$sitelocation' => $sitelocation,
 		'$nav' => $x['nav'],
 		'$banner' =>  $banner,
-		'$emptynotifications' => t('Loading...'),
+		'$emptynotifications' => t('Loading'),
 		'$userinfo' => $x['usermenu'],
 		'$localuser' => local_channel(),
 		'$is_owner' => $is_owner,

view/theme/redbasic/css/style.css

@@ -306,6 +306,49 @@ nav {
 
 /* spinner end */
 
+/* jumping dots */
+.jumping-dots span {
+	position: relative;
+	bottom: 0px;
+	transition-timing-function: ease-in-out;
+	-webkit-animation: jump 1s infinite;
+	animation: jump 1s infinite;
+}
+
+.jumping-dots .dot-1 {
+	-webkit-animation-delay: 200ms;
+	animation-delay: 200ms;
+}
+
+.jumping-dots .dot-2 {
+	-webkit-animation-delay: 400ms;
+	animation-delay: 400ms;
+}
+
+.jumping-dots .dot-3 {
+	-webkit-animation-delay: 600ms;
+	animation-delay: 600ms;
+}
+
+@-webkit-keyframes jump {
+	0% {
+		bottom: 0px;
+	}
+	20% {
+		bottom: 3px;
+	}
+	40% {
+		bottom: 0px;
+	}
+}
+
+@keyframes jump {
+	0%   {bottom: 0px;}
+	20%  {bottom: 3px;}
+	40%  {bottom: 0px;}
+}
+/* jumping dots end */
+
 /* footer */
 
 footer {

view/tpl/navbar_tucson.tpl

@@ -113,7 +113,7 @@
 			<div id="navbar-network-menu" class="dropdown-menu" rel="network">
 				<a class="dropdown-item" id="nav-network-see-all" href="{{$nav.network.all.0}}">{{$nav.network.all.1}}</a>
 				<a class="dropdown-item" id="nav-network-mark-all" href="#" onclick="markRead('network'); return false;">{{$nav.network.mark.1}}</a>
-				{{$emptynotifications}}
+				{{$emptynotifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 			</div>
 		</li>
 		{{/if}}
@@ -126,7 +126,7 @@
 			<div id="navbar-home-menu" class="dropdown-menu" rel="home">
 				<a class="dropdown-item" id="nav-home-see-all" href="{{$nav.home.all.0}}">{{$nav.home.all.1}}</a>
 				<a class="dropdown-item" id="nav-home-mark-all" href="#" onclick="markRead('home'); return false;">{{$nav.home.mark.1}}</a>
-				{{$emptynotifications}}
+				{{$emptynotifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 			</div>
 		</li>
 		{{/if}}
@@ -139,7 +139,7 @@
 			<div id="navbar-mail-menu" class="dropdown-menu" rel="messages">
 				<a class="dropdown-item" id="nav-messages-see-all" href="{{$nav.messages.all.0}}">{{$nav.messages.all.1}}</a>
 				<a class="dropdown-item" id="nav-messages-mark-all" href="#" onclick="markRead('messages'); return false;">{{$nav.messages.mark.1}}</a>
-				{{$emptynotifications}}
+				{{$emptynotifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 			</div>
 		</li>
 		{{/if}}
@@ -152,7 +152,7 @@
 			<div id="navbar-all_events-menu" class="dropdown-menu" rel="all_events">
 				<a class="dropdown-item" id="nav-all_events-see-all" href="{{$nav.all_events.all.0}}">{{$nav.all_events.all.1}}</a>
 				<a class="dropdown-item" id="nav-all_events-mark-all" href="#" onclick="markRead('all_events'); return false;">{{$nav.all_events.mark.1}}</a>
-				{{$emptynotifications}}
+				{{$emptynotifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 			</div>
 		</li>
 		{{/if}}
@@ -164,7 +164,7 @@
 			</a>
 			<div id="navbar-intros-menu" class="dropdown-menu" rel="intros">
 				<a class="dropdown-item" id="nav-intros-see-all" href="{{$nav.intros.all.0}}">{{$nav.intros.all.1}}</a>
-				{{$emptynotifications}}
+				{{$emptynotifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 			</div>
 		</li>
 		{{/if}}
@@ -177,7 +177,7 @@
 			<div id="navbar-notify-menu" class="dropdown-menu" rel="notify">
 				<a class="dropdown-item" id="nav-notify-see-all" href="{{$nav.notifications.all.0}}">{{$nav.notifications.all.1}}</a>
 				<a class="dropdown-item" id="nav-notify-mark-all" href="#" onclick="markRead('notify'); return false;">{{$nav.notifications.mark.1}}</a>
-				{{$emptynotifications}}
+				{{$emptynotifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 			</div>
 		</li>
 		{{/if}}

view/tpl/notifications_widget.tpl

@@ -43,7 +43,9 @@
 			e.preventDefault();
 
 			if(! page_load) {
+				if($(this).parent().attr('id') !== 'nav-pubs-menu')
 					$(this).fadeOut();
+
 				getData(b64mid, notify_id);
 			}
 
@@ -110,7 +112,7 @@
 					<i class="fa fa-fw fa-filter"></i> {{$notification.filter.label}}
 				</div>
 				{{/if}}
-				{{$loading}}
+				{{$loading}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 			</div>
 		</div>
 		{{/foreach}}