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

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

@@ -6,7 +6,7 @@ class App.ChannelChat extends App.Controller
     'click .js-widget': 'widget'
     'change .js-params': 'updateParams'
     'keyup .js-params': 'updateParams'
-    'submit .js-testurl': 'changeDemoWebsite'
+    'submit .js-demo-head': 'changeDemoWebsite'
     'blur .js-testurl-input': 'changeDemoWebsite'
     'click .js-selectBrowserWidth': 'selectBrowserWidth'
     'click .js-swatch': 'usePaletteColor'
@@ -143,6 +143,12 @@ class App.ChannelChat extends App.Controller
     @adjustBrowserWidth()
     @updateParams()
 
+    # bind adjustBrowserWidth with parameter animate = false
+    $(window).on 'resize.chat-designer', => @adjustBrowserWidth false
+
+  release: ->
+    $(window).off 'resize.chat-designer'
+
   selectBrowserWidth: (event) =>
     tab = $(event.target).closest('[data-value]')
 
@@ -151,12 +157,13 @@ class App.ChannelChat extends App.Controller
     @browserWidth = tab.attr('data-value')
     @adjustBrowserWidth()
 
-  adjustBrowserWidth: ->
+  adjustBrowserWidth: (animate =  true) =>
     width = parseInt @browserWidth, 10
 
     # reset zoom
     @chat
       .removeClass('is-fullscreen')
+      .toggleClass('no-transition', !animate)
       .css 'transform', "translateY(#{ @getChatOffset() }px)"
     @browser.css('width', '')
     @website.css
@@ -197,7 +204,7 @@ class App.ChannelChat extends App.Controller
     if !@url.startsWith('http')
       @url = "http://#{ @url }"
 
-    @urlInput.addClass('is-loading')
+    @urlInput.addClass('is-loading').focus()
 
     @palette.empty()
 

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

@@ -60,12 +60,13 @@
 
   <label for="preview-iframe" class="formGroup-label"><%- @T('Preview') %></label>
   <div class="browser chat-demo js-browser">
-    <div class="browser-head js-demo-head">
+    <form class="browser-head js-demo-head" novalidate>
-      <form class="browser-input js-testurl" novalidate>
+      <div class="browser-input">
         <input type="url" class="js-testurl-input" id="preview-iframe" placeholder="zammad.org">
         <div class="loading icon small muted"></div>
-      </form>
+      </div>
-    </div>
+      <input type="submit" class="btn" value="<%- @T('Load') %>">
+    </form>
     <div class="browser-body js-browserBody">
       <div class="browser-website js-website">
         <iframe class="js-iframe" sandbox="allow-scripts allow-same-origin"></iframe>
@@ -73,7 +74,7 @@
       </div>
       <style>@import "/assets/chat/chat.css";</style>
       <div class="chat-demo-animationHolder">
-        <div class="js-chat zammad-chat zammad-chat-is-open zammad-chat-is-visible is-open">
+        <div class="js-chat zammad-chat zammad-chat-is-shown 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>

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

@@ -1 +1 @@
-<div class="color-swatch js-swatch" style="background: <%= @color %>" data-color="<%= @color %>"></div>
+<div class="color-swatch js-swatch" style="color: <%= @color %>" data-color="<%= @color %>"></div>

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

@@ -15,7 +15,7 @@
             <li role="presentation">
               <a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>">
                 <span class="dropdown-iconSpacer">
-                  <span class="color-swatch icon" style="background: <%= entry.color %>"></span>
+                  <span class="color-swatch icon" style="color: <%= entry.color %>"></span>
                 </span>
                 <%- @Ti(entry.name) %>
                 <span class="dropdown-selectedSpacer<%= ' is-selected' if i is @activeColorIndex %>">

app/assets/javascripts/app/views/layout_ref/twitter_conversation.jst.eco

@@ -11,19 +11,19 @@
           </div>
           <ul class="dropdown-menu dropdown-menu-right" role="menu">
             <li role="presentation">
-              <a class="js-highlightColor" data-key="0" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #f7e7b2"></span></span> Yellow <span class="dropdown-selectedSpacer js-selectedIcon is-selected"><%- @Icon('checkmark', '') %></span></a>
+              <a class="js-highlightColor" data-key="0" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #f7e7b2"></span></span> Yellow <span class="dropdown-selectedSpacer js-selectedIcon is-selected"><%- @Icon('checkmark', '') %></span></a>
             </li>
             <li role="presentation">
-              <a class="js-highlightColor" data-key="1" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #bce7b6"></span></span> Green <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
+              <a class="js-highlightColor" data-key="1" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #bce7b6"></span></span> Green <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
             </li>
             <li role="presentation">
-              <a class="js-highlightColor" data-key="2" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #b3ddf9"></span></span> Blue <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
+              <a class="js-highlightColor" data-key="2" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #b3ddf9"></span></span> Blue <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
             </li>
             <li role="presentation">
-              <a class="js-highlightColor" data-key="3" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #fea9c5"></span></span> Pink <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
+              <a class="js-highlightColor" data-key="3" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #fea9c5"></span></span> Pink <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
             </li>
             <li role="presentation">
-              <a class="js-highlightColor" data-key="4" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #eac5ee"></span></span> Purple <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
+              <a class="js-highlightColor" data-key="4" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #eac5ee"></span></span> Purple <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
             </li>
           </ul>
         </div>

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

@@ -10,7 +10,7 @@
     <li role="presentation">
       <a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>">
         <span class="dropdown-iconSpacer">
-          <span class="color-swatch icon" style="background: <%= entry.color %>"></span>
+          <span class="color-swatch icon" style="color: <%= entry.color %>"></span>
         </span>
         <%- @Ti(entry.name) %>
         <span class="dropdown-selectedSpacer js-selectedIcon<%= ' is-selected' if i is @activeColorIndex %>">

app/assets/stylesheets/zammad.scss

@@ -2332,13 +2332,18 @@ ol.tabs li {
 }
 
 .color-swatch {
-  border-radius: 100%;
+  padding: 2px;
-  width: 11px;
+  margin: -2px 0;
-  height: 11px;
   cursor: pointer;
   
-  & + .color-swatch {
+  /* :after technique for bigger click area */
-    margin-left: 4px;
+  &:after {
+    content: "";
+    display: inline-block;
+    height: 11px;
+    width: 11px;
+    border-radius: 100%;
+    background: currentColor;
   }
 }
 
@@ -7440,7 +7445,7 @@ output {
     position: relative;
     height: 100%;
     transform-origin: left top;
-    overflow: auto;
+    overflow: hidden;
     
     &[data-mode=screenshot] iframe,
     &[data-mode=iframe] img {
@@ -7466,13 +7471,13 @@ output {
 
 .browser-head {
   display: flex;
-  align-items: center;
   padding: 10px;
   border-bottom: 1px solid hsl(0,0%,90%);
   
   .browser-input {
-    flex: 1;
     position: relative;
+    flex: 1;
+    margin-right: 10px;
     
     input {
       min-width: 0;
@@ -7512,6 +7517,10 @@ output {
     transition: 500ms;
     user-select: none;
     will-change: transform;
+    
+    &.no-transition {
+      transition: none;
+    }
 
     .zammad-chat-welcome {
       display: block !important;

public/assets/chat/chat.coffee

@@ -278,8 +278,7 @@ do($ = window.jQuery, window) ->
       if !@sessionId
         @showLoader()
 
-      @el
+      @el.addClass('zammad-chat-is-open')
-        .addClass('zammad-chat-is-visible')
 
       if !@sessionId
         @el.animate { bottom: 0 }, 500, @onOpenAnimationEnd
@@ -309,6 +308,7 @@ do($ = window.jQuery, window) ->
       @closeWindow()
 
     closeWindow: =>
+      @el.removeClass('zammad-chat-is-open')
       remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
       @el.animate { bottom: -remainerHeight }, 500, @onCloseAnimationEnd
 
@@ -327,12 +327,12 @@ do($ = window.jQuery, window) ->
       @onWebSocketOpen()
 
     hide: ->
-      @el.removeClass('zammad-chat-is-visible')
+      @el.removeClass('zammad-chat-is-shown')
 
     show: ->
       return @state if @state is 'off' or @state is 'unsupported'
 
-      @el.addClass('zammad-chat-is-visible')
+      @el.addClass('zammad-chat-is-shown')
 
       if !@inputInitialized
         @inputInitialized = true

public/assets/chat/chat.css

@@ -25,7 +25,7 @@
       height: 100vh;
       border-radius: 0 !important; } }
 
-.zammad-chat.zammad-chat-is-visible {
+.zammad-chat.zammad-chat-is-shown {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
@@ -54,7 +54,7 @@
 .zammad-chat.is-fullscreen .zammad-chat-header {
   border-radius: 0 !important; }
 
-.zammad-chat.zammad-chat-is-visible .zammad-chat-header {
+.zammad-chat.zammad-chat-is-open .zammad-chat-header {
   cursor: default; }
 
 .zammad-chat-welcome-text {
@@ -80,10 +80,10 @@
   width: 1.3em; }
 
 .zammad-chat-header-icon-close,
-.zammad-chat.zammad-chat-is-visible .zammad-chat-header-icon-open {
+.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-open {
   display: none; }
 
-.zammad-chat.zammad-chat-is-visible .zammad-chat-header-icon-close {
+.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-close {
   display: inline; }
 
 .zammad-chat-agent {
@@ -105,7 +105,7 @@
   margin: 0 1em;
   display: inline-block;
   line-height: 2em;
-  padding: 0 .7em;
+  padding: 0 0.7em;
   border-radius: 1em;
   background: rgba(0, 0, 0, 0.1);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset; }

public/assets/chat/chat.js

@@ -375,7 +375,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       if (!this.sessionId) {
         this.showLoader();
       }
-      this.el.addClass('zammad-chat-is-visible');
+      this.el.addClass('zammad-chat-is-open');
       if (!this.sessionId) {
         this.el.animate({
           bottom: 0
@@ -410,6 +410,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
 
     ZammadChat.prototype.closeWindow = function() {
       var remainerHeight;
+      this.el.removeClass('zammad-chat-is-open');
       remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight();
       return this.el.animate({
         bottom: -remainerHeight
@@ -429,7 +430,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     };
 
     ZammadChat.prototype.hide = function() {
-      return this.el.removeClass('zammad-chat-is-visible');
+      return this.el.removeClass('zammad-chat-is-shown');
     };
 
     ZammadChat.prototype.show = function() {
@@ -437,7 +438,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       if (this.state === 'off' || this.state === 'unsupported') {
         return this.state;
       }
-      this.el.addClass('zammad-chat-is-visible');
+      this.el.addClass('zammad-chat-is-shown');
       if (!this.inputInitialized) {
         this.inputInitialized = true;
         this.input.autoGrow({
@@ -683,6 +684,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, '&')
+        .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):
@@ -760,67 +822,6 @@ jQuery.fn.autoGrow = function(options) {
 
   });
 };
-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('');
-};
-
 if (!window.zammadChatTemplates) {
   window.zammadChatTemplates = {};
 }

public/assets/chat/chat.scss

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