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

ticket zoom basic layout

Browse source
This commit is contained in:
Felix Niklas 2014-08-05 17:31:26 +02:00
parent 551c620bd4
commit bc9ba31b81
3 changed files with 119 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/assets/javascripts/app/views/ticket_zoom.jst.eco
View file

@ -1,7 +1,11 @@
<div class="main flex">
<div class="page-header ticket-zoom">
<h1 class="ticket-title"></h1>
<div class="page-header ticket-zoom horizontal">
<div class="flex vertical center">
<div class="big avatar" style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
<div class="ticket-title"></div>
<div class="task-meta">ID #10098 - Dienstag, <time datetime="2014-01-07T15:26:31">07. Januar 2014 um 15:26</time></div>
</div>
<div class="page-header-meta">
<% if @C( 'LastOverview' ) && @nav: %>
<div class="pull-right">
@ -17,6 +21,7 @@
</div>
<div class="ticket-article"></div>
<div class="ticket-edit"></div>
</div>

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

@ -1,41 +1,11 @@
<% for article in @articles: %>
<div class="horizontal ticket-article-item <% if article.internal is true: %> internal<% end %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
<div class="avatar">
<img class="thumbnail user-popover" data-id="<%= article.created_by_id %>" src="<%= article.created_by.image %>" alt="">
<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>
<div class="ticket-article-item <%= 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 is 'Customer' %>">
<div class="avatar" style="background-image: url(<%= article.created_by.image %>)"></div>
<div class="flex">
<div class="article-message"><div class="article-message-arrow"></div><%- article.html %></div>
</div>
<div class="ticket-article-message flex">
<% if article.from: %>
<strong title="<%- @Ti( 'From' ) %>: <%= article.from %>"><%= article.from %></strong>
<% 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 %>
<% end %>
- <span class="humanTimeFromNow" data-time="<%- article.created_at %>">?</span>
<% end %>
<% if article.to: %>
<div title="<%- @Ti( 'To' ) %>: <%= article.to %>"><%= article.to %></div>
<% end %>
<% if article.cc: %>
<div title="<%- @Ti( 'Cc' ) %>: <%= article.cc %>"><%= article.cc %></div>
<% end %>
<% if article.subject: %>
<div title="<%- @Ti( 'Subject' ) %>: <%= article.subject %>"><%= article.subject %></div>
<% end %>
<% if article.attachments: %>
<div>
<% for attachment in article.attachments: %>
<a href="<%= App.Config.get('api_path') %>/ticket_attachment/<%= article.ticket_id %>/<%= article.id %>/<%= attachment.id %>" target="_blank" data-type="attachment" class="attachment" title="<%= attachment.size %>"><%= attachment.filename %></a>
<% end %>
</div>
<% end %>
<div style="white-space:pre-wrap;" class="message"><%- article.html %></div>
</div>
<time class="task-meta humanTimeFromNow" datetime="<%- article.created_at %>" data-time="<%- article.created_at %>">?</time>
</div>
<hr>
<% end %>

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

@ -1382,36 +1382,6 @@ footer {
}
}
.message {
padding-top: 6px;
padding-bottom: 6px;
}
.ticket-update {
width: 100%;
}
.ticket-update .span2 {
width: 152px;
margin-right: 4px;
}
.ticket-update .medium {
width: 160px;
}
.ticket-article .avatar {
width: 80px;
}
.ticket-article .avatar ul {
margin-left: -22px;
}
.ticket-article-item {
min-height: 100px;
}
.show_toogle {
font-size: 10px;
line-height: 12px;
@ -1991,6 +1961,11 @@ footer {
vertical-align: bottom;
}
.big.avatar {
width: 50px;
height: 50px;
}
.sidebar {
width: 32%;
max-width: 353px;
@ -2000,6 +1975,11 @@ footer {
overflow: auto;
}
.main + .sidebar {
border-right: none;
border-left: 1px solid #e6e6e6;
}
.NavBarAdmin.sidebar {
padding-top: 1px;
width: 270px;
@ -2332,6 +2312,100 @@ footer {
appearance: none;
}
.ticket-zoom {
margin-top: 52px;
margin-bottom: 46px;
border-bottom: none;
}
.ticket-title {
max-width: 400px;
}
.ticket-title h1 {
margin-top: 15px;
margin-bottom: 8px;
text-align: center;
}
.task-meta {
color: #c6c6c5;
font-size: 12px;
}
.ticket-article-item {
max-width: 800px;
margin: 33px auto;
}
.ticket-article-item .avatar {
margin: 0 15px;
}
.article-message {
padding: 10px 20px;
margin-right: 70px;
white-space: pre-wrap;
background: white;
border-radius: 5px;
border: 1px solid hsl(240,4%,95%);
box-shadow: 0 0 1px rgba(0,0,0,.06) inset;
position: relative;
}
.customer.ticket-article-item .article-message {
background: #e5f0f5;
margin-right: 0;
margin-left: 70px;
border-color: hsl(199,38%,92%);
box-shadow: none;
}
.article-message-arrow {
position: absolute;
width: 7px;
height: 9px;
left: -6px;
top: 15px;
overflow: hidden;
}
.article-message-arrow:after {
content: "";
position: absolute;
top: -1px;
left: 2px;
width: 11px;
height: 11px;
background: white;
border: 1px solid hsl(240,4%,95%);
box-shadow: 0 0 1px rgba(0,0,0,.06) inset;
transform: rotate(-45deg);
}
.customer.ticket-article-item .article-message-arrow {
left: auto;
right: -6px;
}
.customer.ticket-article-item .article-message-arrow:after {
background: #e5f0f5;
left: auto;
right: 2px;
border-color: hsl(199,38%,92%);
box-shadow: none;
}
.ticket-article-item .task-meta {
margin-top: 12px;
text-align: center;
display: block;
}
.ticket-edit {
display: none;
}
/*
----------------