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

add internal-border to ticket items

Browse source 
its not that beautiful yet
This commit is contained in:
Felix Niklas 2014-09-15 12:27:34 +02:00
parent 9590fedeb9
commit 340d758e92
3 changed files with 25 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
View file

@ -883,9 +883,9 @@ class ArticleView extends App.Controller
# runntime update # runntime update
if internal if internal
$(e.target).closest('.ticket-article-item').find('.text-bubble').addClass('internal') $(e.target).closest('.ticket-article-item').addClass('is-internal')
else else
$(e.target).closest('.ticket-article-item').find('.text-bubble').removeClass('internal') $(e.target).closest('.ticket-article-item').removeClass('is-internal')
show_toogle: (e) -> show_toogle: (e) ->
e.stopPropagation() e.stopPropagation()

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

@ -1,5 +1,5 @@
<% for article in @articles: %> <% for article in @articles: %>
<div class="ticket-article-item bubble-grid <%= article.sender.name.toLowerCase() %> <%= article.type.name %>" data-id="<%= article.id %>" id="article-<%= article.id %>"> <div class="ticket-article-item bubble-grid <%= article.sender.name.toLowerCase() %> <%= article.type.name %><%= ' is-internal' if article.internal is true %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
<div class="article-meta-clip top"> <div class="article-meta-clip top">
@ -35,7 +35,9 @@
<div class="article-content zIndex-1 horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>"> <div class="article-content zIndex-1 horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
<div class="avatar user-popover" data-placement="<% if article.sender.name isnt 'Agent': %>left<% else: %>right<% end %>" data-id="<%= article.created_by_id %>" style="background-image: url(<%= article.created_by.imageUrl %>)"></div> <div class="avatar user-popover" data-placement="<% if article.sender.name isnt 'Agent': %>left<% else: %>right<% end %>" data-id="<%= article.created_by_id %>" style="background-image: url(<%= article.created_by.imageUrl %>)"></div>
<div class="flex bubble-gap text-bubble <%= ' internal' if article.internal is true %>"><div class="bubble-arrow"></div><%- article.html %></div> <div class="flex bubble-gap internal-border">
<div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
</div>
</div> </div>
<div class="article-meta-clip bottom"> <div class="article-meta-clip bottom">

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

@ -2605,12 +2605,12 @@ footer {
} }
.bubble-gap { .bubble-gap {
margin-left: 15px; margin-left: 15px !important;
} }
.customer.ticket-article-item .bubble-gap { .customer.ticket-article-item .bubble-gap {
margin-left: 0; margin-left: 0 !important;
margin-right: 15px; margin-right: 15px !important;
} }
.ticket-article-item { .ticket-article-item {
@ -2679,6 +2679,21 @@ footer {
color: #96969b; color: #96969b;
} }
.internal-border {
padding: 5px;
border-radius: 8px;
margin: -5px;
}
.is-internal .internal-border {
background: repeating-linear-gradient(45deg, hsl(18,79%,89%), hsl(18,79%,89%) 5px, hsl(210,17%,98%) 5px, hsl(210,17%,98%) 6px);
background-size: 8px 8px;
}
.is-internal .bubble-arrow {
display: none;
}
.text-bubble { .text-bubble {
padding: 10px 20px; padding: 10px 20px;
white-space: pre-wrap; white-space: pre-wrap;
@ -2703,16 +2718,6 @@ footer {
border-color: hsl(199,44%,85%); border-color: hsl(199,44%,85%);
} }
.ticket-article-item .text-bubble.internal {
background: #f2def2;
border-color: hsl(300,43%,90%);
box-shadow: none;
}
.customer.ticket-article-item.state--folde-out .text-bubble.internal {
border-color: hsl(300,43%,84%);
}
.bubble-arrow { .bubble-arrow {
position: absolute; position: absolute;
width: 7px; width: 7px;
@ -2736,7 +2741,7 @@ footer {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.ticket-article-item .text-bubble.internal .bubble-arrow:after { .ticket-article-item.is-internal .bubble-arrow:after {
background: #f2def2; background: #f2def2;
border: #eed3d7; border: #eed3d7;
} }
@ -2790,17 +2795,6 @@ footer {
background: white; background: white;
} }
.ticket-edit .internal-border {
padding: 5px;
border-radius: 8px;
margin: -5px;
}
.ticket-edit.is-internal .internal-border {
background: repeating-linear-gradient(45deg, hsl(18,79%,89%), hsl(18,79%,89%) 5px, transparent 5px, transparent 6px);
background-size: 8px 8px;
}
.ticket-edit .avatar { .ticket-edit .avatar {
margin-bottom: 3px; margin-bottom: 3px;
} }