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

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

@@ -9,9 +9,9 @@ class App.ChannelChat extends App.Controller
     'submit .js-testurl': 'changeDemoWebsite'
     'blur .js-testurl-input': 'changeDemoWebsite'
     'click .js-selectBrowserWidth': 'selectBrowserWidth'
+    'click .js-swatch': 'useSwatchColor'
 
   elements:
-    '.js-demo': 'demo'
     '.js-browser': 'browser'
     '.js-iframe': 'iframe'
     '.js-chat': 'chat'
@@ -19,6 +19,8 @@ class App.ChannelChat extends App.Controller
     '.js-backgroundColor': 'chatBackground'
     '.js-paramsBlock': 'paramsBlock'
     '.js-code': 'code'
+    '.js-swatches': 'swatches'
+    '.js-color': 'colorField'
 
   apiOptions: [
     { 
@@ -142,16 +144,16 @@ class App.ChannelChat extends App.Controller
 
     return if value is 'fit'
 
-    if width < @demo.width()
+    if width < @el.width()
       @chat.addClass('is-fullscreen')
       @browser.css('width', "#{ width }px")
     else
-      percentage = @demo.width()/width
+      percentage = @el.width()/width
       @chat.css('transform', "scale(#{ percentage })")
       @iframe.css
         transform: "scale(#{ percentage })"
-        width: @demo.width() / percentage
+        width: @el.width() / percentage
-        height: @demo.height() / percentage
+        height: @el.height() / percentage
 
   changeDemoWebsite: (event) =>
     event.preventDefault() if event
@@ -166,6 +168,41 @@ class App.ChannelChat extends App.Controller
       src = "http://#{ src }"
 
     @iframe.attr 'src', src
+    @swatches.empty()
+
+    $.ajax
+      url: 'https://images.zammad.com/api/v1/webpage/colors'
+      data:
+        url: src
+        count: 6
+      success: @renderSwatches
+      dataType: 'json'
+
+  renderSwatches: (data, xhr, status) =>
+
+    # filter white
+    data = _.filter data, (color) =>
+      @getLuminance(color) < 0.85
+
+    htmlString = ""
+
+    for color in data
+      htmlString += App.view('channel/color_swatch')
+        color: color
+
+    @swatches.html htmlString
+
+  getLuminance: (hex) ->
+    # input: #ffffff, output: 1
+    result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec hex
+    r = parseInt(result[1], 16)
+    g = parseInt(result[2], 16)
+    b = parseInt(result[3], 16)
+    return (0.2126*r + 0.7152*g + 0.0722*b)/255
+
+  useSwatchColor: (event) ->
+    @colorField.val $(event.currentTarget).attr('data-color')
+    @updateParams()
 
   new: (e) =>
     new App.ControllerGenericNew(

app/assets/javascripts/app/lib/bootstrap/bootstrap-datepicker.js

@@ -25,6 +25,7 @@
 	Zammad Edits:
 		- fix todayBtn toggle of display none and block: toggleClass instead
 		- allow custom template as options parameter
+		- fix that place method doesn't think that the container is the window, but rather the real window is the window
 
  */
 
@@ -685,7 +686,7 @@
 				calendarHeight = this.picker.outerHeight(),
 				visualPadding = 10,
 				container = $(this.o.container),
-				windowWidth = container.width(),
+				windowWidth = $(window).width(),
 				scrollTop = container.scrollTop(),
 				appendOffset = container.offset();
 

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

@@ -41,7 +41,7 @@
   <% end %>
       <tr>
         <td colspan="4" class="settings-list-action-cell js-add">
-          <%- @Icon('plus-small') %>
+          <%- @Icon('plus-small') %> Add Channel
     </tbody>
   </table>
 
@@ -52,16 +52,18 @@
     <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('Fit Width') %></div>
+        <div class="tab is-selected" data-value="fit"><%- @T('1:1') %></div>
         <div class="tab" 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">
       <form class="browser-input js-testurl" novalidate>
-        <input type="url" class="js-testurl-input" placeholder="zammad.org">
+        <input type="url" class="js-testurl-input" id="preview-iframe" placeholder="zammad.org">
+        <span class="help-block"><%- @T("Because of security reasons some websites can't be displayed (for example google.com).") %></span>
       </form>
     </div>
     <div class="browser-body js-demo">
@@ -120,9 +122,10 @@
       <div class="input form-group formGroup--halfSize">
         <div class="formGroup-label">
           <label for="form-chat-background"><%- @T('Background color') %></label>
+          <div class="align-right horizontal js-swatches"></div>
         </div>
         <div class="controls">
-          <input type="text" id="form-chat-background" name="background" value="">
+          <input class="js-color" type="text" id="form-chat-background" name="background" value="">
         </div>
         <span class="help-block"><%- @T('Can be in any CSS color format.') %></span>
       </div>
@@ -172,7 +175,7 @@
 
   <h2><%- @T('Usage') %></h2>
 
-  <p><%- @T('Insert the widget-code into the source code of every page the chat should be visible on. It should be placed at the end of the page source code before the `&lt;/body&gt;` closing tag.') %></p>
+  <p><%- marked(@T('Insert the widget-code into the source code of every page the chat should be visible on. It should be placed at the end of the page source code before the `</body>` closing tag.')) %></p>
 
   <h3>Requirements</h3>
   <p><%- @T("Zammad Chat requires jQuery. If you don't already use it on your website include it like this:") %></p>
@@ -213,7 +216,7 @@ $(function() {
       <li><%- @T('The chat is turned off.') %>
       <li><%- @T('There are too many people in queue for the chat.') %>
     </ol>
-    <%- marked(@T('When you turn on debubbing by setting the option `debug` to `true` the reason gets printed to the javascript console.')) %>
+    <%- marked(@T('When you turn on debugging by setting the option `debug` to `true` the reason gets printed to the javascript console.')) %>
   </p>
   
   <h3><%- @T('Options') %></h3>

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

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

app/assets/stylesheets/zammad.scss

@@ -1383,15 +1383,6 @@ textarea,
   &.form-control--multiline {
     height: auto;
   }
-
-  &[readonly] {
-    background: hsl(198,10%,95%);
-    
-    &:focus {
-      box-shadow: none;
-      border-color: hsl(0,0%,90%);
-    }
-  }
 }
 
 input[type=url] {
@@ -2336,6 +2327,11 @@ ol.tabs li {
   border-radius: 100%;
   width: 11px;
   height: 11px;
+  cursor: pointer;
+  
+  & + .color-swatch {
+    margin-left: 4px;
+  }
 }
 
 .icon-status {
@@ -6692,20 +6688,20 @@ output {
     color: hsl(199,19%,80%);
     text-decoration: line-through;
   }
-
+  
-  thead th:first-child {
+  & > thead > tr > th:first-child {
     border-top-left-radius: 4px;
   }
 
-  thead th:last-child {
+  & > thead > tr > th:last-child {
     border-top-right-radius: 4px;
   }
 
-  tbody tr:last-child td:first-child {
+  & > tbody > tr:last-child > td:first-child {
     border-bottom-left-radius: 4px;
   }
 
-  tbody tr:last-child td:last-child {
+  & > tbody > tr:last-child > td:last-child {
     border-bottom-right-radius: 4px;
   }
 
@@ -6716,18 +6712,20 @@ output {
   .settings-list-action-cell {
     @extend .u-clickable;
     text-align: center;
+    color: hsl(198,19%,72%);
     background: hsl(197,22%,96%);
     line-height: 1;
+    padding-top: 11px;
+    padding-bottom: 9px;
     
     &:hover {
-      .icon {
+      color: hsl(60,1%,34%);
-        fill: hsl(60,1%,34%);
-      }
     }
     
     .icon {
-      fill: hsl(198,19%,72%);
+      fill: currentColor;
       vertical-align: top;
+      margin-top: -2px;
     }
   }
 
@@ -7001,9 +6999,13 @@ output {
   
   .datepicker-switch {
     padding: 12px 0;
+    font-weight: bold;
     font-size: 15px;
     text-align: center;
     cursor: pointer;
+    letter-spacing: 0;
+    line-height: 1.5;
+    text-transform: none;
     
     &:hover {
       background: hsl(240,10%,14%);
@@ -7444,6 +7446,10 @@ output {
     }
   }
 
+  .help-block {
+    margin-bottom: -3px;
+  }
+
   .browser-control {
     width: 39px;
     display: flex;