Vier: Use CSS for popup menu

view/theme/vier/plus.css

@@ -47,10 +47,11 @@ nav .nav-menu {
   font-weight: initial;
 }
 
+#nav-apps-menu,
 #nav-site-menu,
 #nav-notifications-menu,
 #nav-user-menu {
-  top: 35px;
+  top: 32px;
 }
 
 #nav-messages-menu {

view/theme/vier/style.css

@@ -606,6 +606,7 @@ nav .nav-menu-icon {
 nav .nav-menu-icon.selected {
   background-color: #364e59;
 }
+nav .nav-menu img,
 nav .nav-menu-icon img {
   width: 22px;
   height: 22px;
@@ -613,6 +614,10 @@ nav .nav-menu-icon img {
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
+nav .nav-menu img {
+  margin-top: -3px;
+  margin-right: 4px;
+}
 nav .nav-menu-icon .nav-notify {
   top: 3px;
 }
@@ -683,7 +688,7 @@ nav #nav-user-linklabel {
 }
 nav #nav-user-linklabel {
   padding-left: 0px;
-  margin-left: 0px;
+  margin-top: 0px;
 }
 nav #nav-help-link .menu-popup,
 nav #nav-search-link .menu-popup,
@@ -699,6 +704,17 @@ nav #nav-site-linkmenu {
   margin-left: 0px;
   margin-right: 0px;
 }
+.contact-entry-photo:hover .contact-photo-menu,
+.contact-photo-wrapper:hover .menu-popup,
+nav #nav-user-linklabel:hover #nav-user-menu,
+nav #nav-user-linkmenu:hover #nav-user-menu,
+nav #nav-apps-link:hover #nav-apps-menu,
+nav #nav-site-linkmenu:hover #nav-site-menu,
+nav #nav-notifications-linkmenu:hover #nav-notifications-menu {
+  display:block;
+  visibility:visible;
+  opacity:1;
+}
 nav #nav-notifications-linkmenu {
   margin-left: 0px;
   margin-right: 5px;
@@ -754,8 +770,12 @@ nav #nav-user-linkmenu {
         }
 
 ul.menu-popup {
+  visibility:hidden;
+  opacity:0;
+  z-index:1;
+  transition:all 0.2s ease-in-out;
+  /* display: none; */
   position: absolute;
-  display: none;
   width: 11em;
   background: #ffffff;
   color: #2d2d2d;

view/theme/vier/templates/contact_template.tpl

@@ -0,0 +1,34 @@
+
+<div class="contact-entry-wrapper" id="contact-entry-wrapper-{{$contact.id}}" >
+	<div class="contact-entry-photo-wrapper" >
+		<div class="contact-entry-photo mframe" id="contact-entry-photo-{{$contact.id}}">
+		<!-- onmouseover="if (typeof t{{$contact.id}} != 'undefined') clearTimeout(t{{$contact.id}}); openMenu('contact-photo-menu-button-{{$contact.id}}')" 
+		onmouseout="t{{$contact.id}}=setTimeout('closeMenu(\'contact-photo-menu-button-{{$contact.id}}\'); closeMenu(\'contact-photo-menu-{{$contact.id}}\');',200)" > -->
+
+			<a href="{{$contact.url}}" title="{{$contact.img_hover}}" /><img src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" /></a>
+
+			{{if !$no_contacts_checkbox}}
+			<input type="checkbox" class="contact-select" name="contact_batch[]" value="{{$contact.id}}">
+			{{/if}}
+			{{if $contact.photo_menu}}
+			<span onclick="openClose('contact-photo-menu-{{$contact.id}}');" class="fakelink contact-photo-menu-button" id="contact-photo-menu-button-{{$contact.id}}">menu</span>
+			<div class="contact-photo-menu" id="contact-photo-menu-{{$contact.id}}">
+				<ul>
+					{{foreach $contact.photo_menu as $k=>$c}}
+					{{if $c.2}}
+					<li><a class="{{$k}}" target="redir" href="{{$c.1}}">{{$c.0}}</a></li>
+					{{else}}
+					<li><a class="{{$k}}" href="{{$c.1}}">{{$c.0}}</a></li>
+					{{/if}}
+					{{/foreach}}
+				</ul>
+			</div>
+			{{/if}}
+		</div>
+			
+	</div>
+	<div class="contact-entry-photo-end" ></div>
+	<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >{{$contact.name}}</div>
+
+	<div class="contact-entry-end" ></div>
+</div>

view/theme/vier/templates/nav.tpl

@@ -45,11 +45,11 @@
 		{{/if}}
 		
 		{{if $userinfo}}
-			<li aria-hidden="true" id="nav-user-linklabel" class="nav-menu">
+			<!-- <li aria-hidden="true" id="nav-user-linklabel" class="nav-menu">
 				<a rel="#nav-user-menu" title="{{$sitelocation}}">{{$userinfo.name}}<span id="intro-update" class="nav-notify"></span></a>
-			</li>
+			</li> -->
-			<li role="menu" aria-haspopup="true" id="nav-user-linkmenu" class="nav-menu-icon">
+			<li role="menu" aria-haspopup="true" id="nav-user-linkmenu" class="nav-menu">
-				<a accesskey="u" rel="#nav-user-menu" title="{{$sitelocation}}"><img src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"></a>
+				<a accesskey="u" rel="#nav-user-menu" title="{{$sitelocation}}"><img src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"><span id="nav-user-linklabel">{{$userinfo.name}}</span><span id="intro-update" class="nav-notify"></span></a>
 				<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}}

view/theme/vier/templates/photo_item.tpl

@@ -1,78 +0,0 @@
-<div class="wall-item-container {{$indent}} {{$shiny}} ">
-	<div class="wall-item-item">
-		<div class="wall-item-info">
-			<div class="contact-photo-wrapper">
-				<a href="{{$profile_url}}" target="redir" title="{{$linktitle}}" class="wall-item-photo-link" id="wall-item-photo-link-{{$id}}">
-					<img src="{{$thumb}}" class="contact-photo{{$sparkle}}" id="wall-item-photo-{{$id}}" alt="{{$name}}" />
-				</a>
-			</div>
-		</div>
-		<div class="wall-item-actions-author">
-			<a href="{{$profile_url}}" target="redir" title="{{$linktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$sparkle}}">{{$name}}</span></a> 
-			<span class="wall-item-ago">
-				{{if $plink}}<a class="link" title="{{$plink.title}}" href="{{$plink.href}}" style="color: #999">{{$ago}}</a>{{else}} {{$ago}} {{/if}}
-				{{if $lock}}<span class="fakelink" style="color: #999" onclick="lockview(event,{{$id}});">{{$lock}}</span> {{/if}}
-			</span>
-		</div>
-		<div class="wall-item-content">
-			{{if $title}}<h2><a href="{{$plink.href}}">{{$title}}</a></h2>{{/if}}
-			{{$body}}
-		</div>
-	</div>
-	<div class="wall-item-bottom">
-		<div class="wall-item-links">
-		</div>
-		<div class="wall-item-tags">
-			{{foreach $tags as $tag}}
-				<span class='tag'>{{$tag}}</span>
-			{{/foreach}}
-
-		</div>
-	</div>
-	<div class="wall-item-bottom">
-		<div class="">
-			<!-- {{if $plink}}<a title="{{$plink.title}}" href="{{$plink.href}}"><i class="icon-link icon-large"></i></a>{{/if}} -->
-			{{if $conv}}<a href='{{$conv.href}}' id='context-{{$id}}' title='{{$conv.title}}'><i class="icon-link icon-large"></i></a>{{/if}}
-		</div>
-		<div class="wall-item-actions">
-
-			<div class="wall-item-location">{{$location}}&nbsp;</div>	
-			
-			<div class="wall-item-actions-social">
-			{{if $star}}
-				<a href="#" id="star-{{$id}}" onclick="dostar({{$id}}); return false;"  class="{{$star.classdo}}"  title="{{$star.do}}">{{$star.do}}</a>
-				<a href="#" id="unstar-{{$id}}" onclick="dostar({{$id}}); return false;"  class="{{$star.classundo}}"  title="{{$star.undo}}">{{$star.undo}}</a>
-				<a href="#" id="tagger-{{$id}}" onclick="itemTag({{$id}}); return false;" class="{{$star.classtagger}}" title="{{$star.tagger}}">{{$star.tagger}}</a>
-			{{/if}}
-			
-			{{if $vote}}
-				<a href="#" id="like-{{$id}}" title="{{$vote.like.0}}" onclick="dolike({{$id}},'like'); return false">{{$vote.like.1}}</a>
-				<a href="#" id="dislike-{{$id}}" title="{{$vote.dislike.0}}" onclick="dolike({{$id}},'dislike'); return false">{{$vote.dislike.1}}</a>
-			{{/if}}
-						
-			{{if $vote.share}}
-				<a href="#" id="share-{{$id}}" title="{{$vote.share.0}}" onclick="jotShare({{$id}}); return false">{{$vote.share.1}}</a>
-			{{/if}}			
-			</div>
-			
-			<div class="wall-item-actions-tools">
-
-				{{if $drop.pagedrop}}
-					<input type="checkbox" title="{{$drop.select}}" name="itemselected[]" class="item-select" value="{{$id}}" />
-				{{/if}}
-				{{if $drop.dropping}}
-					<a href="item/drop/{{$id}}" onclick="return confirmDelete();" class="icon delete s16" title="{{$drop.delete}}">{{$drop.delete}}</a>
-				{{/if}}
-				{{if $edpost}}
-					<a class="icon edit s16" href="{{$edpost.0}}" title="{{$edpost.1}}"></a>
-				{{/if}}
-			</div>
-			
-		</div>
-	</div>
-	<div class="wall-item-bottom">
-		<div class="wall-item-links"></div>
-		<div class="wall-item-like" id="wall-item-like-{{$id}}">{{$like}}</div>
-		<div class="wall-item-dislike" id="wall-item-dislike-{{$id}}">{{$dislike}}</div>	
-	</div>
-</div>

view/theme/vier/templates/search_item.tpl

@@ -9,9 +9,9 @@
 <div class="wall-item-container {{$item.indent}} {{$item.shiny}} ">
 	<div class="wall-item-item">
 		<div class="wall-item-info">
-			<div class="contact-photo-wrapper"
+			<div class="contact-photo-wrapper">
-				onmouseover="if (typeof t{{$item.id}} != 'undefined') clearTimeout(t{{$item.id}}); openMenu('wall-item-photo-menu-button-{{$item.id}}')" 
+				<!-- onmouseover="if (typeof t{{$item.id}} != 'undefined') clearTimeout(t{{$item.id}}); openMenu('wall-item-photo-menu-button-{{$item.id}}')" 
-				onmouseout="t{{$item.id}}=setTimeout('closeMenu(\'wall-item-photo-menu-button-{{$item.id}}\'); closeMenu(\'wall-item-photo-menu-{{$item.id}}\');',200)">
+				onmouseout="t{{$item.id}}=setTimeout('closeMenu(\'wall-item-photo-menu-button-{{$item.id}}\'); closeMenu(\'wall-item-photo-menu-{{$item.id}}\');',200)"> -->
 				<a href="{{$item.profile_url}}" target="redir" title="{{$item.linktitle}}" class="wall-item-photo-link" id="wall-item-photo-link-{{$item.id}}">
 					<img src="{{$item.thumb}}" class="contact-photo{{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
 				</a>

view/theme/vier/templates/wall_thread.tpl

@@ -38,9 +38,9 @@
 {{/if}}
 	<div class="wall-item-item">
 		<div class="wall-item-info">
-			<div class="contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}"
+			<div class="contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
-				onmouseover="if (typeof t{{$item.id}} != 'undefined') clearTimeout(t{{$item.id}}); openMenu('wall-item-photo-menu-button-{{$item.id}}')" 
+				<!-- onmouseover="if (typeof t{{$item.id}} != 'undefined') clearTimeout(t{{$item.id}}); openMenu('wall-item-photo-menu-button-{{$item.id}}')" 
-				onmouseout="t{{$item.id}}=setTimeout('closeMenu(\'wall-item-photo-menu-button-{{$item.id}}\'); closeMenu(\'wall-item-photo-menu-{{$item.id}}\');',200)">
+				onmouseout="t{{$item.id}}=setTimeout('closeMenu(\'wall-item-photo-menu-button-{{$item.id}}\'); closeMenu(\'wall-item-photo-menu-{{$item.id}}\');',200)"> -->
 				<a aria-hidden="true" href="{{$item.profile_url}}" target="redir" title="{{$item.linktitle}}" class="contact-photo-link" id="wall-item-photo-link-{{$item.id}}">
 					<img src="{{$item.thumb}}" class="contact-photo {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
 				</a>