Merge branch 'develop' of github.com:martini/zammad into develop

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

@@ -10,19 +10,24 @@ class App.ChannelChat extends App.Controller
     'blur .js-testurl-input': 'changeDemoWebsite'
     'click .js-selectBrowserWidth': 'selectBrowserWidth'
     'click .js-swatch': 'usePaletteColor'
+    'click .js-toggle-chat': 'toggleChat'
+    'input .js-chatTitle': 'changeTitle'
 
   elements:
     '.js-browser': 'browser'
+    '.js-browserBody': 'browserBody'
     '.js-iframe': 'iframe'
+    '.js-screenshot': 'screenshot'
+    '.js-website': 'website'
     '.js-chat': 'chat'
+    '.js-chatHeader': 'chatHeader'
+    '.js-chat-welcome': 'chatWelcome'
     '.js-testurl-input': 'urlInput'
     '.js-backgroundColor': 'chatBackground'
     '.js-paramsBlock': 'paramsBlock'
     '.js-code': 'code'
     '.js-palette': 'palette'
     '.js-color': 'colorField'
-    '.js-screenshot': 'screenshot'
-    '.js-website': 'website'
 
   apiOptions: [
     {
@@ -94,6 +99,10 @@ class App.ChannelChat extends App.Controller
     }
   ]
 
+  isOpen: true
+  browserWidth: 1280
+  chatHeight: 360
+
   constructor: ->
     super
     @load()
@@ -131,6 +140,7 @@ class App.ChannelChat extends App.Controller
     @code.each (i, block) ->
       hljs.highlightBlock block
 
+    @adjustBrowserWidth()
     @updateParams()
 
   selectBrowserWidth: (event) =>
@@ -138,31 +148,42 @@ class App.ChannelChat extends App.Controller
 
     # select tab
     tab.addClass('is-selected').siblings().removeClass('is-selected')
-    value = tab.attr('data-value')
-    width = parseInt value, 10
+    @browserWidth = tab.attr('data-value')
+    @adjustBrowserWidth()
+
+  adjustBrowserWidth: ->
+    width = parseInt @browserWidth, 10
 
     # reset zoom
     @chat
-      .css('transform', '')
       .removeClass('is-fullscreen')
+      .css 'transform', "translateY(#{ @getChatOffset() }px)"
     @browser.css('width', '')
     @website.css
       transform: ''
       width: ''
       height: ''
 
-    return if value is 'fit'
+    return if @browserWidth is 'fit'
 
     if width < @el.width()
-      @chat.addClass('is-fullscreen')
+      @chat.addClass('is-fullscreen').css 'transform', "translateY(#{ @getChatOffset(true) }px)"
       @browser.css('width', "#{ width }px")
     else
       percentage = @el.width()/width
-      @chat.css('transform', "scale(#{ percentage })")
+      @chat.css 'transform', "translateY(#{ @getChatOffset() * percentage }px) scale(#{ percentage })"
       @website.css
         transform: "scale(#{ percentage })"
         width: @el.width() / percentage
-        height: @el.height() / percentage
+        height: @browserBody.height() / percentage
+
+  getChatOffset: (fullscreen) ->
+    return 0 if @isOpen
+
+    if fullscreen
+      return @browserBody.height() - @chatHeader.outerHeight()
+    else
+      return @chatHeight - @chatHeader.outerHeight()
 
   changeDemoWebsite: (event) =>
     event.preventDefault() if event
@@ -178,11 +199,11 @@ class App.ChannelChat extends App.Controller
 
     @urlInput.addClass('is-loading')
 
-    # clear palette and iframe
     @palette.empty()
-    @website.attr('data-mode', '')
-    @iframe.attr('src', '')
+
     @screenshot.attr('src', '')
+    @website.attr('data-mode', 'iframe')
+    @iframe.attr('src', @url)
 
     $.ajax
       url: 'https://images.zammad.com/api/v1/webpage/combined'
@@ -196,12 +217,9 @@ class App.ChannelChat extends App.Controller
     imageSource = data['data_url']
 
     if imageSource 
-      console.log "renderDemoWebsite", typeof imageSource, imageSource
       @screenshot.attr 'src', imageSource
+      @iframe.attr('src', '')
       @website.attr('data-mode', 'screenshot')
-    else
-      @iframe.attr 'src', @url
-      @website.attr('data-mode', 'iframe')
 
     @renderPalette data['palette']
 
@@ -235,6 +253,14 @@ class App.ChannelChat extends App.Controller
     @colorField.val code
     @updateParams()
 
+  toggleChat: =>
+    @chat.toggleClass('is-open')
+    @isOpen = @chat.hasClass('is-open')
+    @adjustBrowserWidth()
+
+  changeTitle: (event) ->
+    @chatWelcome.html $(event.currentTarget).val()
+
   new: (e) =>
     new App.ControllerGenericNew(
       pageData:
@@ -294,6 +320,7 @@ class App.ChannelChat extends App.Controller
       params.flat = true
     else
       @chat.removeClass('zammad-chat--flat')
+    @chatWelcome.html params.title
 
     if @permanent
       for key, value of @permanent

app/assets/javascripts/app/controllers/ticket_overview.coffee

@@ -78,7 +78,6 @@ class App.TicketOverview extends App.Controller
 
 class Navbar extends App.Controller
   elements:
-    '.js-tabsHolder': 'tabsHolder'
     '.js-tabsClone': 'clone'
     '.js-tabClone': 'tabClone'
     '.js-tabs': 'tabs'
@@ -130,7 +129,9 @@ class Navbar extends App.Controller
       items: items
       isAgent: @isRole('Agent')
 
-    while @clone.width() > @tabsHolder.width()
+    console.log @el.width(), @clone.width()
+
+    while @clone.width() > @el.width()
       @tabClone.not('.hide').last().addClass('hide')
       @tab.not('.hide').last().addClass('hide')
       @dropdownItem.filter('.hide').last().removeClass('hide')

app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco

@@ -1,4 +1,4 @@
-<div class="tabsHolder js-tabsHolder">
+<div class="tabsHolder">
   <div class="tabs tabs--inline tabs--big js-tabs">
     <% if @items: %>
       <% for item in @items: %>

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

@@ -52,34 +52,34 @@
     <div class="control">
       <div class="select-tabs js-selectBrowserWidth">
         <div class="tab" data-value="375">iPhone 6</div>
-        <div class="tab is-selected" data-value="fit"><%- @T('1:1') %></div>
-        <div class="tab" data-value="1280">MacBook</div>
+        <div class="tab" data-value="fit"><%- @T('1:1') %></div>
+        <div class="tab is-selected" data-value="1280">MacBook</div>
       </div>
     </div>
   </div>
 
   <label for="preview-iframe" class="formGroup-label"><%- @T('Preview') %></label>
   <div class="browser chat-demo js-browser">
-    <div class="browser-head">
+    <div class="browser-head js-demo-head">
       <form class="browser-input js-testurl" novalidate>
         <input type="url" class="js-testurl-input" id="preview-iframe" placeholder="zammad.org">
         <div class="loading icon small muted"></div>
       </form>
     </div>
-    <div class="browser-body js-demo">
+    <div class="browser-body js-browserBody">
       <div class="browser-website js-website">
-        <iframe class="js-iframe" sandbox></iframe>
+        <iframe class="js-iframe" sandbox="allow-scripts allow-same-origin"></iframe>
         <img class="js-screenshot">
       </div>
       <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="js-chat zammad-chat zammad-chat-is-open zammad-chat-is-visible is-open">
+          <div class="zammad-chat-header js-toggle-chat js-backgroundColor js-chatHeader">
             <div class="zammad-chat-header-controls">
               <span class="zammad-chat-agent-status" data-status="online"><%- @T('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>
+                <svg class="zammad-chat-header-icon-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">
@@ -90,7 +90,7 @@
             </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"><%- @T('<strong>Chat</strong> with us!') %></span>
+              <span class="zammad-chat-welcome-text js-chat-welcome"><strong>Chat</strong> with us!</span>
             </div>
           </div>
           <div class="zammad-chat-body">
@@ -118,7 +118,7 @@
           <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!">
+          <input class="js-chatTitle" 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>
@@ -153,28 +153,6 @@
         </div>
       </div>
     </fieldset>
-
-    <br>
-
-    <table class="settings-list">
-      <thead>
-        <tr>
-          <th style="white-space: nowrap;"><%- @T('Options') %></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            <label class="inline-label">
-              <span class="checkbox-replacement checkbox-replacement--inline">
-                <input type="checkbox" name="debug" value="true">
-                <%- @Icon('checkbox', 'icon-unchecked') %>
-                <%- @Icon('checkbox-checked', 'icon-checked') %>
-              </span>
-              <%- @T('Enable debugging for implementation.') %>
-            </label>
-      </tbody>
-    </table>
   </form>
 
   <h2><%- @T('Usage') %></h2>

app/assets/stylesheets/zammad.scss

@@ -7455,6 +7455,7 @@ output {
     width: 100%;
     height: 100%;
     background: white;
+    border-radius: 0 0 5px 5px;
   }
 
   img {
@@ -7484,7 +7485,7 @@ output {
     .loading.icon {
       position: absolute;
       right: 11px;
-      top: 11px;
+      top: 10px;
       display: none;
     }
   }
@@ -7508,13 +7509,45 @@ output {
     position: absolute;
     transform-origin: right bottom;
     transition: 500ms;
+    user-select: none;
+    will-change: transform;
+
+    .zammad-chat-welcome {
+      display: block !important;
+    }
+
+    .zammad-chat-header-icon-open {
+      display: inline !important;
+    }
+
+    .zammad-chat-agent-status,
+    .zammad-chat-header-icon-close,
+    .zammad-chat-agent { 
+      display: none !important;
+    }
+
+    &.is-open {      
+      .zammad-chat-agent {
+        display: block !important;
+      }
+      
+      .zammad-chat-header-icon-close,
+      .zammad-chat-agent-status {
+        display: inline-block !important;
+      }
     
-    .zammad-chat-body {
-      transition: 500ms; 
+      .zammad-chat-welcome,
+      .zammad-chat-header-icon-open {
+        display: none !important;
+      }
     }
     
     &.is-fullscreen {
       height: 100%;
+      
+      .zammad-chat-controls {
+        border-radius: 0 0 5px 5px;
+      }
     }
   }
 

public/assets/chat/chat.coffee

@@ -289,7 +289,7 @@ do($ = window.jQuery, window) ->
         @showLoader()
 
       @el
-        .addClass('zammad-chat-is-open')
+        .addClass('zammad-chat-is-visible')
 
       if !@sessionId
         @el.animate { bottom: 0 }, 500, @onOpenAnimationEnd
@@ -323,7 +323,7 @@ do($ = window.jQuery, window) ->
       @el.animate { bottom: -remainerHeight }, 500, @onCloseAnimationEnd
 
     onCloseAnimationEnd: =>
-      @el.removeClass('zammad-chat-is-open')
+      @el.removeClass('zammad-chat-is-visible')
       @disconnect()
       @isOpen = false
 

public/assets/chat/chat.js

@@ -1,64 +1,3 @@
-if (!window.zammadChatTemplates) {
-  window.zammadChatTemplates = {};
-}
-window.zammadChatTemplates["agent"] = function (__obj) {
-  if (!__obj) __obj = {};
-  var __out = [], __capture = function(callback) {
-    var out = __out, result;
-    __out = [];
-    callback.call(this);
-    result = __out.join('');
-    __out = out;
-    return __safe(result);
-  }, __sanitize = function(value) {
-    if (value && value.ecoSafe) {
-      return value;
-    } else if (typeof value !== 'undefined' && value != null) {
-      return __escape(value);
-    } else {
-      return '';
-    }
-  }, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
-  __safe = __obj.safe = function(value) {
-    if (value && value.ecoSafe) {
-      return value;
-    } else {
-      if (!(typeof value !== 'undefined' && value != null)) value = '';
-      var result = new String(value);
-      result.ecoSafe = true;
-      return result;
-    }
-  };
-  if (!__escape) {
-    __escape = __obj.escape = function(value) {
-      return ('' + value)
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-    };
-  }
-  (function() {
-    (function() {
-      if (this.agent.avatar) {
-        __out.push('\n<img class="zammad-chat-agent-avatar" src="');
-        __out.push(__sanitize(this.agent.avatar));
-        __out.push('">\n');
-      }
-    
-      __out.push('\n<span class="zammad-chat-agent-sentence">\n  <span class="zammad-chat-agent-name">');
-    
-      __out.push(__sanitize(this.agent.name));
-    
-      __out.push('</span>\n</span>');
-    
-    }).call(this);
-    
-  }).call(__obj);
-  __obj.safe = __objSafe, __obj.escape = __escape;
-  return __out.join('');
-};
-
 var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
   slice = [].slice;
 
@@ -74,9 +13,10 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       host: '',
       port: 6042,
       debug: false,
+      flat: false,
       fontSize: void 0,
-      buttonSelector: '.open-zammad-chat',
-      hiddenButtonClass: 'is-inactive',
+      buttonClass: 'open-zammad-chat',
+      inactiveClass: 'is-inactive',
       title: '<strong>Chat</strong> with us!'
     };
 
@@ -206,6 +146,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       }));
       this.options.target.append(this.el);
       this.input = this.el.find('.zammad-chat-input');
+      $("." + this.options.buttonClass).addClass(this.inactiveClass);
       this.el.find('.js-chat-open').click(this.open);
       this.el.find('.js-chat-close').click(this.close);
       this.el.find('.zammad-chat-controls').on('submit', this.onSubmit);
@@ -298,7 +239,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     };
 
     ZammadChat.prototype.onReady = function() {
-      $(this.options.buttonSelector).click(this.open).removeClass(this.hiddenButtonClass);
+      $("." + this.options.buttonClass).click(this.open).removeClass(this.inactiveClass);
       if (this.options.show) {
         return this.show();
       }
@@ -306,7 +247,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
 
     ZammadChat.prototype.onError = function(message) {
       this.log('debug', message);
-      return $(this.options.buttonSelector).hide();
+      return $("." + this.options.buttonClass).hide();
     };
 
     ZammadChat.prototype.reopenSession = function(data) {
@@ -423,7 +364,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       if (!this.sessionId) {
         this.showLoader();
       }
-      this.el.addClass('zammad-chat-is-open');
+      this.el.addClass('zammad-chat-is-visible');
       if (!this.sessionId) {
         this.el.animate({
           bottom: 0
@@ -465,7 +406,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     };
 
     ZammadChat.prototype.onCloseAnimationEnd = function() {
-      this.el.removeClass('zammad-chat-is-open');
+      this.el.removeClass('zammad-chat-is-visible');
       this.disconnect();
       this.isOpen = false;
       this.send('chat_session_close', {
@@ -724,6 +665,67 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
   return window.ZammadChat = ZammadChat;
 })(window.jQuery, window);
 
+if (!window.zammadChatTemplates) {
+  window.zammadChatTemplates = {};
+}
+window.zammadChatTemplates["agent"] = function (__obj) {
+  if (!__obj) __obj = {};
+  var __out = [], __capture = function(callback) {
+    var out = __out, result;
+    __out = [];
+    callback.call(this);
+    result = __out.join('');
+    __out = out;
+    return __safe(result);
+  }, __sanitize = function(value) {
+    if (value && value.ecoSafe) {
+      return value;
+    } else if (typeof value !== 'undefined' && value != null) {
+      return __escape(value);
+    } else {
+      return '';
+    }
+  }, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
+  __safe = __obj.safe = function(value) {
+    if (value && value.ecoSafe) {
+      return value;
+    } else {
+      if (!(typeof value !== 'undefined' && value != null)) value = '';
+      var result = new String(value);
+      result.ecoSafe = true;
+      return result;
+    }
+  };
+  if (!__escape) {
+    __escape = __obj.escape = function(value) {
+      return ('' + value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    };
+  }
+  (function() {
+    (function() {
+      if (this.agent.avatar) {
+        __out.push('\n<img class="zammad-chat-agent-avatar" src="');
+        __out.push(__sanitize(this.agent.avatar));
+        __out.push('">\n');
+      }
+    
+      __out.push('\n<span class="zammad-chat-agent-sentence">\n  <span class="zammad-chat-agent-name">');
+    
+      __out.push(__sanitize(this.agent.name));
+    
+      __out.push('</span>\n</span>');
+    
+    }).call(this);
+    
+  }).call(__obj);
+  __obj.safe = __objSafe, __obj.escape = __escape;
+  return __out.join('');
+};
+
 /*!
  * ----------------------------------------------------------------------------
  * "THE BEER-WARE LICENSE" (Revision 42):
@@ -932,7 +934,7 @@ window.zammadChatTemplates["loader"] = function (__obj) {
     (function() {
       __out.push('<div class="zammad-chat-modal">\n  <span class="zammad-chat-loading-animation">\n    <span class="zammad-chat-loading-circle"></span>\n    <span class="zammad-chat-loading-circle"></span>\n    <span class="zammad-chat-loading-circle"></span>\n  </span>\n  <span class="zammad-chat-modal-text">');
     
-      __out.push(__sanitize(this.T('Connecting')));
+      __out.push(this.T('Connecting'));
     
       __out.push('</span>\n</div>');
     
@@ -1117,7 +1119,7 @@ window.zammadChatTemplates["timeout"] = function (__obj) {
     
       __out.push('>');
     
-      __out.push(__sanitize(this.T('Start new conversation')));
+      __out.push(this.T('Start new conversation'));
     
       __out.push('</div>\n  </div>\n</div>');
     

public/assets/chat/chat.scss

@@ -26,7 +26,7 @@
     border-radius: 0 !important;
   }
 }
-.zammad-chat.zammad-chat-is-open {
+.zammad-chat.zammad-chat-is-visible {
   display: flex;
 }
 
@@ -62,7 +62,7 @@
   border-radius: 0 !important;
 }
 
-.zammad-chat.zammad-chat-is-open .zammad-chat-header {
+.zammad-chat.zammad-chat-is-visible .zammad-chat-header {
   cursor: default;
 }
 
@@ -93,11 +93,11 @@
 }
 
 .zammad-chat-header-icon-close,
-.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-open {
+.zammad-chat.zammad-chat-is-visible .zammad-chat-header-icon-open {
   display: none;
 }
 
-.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-close {
+.zammad-chat.zammad-chat-is-visible .zammad-chat-header-icon-close {
   display: inline;
 }