From 340d758e924f2099094b01002b81e080f58b5a1d Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Mon, 15 Sep 2014 12:27:34 +0200
Subject: [PATCH] add internal-border to ticket items

its not that beautiful yet
---
 .../app/controllers/ticket_zoom.js.coffee     |  4 +-
 .../views/ticket_zoom/article_view.jst.eco    |  6 ++-
 app/assets/stylesheets/zzz.css.erb            | 44 ++++++++-----------
 3 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
index 183b3f72a..eb12b7d84 100644
--- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
+++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
@@ -883,9 +883,9 @@ class ArticleView extends App.Controller
 
     # runntime update
     if internal
-      $(e.target).closest('.ticket-article-item').find('.text-bubble').addClass('internal')
+      $(e.target).closest('.ticket-article-item').addClass('is-internal')
     else
-      $(e.target).closest('.ticket-article-item').find('.text-bubble').removeClass('internal')
+      $(e.target).closest('.ticket-article-item').removeClass('is-internal')
 
   show_toogle: (e) ->
     e.stopPropagation()
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
index c77f0825a..d5f41ad03 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
@@ -1,5 +1,5 @@
 <% 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">
@@ -35,7 +35,9 @@
 
   <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="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 class="article-meta-clip bottom">
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 95c121ba2..cdee35aa9 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -2605,12 +2605,12 @@ footer {
 }
 
   .bubble-gap {
-    margin-left: 15px;
+    margin-left: 15px !important;
   }
 
   .customer.ticket-article-item .bubble-gap {
-    margin-left: 0;
-    margin-right: 15px;
+    margin-left: 0 !important;
+    margin-right: 15px !important;
   }
 
 .ticket-article-item {
@@ -2679,6 +2679,21 @@ footer {
       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 {
     padding: 10px 20px;
     white-space: pre-wrap;
@@ -2703,16 +2718,6 @@ footer {
       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 {
       position: absolute;
       width: 7px;
@@ -2736,7 +2741,7 @@ footer {
               transform: rotate(-45deg);
     }
 
-    .ticket-article-item .text-bubble.internal .bubble-arrow:after {
+    .ticket-article-item.is-internal .bubble-arrow:after {
       background: #f2def2;
       border: #eed3d7;
     }
@@ -2790,17 +2795,6 @@ footer {
     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 {
     margin-bottom: 3px;
   }