Merge pull request #2220 from rabuzarus/2812_notify_menu
vier: some visual work on the notification menu
This commit is contained in:
commit
b41ab85feb
17
js/main.js
17
js/main.js
|
@ -247,13 +247,18 @@
|
||||||
eNotif.children("note").each(function(){
|
eNotif.children("note").each(function(){
|
||||||
e = $(this);
|
e = $(this);
|
||||||
var text = e.text().format("<span class='contactname'>"+e.attr('name')+"</span>");
|
var text = e.text().format("<span class='contactname'>"+e.attr('name')+"</span>");
|
||||||
|
var contact = ("<a href="+e.attr('url')+"><span class='contactname'>"+e.attr('name')+"</span></a>");
|
||||||
var seenclass = (e.attr('seen')==1)?"notify-seen":"notify-unseen";
|
var seenclass = (e.attr('seen')==1)?"notify-seen":"notify-unseen";
|
||||||
var html = notifications_tpl.format(e.attr('href'),
|
var html = notifications_tpl.format(
|
||||||
e.attr('photo'), // {0}
|
e.attr('href'), // {0} // link to the source
|
||||||
text, // {1}
|
e.attr('photo'), // {1} // photo of the contact
|
||||||
e.attr('date'), // {2}
|
text, // {2} // preformatet text (autor + text)
|
||||||
seenclass, // {3}
|
e.attr('date'), // {3} // date of notification (time ago)
|
||||||
new Date(e.attr('timestamp')*1000) // {4}
|
seenclass, // {4} // vistiting status of the notification
|
||||||
|
new Date(e.attr('timestamp')*1000), // {5} //date of notification
|
||||||
|
e.attr('url'), // {6} // profile url of the contact
|
||||||
|
e.text().format(""), // {7} // clean status text
|
||||||
|
contact // {8} //preformatat author (name + profile url)
|
||||||
);
|
);
|
||||||
nnm.append(html);
|
nnm.append(html);
|
||||||
});
|
});
|
||||||
|
|
|
@ -928,10 +928,33 @@ ul.menu-popup .empty {
|
||||||
background-color: #bdcdd4;
|
background-color: #bdcdd4;
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
#nav-notifications-menu img {
|
#nav-notifications-menu > li {
|
||||||
float: left;
|
display: block;
|
||||||
margin-right: 5px;
|
color: #737373;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#nav-notifications-menu > li:hover {
|
||||||
|
background-color: #e5e5e5;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
#nav-notifications-mark-all a {
|
||||||
|
color: #737373;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-notifications-menu img {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-notifications-menu .notif-desc-wrapper a {
|
||||||
|
display: inline;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
#nav-notifications-menu .contactname {
|
#nav-notifications-menu .contactname {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
@ -947,6 +970,25 @@ ul.menu-popup .empty {
|
||||||
padding: 7px 7px 0px 0px;
|
padding: 7px 7px 0px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.notif-entry-wrapper {
|
||||||
|
padding: 5px 10px;
|
||||||
|
min-height: 32px;
|
||||||
|
/*border-bottom: 1px solid #DDDDDD;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.notif-photo-wrapper {
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notif-photo-wrapper a {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notif-desc-wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
right_aside {
|
right_aside {
|
||||||
display: none;
|
display: none;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
|
@ -109,7 +109,15 @@
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
<ul id="nav-notifications-template" style="display:none;" rel="template">
|
<ul id="nav-notifications-template" style="display:none;" rel="template">
|
||||||
<li class="{4}"><a href="{0}" title="{5}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
|
<li class="{4}" onclick="location.href='{0}';">
|
||||||
|
<div class="notif-entry-wrapper">
|
||||||
|
<div class="notif-photo-wrapper"><a href="{6}"><img data-src="{1}"></a></div>
|
||||||
|
<div class="notif-desc-wrapper">
|
||||||
|
{8}{7}
|
||||||
|
<div><time class="notif-when" title="{5}">{3}</time></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<!--
|
<!--
|
||||||
<div class="icon-flag" style="position: fixed; bottom: 10px; left: 20px; z-index:9;">{{$langselector}}</div>
|
<div class="icon-flag" style="position: fixed; bottom: 10px; left: 20px; z-index:9;">{{$langselector}}</div>
|
||||||
|
|
Loading…
Reference in a new issue