chat designer: responsive preview

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

@@ -6,13 +6,13 @@ class App.ChannelChat extends App.Controller
     'click .js-widget': 'widget'
     'change .js-params': 'updateParams'
     'keyup .js-params': 'updateParams'
-    'submit .js-testurl': 'changeTestWebsite'
+    'submit .js-testurl': 'changeDemoWebsite'
-    'blur .js-testurl-input': 'changeTestWebsite'
+    'blur .js-testurl-input': 'changeDemoWebsite'
-    'click .js-zoom-in': 'zoomIn'
+    'click .js-selectBrowserWidth': 'selectBrowserWidth'
-    'click .js-zoom-out': 'zoomOut'
 
   elements:
     '.js-demo': 'demo'
+    '.js-browser': 'browser'
     '.js-iframe': 'iframe'
     '.js-chat': 'chat'
     '.js-testurl-input': 'urlInput'
@@ -58,27 +58,43 @@ class App.ChannelChat extends App.Controller
       area: 'Chat::Base'
     )
 
-  zoomOut: =>
+  selectBrowserWidth: (event) =>
-    if @demo.width() < 1024
+    tab = $(event.target).closest('[data-value]')
-      percentage = @demo.width()/1024
+
+    # select tab
+    tab.addClass('is-selected').siblings().removeClass('is-selected')
+    
+    value = tab.attr('data-value')
+    width = parseInt value, 10
+
+    # reset zoom
+    @chat.css('transform', "")
+    @demo.css('width', "")
+    @chat.removeClass('is-fullscreen')
+    @iframe.css
+      transform: ""
+      width: ""
+      height: ""
+
+    return if value is 'fit'
+
+    if width < @demo.width()
+      @chat.addClass('is-fullscreen')
+      @demo.css('width', "#{ width }px")
+    else
+      percentage = @demo.width()/width
       @chat.css('transform', "scale(#{ percentage })")
       @iframe.css
         transform: "scale(#{ percentage })"
         width: @demo.width() / percentage
         height: @demo.height() / percentage
 
-  zoomIn: =>
+  changeDemoWebsite: (event) =>
-    @chat.css('transform', "")
-    @iframe.css
-      transform: ""
-      width: ""
-      height: ""
-
-
-  changeTestWebsite: (event) =>
     event.preventDefault() if event
 
-    return if @urlInput.val() is @url
+    # fire both on enter and blur
+    # but cache url
+    return if @urlInput.val() is "" or @urlInput.val() is @url
     @url = @urlInput.val()
 
     src = @url

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

@@ -8,13 +8,16 @@
   
   <h2><%- @T('Designer') %></h2>
   
-  <div class="browser chat-demo">
+  <div class="browser chat-demo js-browser">
     <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="select-tabs js-selectBrowserWidth">
-      <div class="browser-control zoom-in js-zoom-in"><%- @Icon('zoom-in') %></div>
+        <div class="tab" data-value="375">iPhone 6</div>
+        <div class="tab is-selected" data-value="fit">Fit Width</div>
+        <div class="tab" data-value="1280">MacBook</div>
+      </div>
     </div>
     <div class="browser-body js-demo">
       <iframe class="js-iframe"></iframe>

app/assets/stylesheets/zammad.scss

@@ -6529,6 +6529,7 @@ output {
   color: hsl(60,1%,34%);
   background: white;
   table-layout: auto;
+  margin-bottom: 20px;
   
   &.is-invalid {
     border-radius: 3px;
@@ -7327,16 +7328,16 @@ output {
   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;
+  height: 450px;
+  width: 100%;
+  transition: 500ms;
+  background: #eee;
   
   iframe {
     position: absolute;
@@ -7351,17 +7352,21 @@ output {
 
 .browser-head {
   display: flex;
-  padding: 5px;
+  align-items: center;
+  padding: 10px;
   border-bottom: 1px solid hsl(0,0%,90%);
   
   .browser-input {
     flex: 1;
-    margin: 5px;
+    margin-right: 10px;
+    
+    input {
+      min-width: 0;
+    }
   }
 
   .browser-control {
     width: 39px;
-    margin: 5px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -7370,11 +7375,22 @@ output {
   }
 }
 
-
 .chat-demo {
   .zammad-chat {
     position: absolute;
     transform-origin: right bottom;
+    transition: 500ms;
+    
+    .zammad-chat-body {
+      transition: 500ms; 
+    }
+    
+    &.is-fullscreen {
+      height: 100%;
+    }
+  }
+
+  .zammad-chat-header {
     pointer-events: auto;
   }
 
@@ -7393,6 +7409,22 @@ output {
   from { transform: translateY(100%); }
 }
 
+.select-tabs {
+  display: flex;
+  border: 1px solid hsla(206,100%,3%,0.08);
+  border-radius: 3px;
+  
+  .tab {
+    height: 39px;
+    padding-top: 11px;
+    color: hsl(199,18%,72%);
+    
+    &.is-selected {
+      background: linear-gradient(hsla(199,30%,40%,.08), hsla(199,30%,40%,.03));
+    }
+  }
+}
+
 /*
 
   ----------------

public/assets/chat/chat.coffee

@@ -16,6 +16,7 @@ do($ = window.jQuery, window) ->
       fontSize: undefined
       buttonSelector: '.open-zammad-chat'
       hiddenButtonClass: 'is-inactive'
+      title: '<strong>Chat</strong> with us!'
 
     _messageCount: 0
     isOpen: true
@@ -30,7 +31,6 @@ do($ = window.jQuery, window) ->
     initialQueueDelay: 10000
     wsReconnectEnable: true
     strings:
-      '<strong>Chat</strong> with us!': '<strong>Chatten</strong> sie mit uns!'
       'Online': 'Online'
       'Offline': 'Offline'
       'Connecting': 'Verbinden'
@@ -80,7 +80,9 @@ do($ = window.jQuery, window) ->
         return
 
       @options = $.extend {}, @defaults, options
-      @el = $(@view('chat')())
+      @el = $(@view('chat')(
+        title: @options.title
+      ))
       @options.target.append @el
 
       @input = @el.find('.zammad-chat-input')

public/assets/chat/chat.css

@@ -5,6 +5,7 @@
   bottom: 0;
   font-size: 12px;
   width: 33em;
+  height: 30em;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
   border-radius: 5px 5px 0 0;
   will-change: bottom;
@@ -12,6 +13,17 @@
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column; }
+  .zammad-chat.is-fullscreen {
+    right: 0;
+    width: 100%;
+    height: 100vh;
+    border-radius: 0 !important; }
+  @media only screen and (max-width: 768px) {
+    .zammad-chat {
+      right: 0;
+      width: 100%;
+      height: 100vh;
+      border-radius: 0 !important; } }
 
 .zammad-chat.zammad-chat-is-open {
   display: -webkit-flex;
@@ -35,6 +47,12 @@
   border-radius: 5px 5px 0 0;
   overflow: hidden;
   cursor: pointer; }
+  @media only screen and (max-width: 768px) {
+    .zammad-chat-header {
+      border-radius: 0 !important; } }
+
+.zammad-chat.is-fullscreen .zammad-chat-header {
+  border-radius: 0 !important; }
 
 .zammad-chat.zammad-chat-is-open .zammad-chat-header {
   cursor: default; }
@@ -168,9 +186,17 @@
 
 .zammad-chat-body {
   padding: 0.5em 1em;
-  height: 25em;
   overflow: auto;
-  background: white; }
+  background: white;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1; }
+  @media only screen and (max-width: 768px) {
+    .zammad-chat-body {
+      height: auto;
+      -webkit-flex: 1;
+      -ms-flex: 1;
+      flex: 1; } }
 
 .zammad-chat-timestamp {
   text-align: center;
@@ -343,23 +369,3 @@
 .zammad-chat--flat .zammad-chat-button,
 .zammad-chat--flat .zammad-chat-status {
   box-shadow: none; }
-
-/*
-
-  Mobile Design
-  
-*/
-@media only screen and (max-width: 768px) {
-  .zammad-chat {
-    left: 0;
-    right: 0;
-    width: auto;
-    height: 100vh; }
-  .zammad-chat-body {
-    height: auto;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1; }
-  .zammad-chat,
-  .zammad-chat-header {
-    border-radius: 0 !important; } }

public/assets/chat/chat.js

@@ -76,7 +76,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       debug: false,
       fontSize: void 0,
       buttonSelector: '.open-zammad-chat',
-      hiddenButtonClass: 'is-inactive'
+      hiddenButtonClass: 'is-inactive',
+      title: '<strong>Chat</strong> with us!'
     };
 
     ZammadChat.prototype._messageCount = 0;
@@ -104,7 +105,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     ZammadChat.prototype.wsReconnectEnable = true;
 
     ZammadChat.prototype.strings = {
-      '<strong>Chat</strong> with us!': '<strong>Chatten</strong> sie mit uns!',
       'Online': 'Online',
       'Offline': 'Offline',
       'Connecting': 'Verbinden',
@@ -201,7 +201,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
         return;
       }
       this.options = $.extend({}, this.defaults, options);
-      this.el = $(this.view('chat')());
+      this.el = $(this.view('chat')({
+        title: this.options.title
+      }));
       this.options.target.append(this.el);
       this.input = this.el.find('.zammad-chat-input');
       this.el.find('.js-chat-open').click(this.open);
@@ -861,7 +863,7 @@ window.zammadChatTemplates["chat"] = function (__obj) {
     
       __out.push('>\n    <div class="zammad-chat-header-controls">\n      <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online"></span>\n      <span class="zammad-chat-header-icon">\n        <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"/></svg>\n        <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"/></svg>\n      </span>\n    </div>\n    <div class="zammad-chat-agent zammad-chat-is-hidden">\n    </div>\n    <div class="zammad-chat-welcome">\n      <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"/></svg>\n      <span class="zammad-chat-welcome-text">');
     
-      __out.push(this.T('<strong>Chat</strong> with us!'));
+      __out.push(this.title);
     
       __out.push('</span>\n    </div>\n  </div>\n  <div class="zammad-chat-body"></div>\n  <form class="zammad-chat-controls">\n    <textarea class="zammad-chat-input" rows="1" placeholder="');
     

public/assets/chat/chat.scss

@@ -5,11 +5,26 @@
   bottom: 0;
   font-size: 12px;
   width: 33em;
+  height: 30em;
   box-shadow: 0 3px 10px rgba(0,0,0,.3);
   border-radius: 5px 5px 0 0;
   will-change: bottom;
   display: none;
   flex-direction: column;
+  
+  &.is-fullscreen {
+    right: 0;
+    width: 100%;
+    height: 100vh;
+    border-radius: 0 !important;
+  }
+
+  @media only screen and (max-width: 768px) {
+    right: 0;
+    width: 100%;
+    height: 100vh;
+    border-radius: 0 !important;
+  }
 }
 .zammad-chat.zammad-chat-is-open {
   display: flex;
@@ -37,6 +52,14 @@
   border-radius: 5px 5px 0 0;
   overflow: hidden;
   cursor: pointer;
+  
+  @media only screen and (max-width: 768px) {
+    border-radius: 0 !important;
+  }
+}
+
+.zammad-chat.is-fullscreen .zammad-chat-header {
+  border-radius: 0 !important;
 }
 
 .zammad-chat.zammad-chat-is-open .zammad-chat-header {
@@ -171,9 +194,14 @@
 
 .zammad-chat-body {
   padding: 0.5em 1em;
-  height: 25em;
   overflow: auto;
   background: white;
+  flex: 1;
+  
+  @media only screen and (max-width: 768px) {
+    height: auto;
+    flex: 1;
+  }
 }
 
 .zammad-chat-timestamp {
@@ -347,26 +375,3 @@
 .zammad-chat--flat .zammad-chat-status {
   box-shadow: none;
 }
-
-/*
-
-  Mobile Design
-  
-*/
-
-@media only screen and (max-width: 768px) {
-  .zammad-chat {
-    left: 0;
-    right: 0;
-    width: auto;
-    height: 100vh;
-  }
-  .zammad-chat-body {
-    height: auto;
-    flex: 1;
-  }
-  .zammad-chat,
-  .zammad-chat-header {
-    border-radius: 0 !important;
-  }
-}

public/assets/chat/views/chat.eco

@@ -11,7 +11,7 @@
     </div>
     <div class="zammad-chat-welcome">
       <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"/></svg>
-      <span class="zammad-chat-welcome-text"><%- @T('<strong>Chat</strong> with us!') %></span>
+      <span class="zammad-chat-welcome-text"><%- @title %></span>
     </div>
   </div>
   <div class="zammad-chat-body"></div>