edit ticket visibility & type UI

app/assets/javascripts/app/controllers/ticket_zoom.js.coffee

@@ -322,6 +322,9 @@ class Edit extends App.Controller
   events:
     'click .submit':             'update'
     'click [data-type="reset"]': 'reset'
+    'click .visibility.toggle':  'toggle_visibility'
+    'click .pop-selectable':     'select_type'
+    'click .pop-selected':       'show_selectable_types'
 
   constructor: ->
     super
@@ -336,8 +339,14 @@ class Edit extends App.Controller
 
     ticket = App.Ticket.fullLocal( @ticket.id )
 
+    console.log ticket
+
+    # gets referenced in @set_type
+    @type = 'email'
+
     @html App.view('ticket_zoom/edit')(
       ticket:     ticket
+      type:       @type
       isCustomer: @isRole('Customer')
       formChanged: !_.isEmpty( App.TaskManager.get(@task_key).state )
     )
@@ -442,6 +451,28 @@ class Edit extends App.Controller
         )
       @subscribeIdTextModule = ticket.subscribe( callback )
 
+  toggle_visibility: ->
+    if @el.hasClass('state--public')
+      @el.removeClass('state--public')
+      @el.addClass('state--internal')
+    else
+      @el.addClass('state--public')
+      @el.removeClass('state--internal')
+
+  show_selectable_types: =>
+    @el.find('.pop-selector').removeClass('hide')
+
+  select_type: (e) =>
+    @set_type $(e.target).data('value')
+    @el.find('.pop-selector').addClass('hide')
+
+  set_type: (type) ->
+    typeIcon = @el.find('.pop-selected .icon')
+    if @type
+      typeIcon.removeClass @type
+    @type = type
+    typeIcon.addClass @type
+
   autosaveStop: =>
     @clearInterval( 'autosave' )
 

app/assets/javascripts/app/views/ticket_zoom.jst.eco

@@ -25,7 +25,7 @@
 
       </div>
 
-      <div class="ticket-edit sidebar-tabs--spacing"></div>
+      <div class="ticket-edit state--public sidebar-tabs--spacing"></div>
 
     </div>
 

app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco

@@ -35,7 +35,7 @@
 
   <div class="article-content 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 text-bubble <%= ' internal' if article.internal is true %>"><div class="bubble-arrow"></div><%- article.html %></div>
+    <div class="flex bubble-gap text-bubble <%= ' internal' if article.internal is true %>"><div class="bubble-arrow"></div><%- article.html %></div>
   </div>
 
   <div class="article-meta-clip bottom">
@@ -63,8 +63,8 @@
       <% if article.actions: %>
       <div class="article-actions horizontal stretch">
         <% for action in article.actions: %>
-          <a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action<% if action.class: %> <%= action.class %><% end %>">
+          <a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action clickable<% if action.class: %> <%= action.class %><% end %>">
-            <span class="<%= action.type %> icon"></span><%- @T( action.name ) %>
+            <span class="<%= action.type %> action icon"></span><%- @T( action.name ) %>
           </a>
         <% end %>
       </div>

app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco

@@ -1,31 +1,43 @@
-<!--
+<form class="ticket-update <% if @formChanged: %>form-changed<% end %>">
-<div class="horizontal bubble-grid new-article <% if @formChanged: %>form-changed<% end %>">
+  <div class="bubble-grid horizontal">
+    <div class="vertical center">
       <div class="avatar user-popover" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
-  <div class="flex text-bubble">
+      <div class="dark pop-select">
+        <div class="pop-selected clickable centered">
+          <div class="gray <%- @type %> channel icon"></div>
+        </div>
+        <div class="pop-selector hide">
+          <div class="horizontal">
+            <div class="pop-selectable clickable centered" data-value="email">
+              <div class="white email channel icon"></div>
+            </div>
+            <div class="pop-selectable clickable centered" data-value="facebook">
+              <div class="white facebook channel icon"></div>
+            </div>
+            <div class="pop-selectable clickable centered" data-value="twitter">
+              <div class="white twitter channel icon"></div>
+            </div>
+            <div class="pop-selectable clickable centered" data-value="phone">
+              <div class="white phone channel icon"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="visibility toggle clickable centered">
+        <div class="public visibility icon"></div>
+        <div class="internal visibility icon"></div>
+      </div>
+    </div>
+    <div class="flex article-content bubble-gap">
+      <div class="internal-border">
+        <div class="text-bubble">
           <div class="bubble-arrow"></div>
           <textarea></textarea>
           <span class="bubble-placeholder">Antwort eingeben oder <span class="highlight">Dateien wählen</span></span>
--->
-<div class="ticket-article-view">
-  <div class="ticket-article well ticket-edit <% if @formChanged: %>form-changed<% end %>">
-    <div class="avatar">
-      <img class="thumbnail user-popover" data-id="<%= @S('id') %>" src="<%- @S('imageUrl') %>" alt="">
-    </div>
-    <div class="ticket-article-message">
-      <div class="edit-title">
-        <h4><%- @T('Edit') %>
-        <small class="reset-message<% if !@formChanged: %> hide<% end %>">
-          <a href="#" data-type="reset"><%- @T('Discard your unsaved changes.') %></a> <href="#" class="glyphicon glyphicon-repeat" data-type="reset"></a>
-        </small>
-        </h4>
-      </div>
-      <div class="edit-content">
-        <form class="form-stacked ticket-update">
-          <div class="form-ticket-update"></div>
-          <div class="form-article-update"></div>
-          <button type="submit" class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
-        </form>
-      <div>
         </div>
       </div>
-</div>
+      <button type="submit" class="btn btn-primary submit"><%- @T( 'Send' ) %></button>
+    </div>
+  </div>
+</form>

app/assets/stylesheets/zzz.css.erb

@@ -1102,7 +1102,6 @@ ol.tabs li {
     background-position: -170px -141px;
   }
 
-  .white.phone.channel.icon,
   .white.received-calls.channel.icon {
     background-position: -187px -141px;
   }
@@ -1123,6 +1122,14 @@ ol.tabs li {
     background-position: -255px -141px;
   }
 
+  .white.phone.channel.icon {
+    background-position: -272px -141px;
+  }
+
+  .gray.phone.channel.icon {
+    background-position: -289px -141px;
+  }
+
   .mood.icon {
     width: 60px;
     height: 59px;
@@ -1290,24 +1297,36 @@ ol.tabs li {
     background-position: -42px -311px;
   }
 
-  .split.icon {
+  .split.action.icon {
     width: 24px;
     height: 20px;
     background-position: 0 -336px;
   }
 
-  .reply.icon {
+  .reply.action.icon {
     width: 19px;
     height: 20px;
     background-position: -24px -336px;
   }
 
-  .internal.icon {
+  .internal.action.icon {
     width: 16px;
     height: 20px;
     background-position: -44px -336px;
   }
 
+  .public.visibility.icon {
+    width: 14px;
+    height: 19px;
+    background-position: 0 -356px;
+  }
+
+  .internal.visibility.icon {
+    width: 14px;
+    height: 19px;
+    background-position: -14px -356px;
+  }
+
 
 /*
  * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
@@ -1415,6 +1434,8 @@ footer {
 
 .clickable {
   cursor: pointer;
+  -webkit-user-select: none;
+          user-select: none;
 }
 
 .customer_info {
@@ -1556,12 +1577,6 @@ footer {
   margin-left: 80px;
 }
 
-.form-changed {
-  border: 1px solid #fbeed5;
-  border-radius: 4px;
-  background-color: #fcf8e3;
-}
-
 #splash {
   background-color: #eee;
   position: absolute;
@@ -1995,6 +2010,7 @@ footer {
   height: 40px;
   background-size: cover;
   background-position: center;
+  background-color: rgba(0,0,0,.05);
   border-radius: 100%;
   display: inline-block;
   vertical-align: bottom;
@@ -2406,12 +2422,15 @@ footer {
   max-width: 800px;
   margin: 0 auto;
   padding: 0 21px;
-  overflow: hidden;
 }
 
-  .bubble-grid .avatar {
+  .bubble-gap {
+    margin-left: 15px;
+  }
+
+  .customer.ticket-article-item .bubble-gap {
+    margin-left: 0;
     margin-right: 15px;
-    background: rgba(0,0,0,.05);
   }
 
 .ticket-article-item {
@@ -2419,11 +2438,6 @@ footer {
   position: relative;
 }
 
-  .customer.ticket-article-item .avatar {
-    margin-right: 0;
-    margin-left: 15px;
-  }
-
   /* 
     clip the article-meta to not stand out on the other side 
     of the text-bubble if the text bubble is small
@@ -2522,14 +2536,14 @@ footer {
       border-color: hsl(300,43%,84%);
     }
 
-  .new-article .text-bubble {
+  .ticket-edit .text-bubble {
     padding: 0;
     border-color: #b3b3b3;
     white-space: normal;
     border-radius: 5px;
   }
 
-    .new-article textarea {
+    .ticket-edit textarea {
       width: 100%;
       height: 38px;
       padding: 10px 20px;
@@ -2540,15 +2554,15 @@ footer {
       transition: 500ms;
     }
 
-    .new-article textarea:focus {
+    .ticket-edit textarea:focus {
       height: 105px;
     }
 
-    .new-article textarea:focus + .bubble-placeholder {
+    .ticket-edit textarea:focus + .bubble-placeholder {
       display: none;
     }
 
-    .new-article .bubble-arrow:after {
+    .ticket-edit .bubble-arrow:after {
       border-color: #b3b3b3;
       box-shadow: none;
     }
@@ -2638,6 +2652,92 @@ footer {
     background: white;
   }
 
+  .ticket-edit .internal-border {
+    padding: 5px;
+    border-radius: 8px;
+    margin: -5px -5px 0;
+  }
+
+  .ticket-edit.state--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;
+  }
+
+  .ticket-edit .pop-selectable .icon {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  .ticket-edit .pop-selectable:hover .icon {
+    opacity: 1;
+  }
+
+  .ticket-edit button[type=submit] {
+    margin-top: 5px;
+    float: right;
+  }
+
+  .ticket-edit hr {
+    border-color: #e6e6e6;
+    width: 38px;
+    margin: 0;
+  }
+
+  .visibility.toggle {
+    width: 38px;
+    height: 34px;
+    opacity: 0.2;
+  }
+
+  .state--public .internal.icon {
+    display: none;
+  }
+
+  .state--internal .visibility.toggle {
+    opacity: 1;
+  }
+
+  .state--internal .public.icon {
+    display: none;
+  }
+
+.pop-select {
+  position: relative;
+  z-index: 2;
+}
+
+  .pop-selector {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .pop-selected,
+  .pop-selectable {
+    width: 36px;
+    height: 36px;
+  }
+
+  .pop-selectable {
+    background: hsl(234,10%,19%);
+  }
+
+  .pop-selectable:hover {
+    background: hsl(234,10%,29%);
+  }
+
+  .pop-selectable:first-child {
+    border-radius: 4px 0 0 4px;
+  }
+
+  .pop-selectable:last-child {
+    border-radius: 0 4px 4px 0;
+  }
+
 .ticket-zoom .sidebar {
   width: 280px;
   border-left: 1px solid #e6e6e6;