chat designer

app/assets/javascripts/app/controllers/_channel/chat.coffee

@@ -6,6 +6,17 @@ class App.ChannelChat extends App.Controller
     'click .js-widget': 'widget'
     'change .js-params': 'updateParams'
     'keyup .js-params': 'updateParams'
+    'submit .js-testurl': 'changeTestWebsite'
+    'blur .js-testurl-input': 'changeTestWebsite'
+    'click .js-zoom-in': 'zoomIn'
+    'click .js-zoom-out': 'zoomOut'
+
+  elements:
+    '.js-demo': 'demo'
+    '.js-iframe': 'iframe'
+    '.js-chat': 'chat'
+    '.js-testurl-input': 'urlInput'
+    '.js-backgroundColor': 'chatBackground'
 
   constructor: ->
     super
@@ -14,6 +25,8 @@ class App.ChannelChat extends App.Controller
     @widgetDesignerPermanentParams =
       id: 'id'
 
+    $(window).on 'resize.chat-designer', @resizeDemo
+
   load: =>
     @startLoading()
     @ajax(
@@ -37,6 +50,7 @@ class App.ChannelChat extends App.Controller
       baseurl: window.location.origin
       chats: chats
     )
+
     @updateParams()
 
     new App.SettingsArea(
@@ -44,6 +58,35 @@ class App.ChannelChat extends App.Controller
       area: 'Chat::Base'
     )
 
+  zoomOut: =>
+    if @demo.width() < 1024
+      percentage = @demo.width()/1024
+      @chat.css('transform', "scale(#{ percentage })")
+      @iframe.css
+        transform: "scale(#{ percentage })"
+        width: @demo.width() / percentage
+        height: @demo.height() / percentage
+
+  zoomIn: =>
+    @chat.css('transform', "")
+    @iframe.css
+      transform: ""
+      width: ""
+      height: ""
+
+
+  changeTestWebsite: (event) =>
+    event.preventDefault() if event
+
+    return if @urlInput.val() is @url
+    @url = @urlInput.val()
+
+    src = @url
+    if !src.startsWith('http')
+      src = "http://#{ src }"
+
+    @iframe.attr 'src', src
+
   new: (e) =>
     new App.ControllerGenericNew(
       pageData:
@@ -94,6 +137,11 @@ class App.ChannelChat extends App.Controller
           .replace(/\>/g, '&gt;')
       value
     params = @formParam(@$('.js-params'))
+
+    if parseInt(params.fontSize, 10) > 2
+      @chat.css('font-size', params.fontSize)
+    @chatBackground.css('background', params.background)
+
     if @permanent
       for key, value of @permanent
         params[key] = value

app/assets/javascripts/app/views/channel/chat.jst.eco

@@ -1,93 +1,91 @@
 <div class="page-header">
   <div class="page-header-title">
-    <h1><%- @T('Chat') %> <small></small></h1>
+    <h1><%- @T('Chat Widget') %></h1>
   </div>
 </div>
 <div>
-  <p><%- @T('With form you can add a formular to your web page witch directly generates a Ticket for you.') %></p>
-
-  <div class="js-settings"></div>
-
-  <hr>
-
-  <h2><%- @T('Topics') %></h2>
-
-<% if _.isEmpty(@chats): %>
-  <p><%- @T('You have no configured chat\'s right now.') %></p>
-<% else: %>
-  <table class="settings-list">
-    <thead>
-      <tr>
-        <th style="white-space: nowrap;"><%- @T('Name') %></th>
-        <th style="white-space: nowrap;"><%- @T('Note') %></th>
-        <th style="white-space: nowrap;"><%- @T('Max Queue') %></th>
-        <th style="white-space: nowrap;"><%- @T('Delete') %></th>
-      </tr>
-    </thead>
-    <tbody>
-<% for chat in @chats: %>
-      <tr data-id="<%= chat.id %>">
-        <td>
-          <label class="inline-label">
-            <a class="js-edit is-clickable"><%= chat.name %></a>
-          </label>
-        <td>
-          <label class="inline-label">
-            <%= chat.note %>
-          </label>
-        <td>
-          <label class="inline-label">
-            <%= chat.max_queue %>
-          </label>
-        <td>
-          <div class="settings-list-rowControls">
-            <div class="btn btn--text js-remove">
-              <%- @Icon('trash') %> <%- @T('Remove') %>
+  <p><%- @T('You can embedd this widget into your web page to allow visitors to directly chat with you.') %></p>
+  
+  <h2><%- @T('Designer') %></h2>
+  
+  <div class="browser chat-demo">
+    <div class="browser-head">
+      <form class="browser-input js-testurl" novalidate>
+        <input type="url" class="js-testurl-input" placeholder="zammad.org">
+      </form>
+      <div class="browser-control zoom-out js-zoom-out"><%- @Icon('zoom-out') %></div>
+      <div class="browser-control zoom-in js-zoom-in"><%- @Icon('zoom-in') %></div>
+    </div>
+    <div class="browser-body js-demo">
+      <iframe class="js-iframe"></iframe>
+      <style>@import "/assets/chat/chat.css";</style>
+      <div class="chat-demo-animationHolder">
+        <div class="js-chat zammad-chat zammad-chat-is-visible zammad-chat-is-open" style="bottom: 0px;">
+          <div class="zammad-chat-header js-chat-open js-backgroundColor">
+            <div class="zammad-chat-header-controls">
+              <span class="zammad-chat-agent-status" data-status="online">Online</span>
+              <span class="zammad-chat-header-icon">
+                <svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"></path></svg>
+                <svg class="zammad-chat-header-icon-close js-chat-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"></path></svg>
+              </span>
+            </div>
+            <div class="zammad-chat-agent">
+              <img class="zammad-chat-agent-avatar" src="/assets/images/chat-demo-avatar.png">
+              <span class="zammad-chat-agent-sentence">
+                <span class="zammad-chat-agent-name">John Smith</span>
+              </span>
+            </div>
+            <div class="zammad-chat-welcome zammad-chat-is-hidden">
+              <svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"></path></svg>
+              <span class="zammad-chat-welcome-text"><strong>Chatten</strong> sie mit uns!</span>
             </div>
           </div>
-<% end %>
-      <tr class="settings-list-controlRow">
-        <td>
-        <td>
-        <td>
-        <td>
-          <div class="btn btn--text js-add">
-            <%- @Icon('plus-small') %> <%- @T('Add') %>
+          <div class="zammad-chat-body">
+            <div class="zammad-chat-timestamp"><strong>Heute</strong> 14:45</div>
+            <div class="zammad-chat-message zammad-chat-message--customer">
+              <span class="zammad-chat-message-body js-backgroundColor">Hello! I need help with your product.</span>
+            </div>
+            <div class="zammad-chat-message zammad-chat-message--agent">
+              <span class="zammad-chat-message-body">Hi! Which one of our products?</span>
+            </div>
           </div>
-
-    </tbody>
-  </table>
-<% end %>
-  <hr>
-
-  <h2><%- @T('Widget Designer') %></h2>
+          <form class="zammad-chat-controls">
+            <textarea class="zammad-chat-input" rows="1" placeholder="Ihre Nachricht..."></textarea>
+            <button type="submit" class="zammad-chat-button zammad-chat-send js-backgroundColor">Senden</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
 
   <form class="js-params">
-
     <fieldset>
-      <div class="input form-group">
+      <div class="input form-group formGroup--halfSize">
         <div class="formGroup-label">
-          <label for="form-chat-title"><%- @T('Title of the Chat') %></label>
+          <label for="form-chat-title"><%- @T('Chat Title') %></label>
         </div>
         <div class="controls">
           <input type="text" id="form-chat-title" name="title" value="&lt;strong&gt;Chat&lt;/strong&gt; with us!">
         </div>
+        <span class="help-block"><%- @T('Shown when the chat is closed.') %></span>
       </div>
-      <div class="input form-group">
+      <div class="input form-group formGroup--halfSize">
         <div class="formGroup-label">
           <label for="form-chat-background"><%- @T('Background color') %></label>
         </div>
         <div class="controls">
           <input type="text" id="form-chat-background" name="background" value="">
         </div>
+        <span class="help-block"><%- @T('Can be in any CSS color format.') %></span>
       </div>
-      <div class="input form-group">
+      <div class="input form-group formGroup--halfSize">
         <div class="formGroup-label">
-          <label for="form-chat-fontsize"><%- @T('Fontsize') %></label>
+          <label for="form-chat-fontsize"><%- @T('Font size') %></label>
         </div>
         <div class="controls">
           <input type="text" id="form-chat-fontsize" name="fontSize" value="12px">
         </div>
+        <span class="help-block"><%- @T('The default font size is 12px.') %></span>
       </div>
     </fieldset>
 
@@ -126,7 +124,7 @@
 
   <p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
 
-<pre>
+  <pre>
 &lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
 
 &lt;script&gt;
@@ -138,4 +136,58 @@ $(function() {
 &lt;/script&gt;</pre>
   </form>
 
+  <div class="js-settings"></div>
+
+  <hr>
+
+  <h2><%- @T('Topics') %></h2>
+
+<% if _.isEmpty(@chats): %>
+  <p><%- @T('You have no configured chat\'s right now.') %></p>
+<% else: %>
+  <table class="settings-list">
+    <thead>
+      <tr>
+        <th style="white-space: nowrap;"><%- @T('Name') %></th>
+        <th style="white-space: nowrap;"><%- @T('Note') %></th>
+        <th style="white-space: nowrap;"><%- @T('Max Queue') %></th>
+        <th style="white-space: nowrap;"><%- @T('Delete') %></th>
+      </tr>
+    </thead>
+    <tbody>
+<% for chat in @chats: %>
+      <tr data-id="<%= chat.id %>">
+        <td>
+          <label class="inline-label">
+            <a class="js-edit is-clickable"><%= chat.name %></a>
+          </label>
+        <td>
+          <label class="inline-label">
+            <%= chat.note %>
+          </label>
+        <td>
+          <label class="inline-label">
+            <%= chat.max_queue %>
+          </label>
+        <td>
+          <div class="settings-list-rowControls">
+            <div class="btn btn--text js-remove">
+              <%- @Icon('trash') %> <%- @T('Remove') %>
+            </div>
+          </div>
+<% end %>
+      <tr class="settings-list-controlRow">
+        <td>
+        <td>
+        <td>
+        <td>
+          <div class="btn btn--text js-add">
+            <%- @Icon('plus-small') %> <%- @T('Add') %>
+          </div>
+
+    </tbody>
+  </table>
+<% end %>
+  <hr>
+
 </div>

app/assets/stylesheets/svg-dimensions.css

@@ -45,7 +45,7 @@
 .icon-mood-ok { width: 60px; height: 59px; }
 .icon-mood-super-bad { width: 60px; height: 59px; }
 .icon-mood-supergood { width: 60px; height: 59px; }
-.icon-note { width: 17px; height: 16px; }
+.icon-note { width: 16px; height: 16px; }
 .icon-one-ticket { width: 48px; height: 10px; }
 .icon-organization { width: 16px; height: 16px; }
 .icon-outbound-calls { width: 17px; height: 17px; }
@@ -80,4 +80,6 @@
 .icon-trash { width: 16px; height: 16px; }
 .icon-twitter-button { width: 29px; height: 22px; }
 .icon-twitter { width: 17px; height: 17px; }
-.icon-user { width: 16px; height: 16px; }
+.icon-user { width: 16px; height: 16px; }
+.icon-zoom-in { width: 20px; height: 20px; }
+.icon-zoom-out { width: 20px; height: 20px; }

app/assets/stylesheets/zammad.scss

@@ -1837,6 +1837,7 @@ kbd {
 .help-block {
   margin: 0;
   color: #bcbcbc;
+  font-size: 12px;
   
   &.help-block--center {
     text-align: center;
@@ -1844,7 +1845,7 @@ kbd {
 }
 
 .help-block:not(:empty) {
-  margin: 8px 2px 10px;
+  margin: 6px 2px 10px;
 }
 
 /* replace music icon with attachment */
@@ -7322,6 +7323,76 @@ output {
   overflow: auto;
 }
 
+.browser {
+  margin: 0 0 20px;
+  border: 1px solid hsl(0,0%,90%);
+  border-radius: 5px;
+  height: 500px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+  
+.browser-body {
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+  
+  iframe {
+    position: absolute;
+    border: none;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    transform-origin: left top;
+  }
+}
+
+.browser-head {
+  display: flex;
+  padding: 5px;
+  border-bottom: 1px solid hsl(0,0%,90%);
+  
+  .browser-input {
+    flex: 1;
+    margin: 5px;
+  }
+
+  .browser-control {
+    width: 39px;
+    margin: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    fill: hsl(202,8%,28%);
+    cursor: pointer;
+  }
+}
+
+
+.chat-demo {
+  .zammad-chat {
+    position: absolute;
+    transform-origin: right bottom;
+    pointer-events: auto;
+  }
+
+  .chat-demo-animationHolder {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    animation: slide-up 500ms;
+    pointer-events: none;
+  }
+}
+
+@keyframes slide-up {
+  from { transform: translateY(100%); }
+}
+
 /*
 
   ----------------

public/assets/chat/chat.css

@@ -168,7 +168,7 @@
 
 .zammad-chat-body {
   padding: 0.5em 1em;
-  height: 300px;
+  height: 25em;
   overflow: auto;
   background: white; }
 
@@ -277,6 +277,7 @@
 
 .zammad-chat-input {
   float: left;
+  height: auto;
   font-family: inherit;
   line-height: inherit;
   font-size: inherit;

public/assets/chat/chat.scss

@@ -171,7 +171,7 @@
 
 .zammad-chat-body {
   padding: 0.5em 1em;
-  height: 300px;
+  height: 25em;
   overflow: auto;
   background: white;
 }
@@ -276,6 +276,7 @@
 
 .zammad-chat-input {
   float: left;
+  height: auto;
   font-family: inherit;
   line-height: inherit;
   font-size: inherit;

public/assets/images/icons/arrow-down.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="13px" height="7px" viewBox="0 0 13 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
+    <!-- Generator: Sketch 3.4 (15575) - http://www.bohemiancoding.com/sketch -->
     <title>arrow-down</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>