Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

update notification's classes and add fix for FF flex bug

Browse source
This commit is contained in:
Felix Niklas 2015-06-11 12:35:31 +02:00
parent 61bacb8d32
commit a0ce969a1a
4 changed files with 34 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/javascripts/app/views/dashboard/activity_stream_item.jst.eco
View file

@ -1,7 +1,7 @@
<div class="activity-entry horizontal"> <div class="activity-entry">
<div class="activity-avatar js-avatar"></div> <div class="activity-avatar js-avatar"></div>
<a href="<%- @item.link %>" class="activity-body flex horizontal"> <a href="<%- @item.link %>" class="activity-body">
<span class="activity-message flex"> <span class="activity-message">
<span class="activity-text"> <span class="activity-text">
<%= @item.created_by.displayName() %> <%- @T( @item.type ) %> <%- @T( @item.object_name ) %><% if @item.title: %> (<%= @item.title %>)<% end %> <%= @item.created_by.displayName() %> <%- @T( @item.type ) %> <%- @T( @item.object_name ) %><% if @item.title: %> (<%= @item.title %>)<% end %>
</span> </span>

2
app/assets/javascripts/app/views/widget/online_notification.jst.eco
View file

@ -1,7 +1,7 @@
<div class="popover popover--notifications js-notificationsContainer" role="tooltip"> <div class="popover popover--notifications js-notificationsContainer" role="tooltip">
<div class="arrow"></div> <div class="arrow"></div>
<div class="popover-notificationsHeader"> <div class="popover-notificationsHeader">
<span class="popover-title"></span> <div class="popover-title"></div>
<a class="popover-notificationsMarkRead js-markAllAsRead"><%- @T( 'Mark all as read' ) %></a> <a class="popover-notificationsMarkRead js-markAllAsRead"><%- @T( 'Mark all as read' ) %></a>
</div> </div>
<div class="popover-content"></div> <div class="popover-content"></div>

10
app/assets/javascripts/app/views/widget/online_notification_content.jst.eco
View file

@ -1,15 +1,15 @@
<% if @items.length: %> <% if @items.length: %>
<% for item in @items: %> <% for item in @items: %>
<div class="activity-entry horizontal"> <div class="activity-entry<% if item.seen: %> is-inactive<% end %>">
<a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" href="<%- item.created_by.uiUrl() %>"> <a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" href="<%- item.created_by.uiUrl() %>">
<%- item.created_by.avatar() %> <%- item.created_by.avatar() %>
</a> </a>
<a href="<%- item.link %>" class="activity-body flex horizontal"> <a href="<%- item.link %>" class="activity-body">
<span class="activity-message flex"> <span class="activity-message">
<span class="activity-text <% if item.seen: %>inactive<% end %>"> <span class="activity-text">
<%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %> <%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %>
</span> </span>
<span class="activity-time <% if item.seen: %>inactive<% end %> humanTimeFromNow" data-time="<%- item.created_at %>">?</span> <span class="activity-time humanTimeFromNow" data-time="<%- item.created_at %>">?</span>
</span> </span>
</a> </a>
</div> </div>

35
app/assets/stylesheets/zammad.css.scss
View file

@ -642,10 +642,6 @@ table {
overflow-y: scroll; overflow-y: scroll;
} }
.inactive {
color: #ddd !important;
}
/* /*
#content > *:not(.active) { #content > *:not(.active) {
display: none !important; display: none !important;
@ -2481,10 +2477,8 @@ footer {
} }
.popover-notificationsHeader { .popover-notificationsHeader {
display: flex;
padding-bottom: 8px; padding-bottom: 8px;
margin: 21px 17px 0; margin: 21px 17px 0;
@extend .vertical;
.popover-title { .popover-title {
@extend h1; @extend h1;
@ -2500,8 +2494,11 @@ footer {
.popover-notificationsMarkRead { .popover-notificationsMarkRead {
@extend .btn; @extend .btn;
@extend .btn--subtle; cursor: pointer;
padding: 7px 0 0 2px; padding: 7px 0 0 2px;
text-decoration: underline;
color: hsl(0,0%,77%);
display: block;
&:hover { &:hover {
padding: 7px 0 0 2px; padding: 7px 0 0 2px;
@ -2727,32 +2724,35 @@ footer {
margin-right: 26px; margin-right: 26px;
} }
.activity-entry.state--read { .activity-entry {
display: flex;
&.is-inactive {
opacity: 0.5; opacity: 0.5;
} }
}
.activity-avatar { .activity-avatar {
padding-top: 16px; padding: 16px 2px 0;
padding-left: 2px;
padding-right: 2px;
margin-right: 10px; margin-right: 10px;
} flex-shrink: 0;
.activity-avatar:hover .avatar {
} }
.activity-body { .activity-body {
color: #444a4f; color: #444a4f;
padding: 16px 0 16px 2px; padding: 16px 0 16px 2px;
position: relative; position: relative;
display: flex;
flex: 1;
min-width: 0;
} }
.activity-body:after { .activity-entry:not(:last-child) .activity-body:after {
content: ""; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 30px; right: 30px;
left: 8px; left: 0;
border-bottom: 1px solid #f2f2f3; border-bottom: 1px solid #f2f2f3;
} }
@ -2766,7 +2766,8 @@ footer {
} }
.activity-message { .activity-message {
padding-right: 0; flex: 1;
min-width: 0;
} }
.activity-time { .activity-time {