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

article meta design

Browse source
This commit is contained in:
Felix Niklas 2014-08-25 18:32:39 +02:00
parent 3441799c7a
commit 44ee77495f
3 changed files with 102 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
View file

@ -1,38 +1,47 @@
<% for article in @articles: %>
<div class="ticket-article-item bubble-grid <%= article.sender.name.toLowerCase() %> <%= article.type.name %><%= ' internal' if article.internal is true %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
<div class="horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
<div class="avatar" style="background-image: url(<%= article.created_by.imageUrl %>)">
<ul>
<li style="font-size: 10px;"><%- @T(article.type.name) %></li>
<% if article.type.name is 'email': %><li style="font-size: 10px;"><a href="<%= App.Config.get('api_path') %>/ticket_article_plain/<%= article.id %>"><%- @T( 'raw' ) %></a></li><% end %>
</ul>
<% if article.actions: %>
<% for action in article.actions: %>
-
<a href="<%= action.href %>" data-type="<%= action.type %>" class="<% if action.class: %><%= action.class %><% end %>"><%- @T( action.name ) %></a>
<% end %>
<div class="avatar" style="background-image: url(<%= article.created_by.imageUrl %>)"></div>
<div class="article-content flex">
<div class="article-meta top">
<% if article.from: %>
<div class="horizontal article-meta-row" title="<%- @Ti( 'From' ) %>: <%= article.from %>">
<div class="article-meta-key contain-text"><%- @T( 'From' ) %></div>
<div class="article-meta-value flex contain-text"><%= article.from %></div>
</div>
<% end %>
<% if article.to: %>
<div class="horizontal article-meta-row" title="<%- @Ti( 'To' ) %>: <%= article.to %>">
<div class="article-meta-key contain-text"><%- @T( 'To' ) %></div>
<div class="article-meta-value flex contain-text"><%= article.to %></div>
</div>
<% end %>
<% if article.cc: %>
<div class="horizontal article-meta-row" title="<%- @Ti( 'Kopie' ) %>: <%= article.cc %>">
<div class="article-meta-key contain-text"><%- @T( 'Kopie' ) %></div>
<div class="article-meta-value flex contain-text"><%= article.cc %></div>
</div>
<% end %>
<% if article.subject: %>
<div class="horizontal article-meta-row" title="<%- @Ti( 'Subject' ) %>: <%= article.subject %>">
<div class="article-meta-key contain-text"><%- @T( 'Subject' ) %></div>
<div class="article-meta-value flex contain-text"><%= article.subject %></div>
</div>
<% end %>
</div>
<div class="flex">
<div class="show-on-text-bubble-hover">
<% if article.from: %>
<div title="<%- @Ti( 'From' ) %>: <%= article.from %>"><%- @T( 'From' ) %>: <%= article.from %></div>
<% end %>
<% if article.to: %>
<div title="<%- @Ti( 'To' ) %>: <%= article.to %>"><%- @T( 'To' ) %>: <%= article.to %></div>
<% end %>
<% if article.cc: %>
<div title="<%- @Ti( 'Cc' ) %>: <%= article.cc %>"><%- @T( 'Cc' ) %>: <%= article.cc %></div>
<% end %>
<% if article.subject: %>
<div title="<%- @Ti( 'Subject' ) %>: <%= article.subject %>"><%- @T( 'Subject' ) %>: <%= article.subject %></div>
<% end %>
</div>
<div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
<div class="article-meta bottom">
<div class="horizontal article-meta-row">
<div class="article-meta-key"><%- @T( 'Kanal' ) %></div>
<div class="article-meta-value">
<span class="icon <%- article.type.name %> channel"></span>
<%- @T(article.type.name) %>
<% if article.type.name is 'email': %>
<a class="text-muted" href="<%= App.Config.get('api_path') %>/ticket_article_plain/<%= article.id %>"><%- @T( 'raw' ) %></a>
<% end %>
</div>
</div>
</div>
<% if article.attachments: %>
<div class="always-shown">
<% for attachment in article.attachments: %>
@ -40,8 +49,13 @@
<% end %>
</div>
<% end %>
<div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
<% if article.actions: %>
<div class="article-actions horizontal stretch">
<% for action in article.actions: %>
<a href="<%= action.href %>" data-type="<%= action.type %>" class="<% if action.class: %><%= action.class %><% end %>"><%- @T( action.name ) %></a>
<% end %>
</div>
<% end %>
<!--
<div class="ticket-article ticket-article-item <% if article.internal is true: %> internal<% end %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
<div class="avatar">
@ -54,6 +68,6 @@
-->
</div>
</div>
<time class="task-meta humanTimeFromNow" datetime="<%- article.created_at %>" data-time="<%- article.created_at %>">?</time>
<small class="task-subline"><time class="humanTimeFromNow" datetime="<%- article.created_at %>" data-time="<%- article.created_at %>">?</time></small>
</div>
<% end %>

4
app/assets/javascripts/app/views/ticket_zoom/title.jst.eco
View file

@ -1,5 +1,5 @@
<h1><span contenteditable="true" class="ticket-title-update inline-edit"><%= @P( @ticket.title ) %></span></h1>
<div class="task-meta">
<small class="task-subline">
<%- @C('ticket_hook') %> <%- @ticket.number %> - <span class="humanTimeFromNow" data-time="<%- @ticket.created_at %>">?</span> <% if !@isCustomer && @ticket.escalation_time: %><%- @T('Escalation') %> <span class="humanTimeFromNow escalation" data-time="<%- @ticket.escalation_time %>">?</span><% end %>
</div>
</small>

61
app/assets/stylesheets/zzz.css.erb
View file

@ -5,6 +5,11 @@ body {
background: #2c2d36;
}
small {
color: #c6c6c5;
font-size: 12px;
}
.highlight {
color: hsl(202,68%,54%);
}
@ -2352,10 +2357,9 @@ footer {
text-align: center;
}
.task-meta {
color: #c6c6c5;
font-size: 12px;
.task-subline {
text-align: center;
display: block;
}
.bubble-grid {
@ -2378,9 +2382,50 @@ footer {
margin-bottom: 33px;
}
.article-content {
margin-right: 55px;
}
.customer.ticket-article-item .article-content {
margin-right: 0;
margin-left: 55px;
}
.article-meta {
background: #2c2d36;
color: white;
padding: 21px 25px 11px;
margin: 0 12px;
}
.article-meta.bottom {
padding-top: 17px;
padding-bottom: 8px;
}
.article-meta-row {
margin-bottom: 5px;
}
.article-meta-key {
width: 13%;
text-transform: uppercase;
}
.article-meta-value {
margin-left: 8px;
}
.article-meta .icon {
vertical-align: bottom;
}
.article-meta .text-muted {
color: #96969b;
}
.text-bubble {
padding: 10px 20px;
margin-right: 55px;
white-space: pre-wrap;
background: white;
border-radius: 5px;
@ -2391,8 +2436,6 @@ footer {
.customer.ticket-article-item .text-bubble {
background: #e5f0f5;
margin-right: 0;
margin-left: 55px;
border-color: hsl(199,38%,92%);
box-shadow: none;
}
@ -2470,10 +2513,12 @@ footer {
box-shadow: none;
}
.ticket-article-item .task-meta {
.ticket-article-item .task-subline {
margin-top: 12px;
}
.article-actions {
text-align: center;
display: block;
}
.ticket-edit {