Merge pull request #1867 from annando/1508-vier-popup-menu

Vier: The popup menus now popup automatically

diff --git a/view/theme/vier/dark.css b/view/theme/vier/dark.css
index d9e4cdb3d032edcd3bfe5291fa191e68fab5a6e0..9501ecfe0d9307cb30c9159793603b7ccc3c2157 100644 (file)
--- a/view/theme/vier/dark.css
+++ b/view/theme/vier/dark.css
@@ -58,4 +58,4 @@ input#side-peoplefind-submit, input#side-follow-submit {
 
 li :hover {
        color: #767676 !important;      
-}
\ No newline at end of file
+}

diff --git a/view/theme/vier/plus.css b/view/theme/vier/plus.css
index f334d6cdd12f8ce91d6a46fca29f8c276e331de3..2ae6e5000523c849e0d098067802612b34f106d1 100644 (file)
--- a/view/theme/vier/plus.css
+++ b/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 {

diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index f312b1710319f32593cc6c570d042cd8d24d4b7a..77ffb53fd1903bf9d7ee28f6f69ec16c51abf95f 100644 (file)
--- a/view/theme/vier/style.css
+++ b/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;

diff --git a/view/theme/vier/templates/contact_template.tpl b/view/theme/vier/templates/contact_template.tpl
new file mode 100644 (file)
index 0000000..5271112
--- /dev/null
+++ b/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>

diff --git a/view/theme/vier/templates/nav.tpl b/view/theme/vier/templates/nav.tpl
index ef52e77894ae7f5ee6853a463c69dcb741fa892a..11add9e8a81d05cc87cfd00794c8e1464f8ad5d7 100644 (file)
--- a/view/theme/vier/templates/nav.tpl
+++ b/view/theme/vier/templates/nav.tpl
@@ -25,7 +25,7 @@
                        </li>
                {{/if}}
                
-               <li role="menu" aria-haspopup="true" id="nav-site-linkmenu" class="nav-menu-icon"><a rel="#nav-site-menu"><span class="icon s22 icon-question"><span class="sr-only">{{$nav.help.3}}</span></span></a>
+               <li role="menu" aria-haspopup="true" id="nav-site-linkmenu" class="nav-menu-icon"><a><span class="icon s22 icon-question"><span class="sr-only">{{$nav.help.3}}</span></span></a>
                        <ul id="nav-site-menu" class="menu-popup">
                                {{if $nav.help}} <li role="menuitem"><a class="{{$nav.help.2}}" href="{{$nav.help.0}}" title="{{$nav.help.3}}" >{{$nav.help.1}}</a></li>{{/if}}
                                <li role="menuitem"><a class="{{$nav.about.2}}" href="{{$nav.about.0}}" title="{{$nav.about.3}}" >{{$nav.about.1}}</a></li>
@@ -34,7 +34,7 @@
                </li>
 
                {{if $nav.notifications}}
-                       <li role="menu" aria-haspopup="true" id="nav-notifications-linkmenu" class="nav-menu-icon"><a accesskey="f" href="{{$nav.notifications.0}}" rel="#nav-notifications-menu" title="{{$nav.notifications.1}}"><span class="icon s22 icon-bell tilted-icon"><span class="sr-only">{{$nav.notifications.1}}</span></span></a>
+                       <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>
                                <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>
@@ -45,11 +45,8 @@
                {{/if}}
                
                {{if $userinfo}}
-                       <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 role="menu" aria-haspopup="true" id="nav-user-linkmenu" class="nav-menu-icon">
-                               <a accesskey="u" rel="#nav-user-menu" title="{{$sitelocation}}"><img src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"></a>
+                       <li role="menu" aria-haspopup="true" id="nav-user-linkmenu" class="nav-menu">
+                               <a accesskey="u" 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}}
@@ -84,14 +81,13 @@
 
                {{if $nav.admin}}
                        <li role="menuitem" id="nav-admin-link" class="nav-menu">
-                               <!-- <a class="{{$nav.admin.2}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" >{{$nav.admin.1}}</a> -->
                                <a accesskey="a" class="{{$nav.admin.2}} icon-sliders" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" ><span class="sr-only">{{$nav.admin.3}}</span></a>
                        </li>
                {{/if}}
                
                {{if $nav.apps}}
                        <li role="menu" aria-haspopup="true" id="nav-apps-link" class="nav-menu {{$sel.apps}}">
-                               <a class=" {{$nav.apps.2}}" rel="#nav-apps-menu" title="{{$nav.apps.3}}" >{{$nav.apps.1}}</a>
+                               <a class=" {{$nav.apps.2}}" title="{{$nav.apps.3}}" >{{$nav.apps.1}}</a>
                                <ul id="nav-apps-menu" class="menu-popup">
                                        {{foreach $apps as $ap}}
                                        <li role="menuitem">{{$ap}}</li>

diff --git a/view/theme/vier/templates/search_item.tpl b/view/theme/vier/templates/search_item.tpl
index b0e6a310f49543ec7b93a5f8bc4c73075ee73a85..d8cad5cd0ce8a2868985b9691897cfb860980336 100644 (file)
--- a/view/theme/vier/templates/search_item.tpl
+++ b/view/theme/vier/templates/search_item.tpl
@@ -9,13 +9,13 @@
 <div class="wall-item-container {{$item.indent}} {{$item.shiny}} ">
        <div class="wall-item-item">
                <div class="wall-item-info">
-                       <div class="contact-photo-wrapper"
-                               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)">
+                       <div class="contact-photo-wrapper">
+                               <!-- 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)"> -->
                                <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>
-                               <a rel="#wall-item-photo-menu-{{$item.id}}" class="contact-photo-menu-button icon s16 menu" id="wall-item-photo-menu-button-{{$item.id}}">menu</a>
+                               <!-- <a rel="#wall-item-photo-menu-{{$item.id}}" class="contact-photo-menu-button icon s16 menu" id="wall-item-photo-menu-button-{{$item.id}}">menu</a> -->
                                <ul role="menu" aria-haspopup="true" class="wall-item-menu menu-popup" id="wall-item-photo-menu-{{$item.id}}">
                                {{$item.item_photo_menu}}
                                </ul>

diff --git a/view/theme/vier/templates/wall_thread.tpl b/view/theme/vier/templates/wall_thread.tpl
index 41c978942be268da592420f5f0d5303e6aa4f033..25b97a0cc5747968faa198b1c5ccdad3f14ba961 100644 (file)
--- a/view/theme/vier/templates/wall_thread.tpl
+++ b/view/theme/vier/templates/wall_thread.tpl
@@ -9,14 +9,6 @@
                        <span id="hide-comments-{{$item.id}}" 
                                class="hide-comments fakelink" 
                                onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span>
-<!--                   {{if $item.thread_level==3}} - 
-                       <span id="hide-thread-{{$item}}-id"
-                               class="fakelink"
-                               onclick="showThread({{$item.id}});">expand</span> /
-                       <span id="hide-thread-{{$item}}-id"
-                               class="fakelink"
-                               onclick="hideThread({{$item.id}});">collapse</span> thread{{/if}}
--->
                </div>
                <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
        {{else}}
@@ -38,13 +30,10 @@
 {{/if}}
        <div class="wall-item-item">
                <div class="wall-item-info">
-                       <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}}')" 
-                               onmouseout="t{{$item.id}}=setTimeout('closeMenu(\'wall-item-photo-menu-button-{{$item.id}}\'); closeMenu(\'wall-item-photo-menu-{{$item.id}}\');',200)">
+                       <div class="contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
                                <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>
-                               <a rel="#wall-item-photo-menu-{{$item.id}}" class="contact-photo-menu-button icon s16 menu" id="wall-item-photo-menu-button-{{$item.id}}"></a>
                                <ul role="menu" aria-haspopup="true" class="contact-menu menu-popup" id="wall-item-photo-menu-{{$item.id}}">
                                {{$item.item_photo_menu}}
                                </ul>
@@ -60,7 +49,7 @@
                </div>
                <div role="heading" aria-level="{{$item.thread_level}}" class="wall-item-actions-author">
                        <a href="{{$item.profile_url}}" target="redir" title="{{$item.linktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.sparkle}}">{{$item.name}}</span></a>
-                       {{if $item.owner_url}}{{$item.via}} <a href="{{$item.owner_url}}" target="redir" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a> <!-- {{$item.vwall}} -->{{/if}}
+                       {{if $item.owner_url}}{{$item.via}} <a href="{{$item.owner_url}}" target="redir" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a>{{/if}}
                        <span class="wall-item-ago">
                                {{if $item.plink}}<a title="{{$item.plink.title}}" href="{{$item.plink.href}}" style="color: #999">{{$item.created}}</a>{{else}} {{$item.created}} {{/if}}
                        </span>