mirror of
https://github.com/friendica/friendica
synced 2024-11-10 07:02:54 +00:00
Merge pull request #1867 from annando/1508-vier-popup-menu
Vier: The popup menus now popup automatically
This commit is contained in:
commit
daf27055b9
7 changed files with 70 additions and 30 deletions
|
@ -58,4 +58,4 @@ input#side-peoplefind-submit, input#side-follow-submit {
|
|||
|
||||
li :hover {
|
||||
color: #767676 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
34
view/theme/vier/templates/contact_template.tpl
Normal file
34
view/theme/vier/templates/contact_template.tpl
Normal 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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue