Vier: Use CSS for popup menu

This commit is contained in:
Michael Vogel 2015-08-27 00:02:06 +02:00
parent 2e09ce6847
commit 92fbf1bcbd
9 changed files with 79 additions and 102 deletions

View file

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

View file

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

View file

@ -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 file

@ -45,11 +45,11 @@
{{/if}} {{/if}}
{{if $userinfo}} {{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> <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"> <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.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.contacts}}<li role="menuitem"><a class="{{$nav.contacts.2}}" href="{{$nav.contacts.0}}" title="{{$nav.contacts.3}}" >{{$nav.contacts.1}}</a></li>{{/if}}

View file

@ -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 file

@ -9,9 +9,9 @@
<div class="wall-item-container {{$item.indent}} {{$item.shiny}} "> <div class="wall-item-container {{$item.indent}} {{$item.shiny}} ">
<div class="wall-item-item"> <div class="wall-item-item">
<div class="wall-item-info"> <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}}"> <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}}" /> <img src="{{$item.thumb}}" class="contact-photo{{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
</a> </a>

View file

@ -38,9 +38,9 @@
{{/if}} {{/if}}
<div class="wall-item-item"> <div class="wall-item-item">
<div class="wall-item-info"> <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}}"> <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}}" /> <img src="{{$item.thumb}}" class="contact-photo {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
</a> </a>