From 73882ff58f7b8aa4b9e95a8fce018cfe7370548f Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Thu, 3 Jan 2019 23:07:03 -0500
Subject: [PATCH] [vier] Add message icon link in header nav

---
 view/theme/vier/mobile.css        |  4 ++--
 view/theme/vier/style.css         | 29 +++++++++++--------------
 view/theme/vier/templates/nav.tpl | 35 +++++++++++++++++++++++--------
 3 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index b528ca4bd..bf7922287 100644
--- a/view/theme/vier/mobile.css
+++ b/view/theme/vier/mobile.css
@@ -60,8 +60,8 @@ nav ul {
   .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
     max-width: 350px;
   }
-  a.desktop-view { display: none; }
-  a.mobile-view { display: initial; }
+  .desktop-view { display: none; }
+  .mobile-view { display: initial; }
   #nav-apps-link { display: none; }
 
   .wall-item-container .wall-item-info { width: auto; }
diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index 6c4f2b20f..eedbe09a4 100644
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -365,10 +365,12 @@ pre code {
 	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 }
 
+.desktop-view { display: none; }
+
 /* some settings for different form-factors */
 @media (min-width: 601px) {
-	a.mobile-view { display: none };
-	a.desktop-view { display: initial };
+	.mobile-view { display: none!important; }
+	.desktop-view { display: initial; }
 }
 
 /* tool */
@@ -685,8 +687,11 @@ nav .nav-menu img {
 	margin-right: 4px;
 }
 
-nav .nav-menu-icon .nav-notify {
+nav .nav-menu > a > .nav-notify,
+nav .nav-menu-icon > a > .nav-notify {
+	position: absolute;
 	top: 3px;
+	right: -5px;
 }
 nav .nav-menu-label {
 	margin: 3px 5px 0px;
@@ -738,33 +743,27 @@ nav .nav-menu:hover {
 
 nav .nav-notify {
 	display: none;
-	position: absolute;
- /*  background-color: #36c; */
-	 background-color: #F80;
-	/* background-color: #19aeff; */
+	background-color: #F80;
 	-moz-border-radius: 5px 5px 5px 5px;
 	-webkit-border-radius: 5px 5px 5px 5px;
 	border-radius: 5px 5px 5px 5px;
 	font-size: 10px;
 	padding: 1px 3px;
-	top: 0px;
-	/* right: -10px; */
-	right: -5px;
 	min-width: 15px;
-	/* text-align: right; */
 	text-align: center;
 	color: white;
 }
-
 nav .nav-notify.show {
-	display: block;
+	display: inline-block;
 }
+
 nav #nav-help-link,
 nav #nav-search-link,
 nav #nav-directory-link,
 nav #nav-apps-link,
 nav #nav-apps-link,
 nav #nav-login-link,
+nav #nav-messages-linkmenu,
 nav #nav-notifications-linkmenu,
 nav #nav-site-linkmenu,
 nav #nav-contacts-linkmenu,
@@ -845,10 +844,6 @@ nav #nav-user-linkmenu {
 	padding: 5px 10px; */
 }
 
-#mail-update {
-	top: 56px;
-}
-
 .notify-unseen {background-color: #FFF; }
 
 .notify-seen {
diff --git a/view/theme/vier/templates/nav.tpl b/view/theme/vier/templates/nav.tpl
index 777df44cd..5f62773db 100644
--- a/view/theme/vier/templates/nav.tpl
+++ b/view/theme/vier/templates/nav.tpl
@@ -14,16 +14,20 @@
 		</li>
 		{{if $nav.home}}
 			<li role="menuitem" id="nav-home-link" class="nav-menu {{$sel.home}}">
-				<a accesskey="p" class="{{$nav.home.2}} desktop-view" href="{{$nav.home.0}}" title="{{$nav.home.3}}" >{{$nav.home.1}}</a>
-				<a class="{{$nav.home.2}} mobile-view" href="{{$nav.home.0}}" title="{{$nav.home.3}}" ><i class="icon s22 icon-home"></i></a>
-				<span id="home-update" class="nav-notify"></span>
+				<a accesskey="p" class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" >
+					<span class="desktop-view">{{$nav.home.1}}</span>
+					<i class="icon s22 icon-home mobile-view"><span class="sr-only">{{$nav.home.1}}</span></i>
+					<span id="home-update" class="nav-notify"></span>
+				</a>
 			</li>
 		{{/if}}
 		{{if $nav.network}}
 			<li role="menuitem" id="nav-network-link" class="nav-menu {{$sel.network}}">
-				<a accesskey="n" class="{{$nav.network.2}} desktop-view" href="{{$nav.network.0}}" title="{{$nav.network.3}}" >{{$nav.network.1}}</a>
-				<a class="{{$nav.network.2}} mobile-view" href="{{$nav.network.0}}" title="{{$nav.network.3}}" ><i class="icon s22 icon-th"></i></a>
-				<span id="net-update" class="nav-notify"></span>
+				<a accesskey="n" class="{{$nav.network.2}}" href="{{$nav.network.0}}" title="{{$nav.network.3}}" >
+					<span class="desktop-view">{{$nav.network.1}}</span>
+					<i class="icon s22 icon-th mobile-view"><span class="sr-only">{{$nav.network.1}}</span></i>
+					<span id="net-update" class="nav-notify"></span>
+				</a>
 			</li>
 		{{/if}}
 		{{if $nav.events}}
@@ -48,9 +52,22 @@
 			</ul>
 		</li>
 
+		{{if $nav.messages}}
+			<li role="menu" aria-haspopup="true" id="nav-messages-linkmenu" class="nav-menu-icon">
+				<a href="{{$nav.messages.0}}" title="{{$nav.messages.1}}">
+					<span class="icon s22 icon-envelope"><span class="sr-only">{{$nav.messages.1}}</span></span>
+					<span id="mail-update" class="nav-notify"></span>
+				</a>
+			</li>
+		{{/if}}
+
+
 		{{if $nav.notifications}}
-			<li role="menu" aria-haspopup="true" id="nav-notifications-linkmenu" class="nav-menu-icon"><a title="{{$nav.notifications.1}}"><span class="icon s22 icon-bell tilted-icon"><span class="sr-only">{{$nav.notifications.1}}</span></span></a>
-				<span id="notify-update" class="nav-notify"></span>
+			<li role="menu" aria-haspopup="true" id="nav-notifications-linkmenu" class="nav-menu-icon">
+				<a title="{{$nav.notifications.1}}">
+					<span class="icon s22 icon-bell tilted-icon"><span class="sr-only">{{$nav.notifications.1}}</span></span>
+					<span id="notify-update" class="nav-notify"></span>
+				</a>
 				<ul id="nav-notifications-menu" class="menu-popup">
 					<li role="menuitem" id="nav-notifications-mark-all"><a onclick="notifyMarkAll(); return false;">{{$nav.notifications.mark.1}}</a></li>
 					<li role="menuitem" id="nav-notifications-see-all"><a href="{{$nav.notifications.all.0}}">{{$nav.notifications.all.1}}</a></li>
@@ -65,7 +82,7 @@
 				<ul id="nav-user-menu" class="menu-popup">
 					{{if $nav.introductions}}<li role="menuitem"><a class="{{$nav.introductions.2}}" href="{{$nav.introductions.0}}" title="{{$nav.introductions.3}}" >{{$nav.introductions.1}}</a><span id="intro-update-li" class="nav-notify"></span></li>{{/if}}
 					{{if $nav.contacts}}<li role="menuitem"><a class="{{$nav.contacts.2}}" href="{{$nav.contacts.0}}" title="{{$nav.contacts.3}}" >{{$nav.contacts.1}}</a></li>{{/if}}
-					{{if $nav.messages}}<li role="menuitem"><a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" >{{$nav.messages.1}}</a><span id="mail-update" class="nav-notify"></span></a></li>{{/if}}
+					{{if $nav.messages}}<li role="menuitem"><a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" >{{$nav.messages.1}} <span id="mail-update-li" class="nav-notify"></span></a></li>{{/if}}
 					{{if $nav.manage}}<li role="menuitem"><a class="{{$nav.manage.2}}" href="{{$nav.manage.0}}" title="{{$nav.manage.3}}">{{$nav.manage.1}}</a></li>{{/if}}
 					{{if $nav.usermenu.1}}<li role="menuitem"><a class="{{$nav.usermenu.1.2}}" href="{{$nav.usermenu.1.0}}" title="{{$nav.usermenu.1.3}}">{{$nav.usermenu.1.1}}</a></li>{{/if}}
 					{{if $nav.settings}}<li role="menuitem"><a class="{{$nav.settings.2}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}">{{$nav.settings.1}}</a></li>{{/if}}