nupplaPhil/friendica
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

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

Browse source 
Vier: The popup menus now popup automatically
This commit is contained in:
Tobias Diekershoff 2015-08-31 06:53:20 +02:00
parent 3d614a0fcd cc3419f101
commit daf27055b9
7 changed files with 70 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
view/theme/vier/dark.css
View file

@ -58,4 +58,4 @@ input#side-peoplefind-submit, input#side-follow-submit {
li :hover { li :hover {
color: #767676 !important; color: #767676 !important;
} }

3
view/theme/vier/plus.css
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 {

24
view/theme/vier/style.css
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;

34
view/theme/vier/templates/contact_template.tpl Normal file
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>

14
view/theme/vier/templates/nav.tpl
View file

@ -25,7 +25,7 @@
</li> </li>
{{/if}} {{/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"> <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}} {{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> <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> </li>
{{if $nav.notifications}} {{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> <span id="notify-update" class="nav-notify"></span>
<ul id="nav-notifications-menu" class="menu-popup"> <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-mark-all"><a onclick="notifyMarkAll(); return false;">{{$nav.notifications.mark.1}}</a></li>
@ -45,11 +45,8 @@
{{/if}} {{/if}}
{{if $userinfo}} {{if $userinfo}}
<li aria-hidden="true" id="nav-user-linklabel" class="nav-menu"> <li role="menu" aria-haspopup="true" id="nav-user-linkmenu" class="nav-menu">
<a rel="#nav-user-menu" title="{{$sitelocation}}">{{$userinfo.name}}<span id="intro-update" class="nav-notify"></span></a> <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>
</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>
<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}}
@ -84,14 +81,13 @@
{{if $nav.admin}} {{if $nav.admin}}
<li role="menuitem" id="nav-admin-link" class="nav-menu"> <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> <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> </li>
{{/if}} {{/if}}
{{if $nav.apps}} {{if $nav.apps}}
<li role="menu" aria-haspopup="true" id="nav-apps-link" class="nav-menu {{$sel.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"> <ul id="nav-apps-menu" class="menu-popup">
{{foreach $apps as $ap}} {{foreach $apps as $ap}}
<li role="menuitem">{{$ap}}</li> <li role="menuitem">{{$ap}}</li>

8
view/theme/vier/templates/search_item.tpl
View file

@ -9,13 +9,13 @@
<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>
<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}}"> <ul role="menu" aria-haspopup="true" class="wall-item-menu menu-popup" id="wall-item-photo-menu-{{$item.id}}">
{{$item.item_photo_menu}} {{$item.item_photo_menu}}
</ul> </ul>

15
view/theme/vier/templates/wall_thread.tpl
View file

@ -9,14 +9,6 @@
<span id="hide-comments-{{$item.id}}" <span id="hide-comments-{{$item.id}}"
class="hide-comments fakelink" class="hide-comments fakelink"
onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span> 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>
<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;"> <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
{{else}} {{else}}
@ -38,13 +30,10 @@
{{/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}}')"
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>
<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}}"> <ul role="menu" aria-haspopup="true" class="contact-menu menu-popup" id="wall-item-photo-menu-{{$item.id}}">
{{$item.item_photo_menu}} {{$item.item_photo_menu}}
</ul> </ul>
@ -60,7 +49,7 @@
</div> </div>
<div role="heading" aria-level="{{$item.thread_level}}" class="wall-item-actions-author"> <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> <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"> <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}} {{if $item.plink}}<a title="{{$item.plink.title}}" href="{{$item.plink.href}}" style="color: #999">{{$item.created}}</a>{{else}} {{$item.created}} {{/if}}
</span> </span>