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

LICENSE-3RD-PARTY.txt

@@ -0,0 +1,28 @@
+-----------------------------------------------------------------------------
+
+tinycolor-min.js by (c) Brian Grinstead
+
+Source: https://github.com/bgrins/TinyColor
+
+Copyright (c), Brian Grinstead, http://briangrinstead.com
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+-----------------------------------------------------------------------------

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

@@ -66,6 +66,12 @@ class App.ChannelChat extends App.Controller
       type: 'String'
       description: 'CSS font-size with a unit like 12px, 1.5em. If left to undefined it inherits the font-size of the website.'
     }
+    {
+      name: 'flat'
+      default: 'false'
+      type: 'boolean'
+      description: 'Removes the shadows for a flat look.'
+    }
     {
       name: 'buttonClass'
       default: "'open-zammad-chat'"
@@ -167,45 +173,47 @@ class App.ChannelChat extends App.Controller
     if !src.startsWith('http')
       src = "http://#{ src }"
 
-    @iframe.attr 'src', src
+    @urlInput.addClass('is-loading')
+
+    # clear swatches and iframe
     @swatches.empty()
+    @iframe.attr('src', '').css('background-image', '')
 
     $.ajax
       url: 'https://images.zammad.com/api/v1/webpage/colors'
       data:
         url: src
-        count: 20
+      success: @renderDemoWebsite
-      success: @renderSwatches
       dataType: 'json'
 
-  renderSwatches: (data, xhr, status) =>
+  renderDemoWebsite: (data) =>
+
+    # @iframe.attr 'src', src
+    @renderSwatches data
+
+    @urlInput.removeClass('is-loading')
+
+  renderSwatches: (swatches) ->
+
+    swatches = _.map swatches, tinycolor
 
     # filter white
-    data = _.filter data, (color) =>
+    swatches = _.filter swatches, (color) =>
-      @getLuminance(color) < 0.85
+      0.25 < color.getLuminance() < 0.85
 
     htmlString = ''
 
-    count = 0
+    max = 8
-    countMax = 8
+    for color, i in swatches
-    for color in data
-      count += 1
       htmlString += App.view('channel/color_swatch')
-        color: color
+        color: color.toHexString()
-      break if count == countMax
+      break if i is max
 
     @swatches.html htmlString
 
-    if data[0]
+    # auto use first color
-      @useSwatchColor(undefined, data[0])
+    if swatches[0]
-
+      @useSwatchColor undefined, swatches[0].toHexString()
-  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, code) ->
     if event
@@ -267,6 +275,11 @@ class App.ChannelChat extends App.Controller
     if parseInt(params.fontSize, 10) > 2
       @chat.css('font-size', params.fontSize)
     @chatBackground.css('background', params.background)
+    if params.flat is 'on'
+      @chat.addClass('zammad-chat--flat')
+      params.flat = true
+    else
+      @chat.removeClass('zammad-chat--flat')
 
     if @permanent
       for key, value of @permanent
@@ -278,7 +291,7 @@ class App.ChannelChat extends App.Controller
           # coffeelint: disable=no_unnecessary_double_quotes
           paramString += ",\n"
           # coffeelint: enable=no_unnecessary_double_quotes
-        if value == 'true' || value == 'false' || _.isNumber(value)
+        if value == true || value == false || _.isNumber(value)
           paramString += "    #{key}: #{value}"
         else
           paramString += "    #{key}: '#{quote(value)}'"

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

@@ -63,7 +63,7 @@
     <div class="browser-head">
       <form class="browser-input js-testurl" novalidate>
         <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>
+        <div class="loading icon small"></div>
       </form>
     </div>
     <div class="browser-body js-demo">
@@ -138,6 +138,17 @@
         </div>
         <span class="help-block"><%- @T('The default font size is 12px.') %></span>
       </div>
+      <div class="switch form-group formGroup--halfSize">
+        <div class="formGroup-label">
+            <label for="form-chat-flat"><%- @T('Flat Design') %></label>
+          </div>
+        <div class="controls">
+          <div class="zammad-switch">
+             <input name="flat" type="checkbox" id="form-chat-flat">
+             <label for="form-chat-flat"></label>
+          </div>          
+        </div>
+      </div>
     </fieldset>
 
     <br>
@@ -159,16 +170,6 @@
               </span>
               <%- @T('Enable debugging for implementation.') %>
             </label>
-        <tr>
-          <td>
-            <label class="inline-label">
-              <span class="checkbox-replacement checkbox-replacement--inline">
-                <input type="checkbox" name="flat" value="true">
-                <%- @Icon('checkbox', 'icon-unchecked') %>
-                <%- @Icon('checkbox-checked', 'icon-checked') %>
-              </span>
-              <%- @T('Flat design.') %>
-            </label>
       </tbody>
     </table>
   </form>

app/assets/javascripts/app/views/navigation/menu.jst.eco

@@ -30,7 +30,7 @@
       <span class="counter badge badge--big"><%= item.counter %></span>
     <% end %>
     <% if item.switch isnt undefined: %>
-      <span class="zammad-switch zammad-switch--dark zammad-switch--small">
+      <span class="zammad-switch zammad-switch--dark zammad-switch--small zammad-switch--green">
          <input type="checkbox" id="<%- item.class %>-switch" class="js-switch" <% if item.switch: %>checked<% end %>>
          <label for="<%- item.class %>-switch"></label>
       </span>

app/assets/stylesheets/zammad.scss

@@ -1383,6 +1383,12 @@ textarea,
   &.form-control--multiline {
     height: auto;
   }
+
+  &:focus,
+  &.focus {
+    border-color: hsl(200,71%,59%);
+    box-shadow: 0 0 0 3px hsl(201,62%,90%);
+  }
 }
 
 input[type=url] {
@@ -1417,8 +1423,6 @@ input.time.time--12 {
   width: 7.5ch;
 }
 
-  .form-control:focus,
-  .form-control.focus,
   .tokenfield.focus {
     border-color: hsl(200,71%,59%);
     box-shadow: 0 0 0 3px hsl(201,62%,90%);
@@ -6451,10 +6455,10 @@ output {
 }
 
 .zammad-switch {
+  overflow: hidden;
   width: 50px;
   height: 30px;
   border-radius: 15px;
-  overflow: hidden;
   
   &.zammad-switch--small {
     width: 40px;
@@ -6473,9 +6477,14 @@ output {
       background: hsl(234,10%,19%);
     }
   }
+
+  &.zammad-switch--green input:checked + label {
+    background: $supergood-color;
+  }
 }
 
 .zammad-switch label {
+  margin: 0;
   position: relative;
   width: 100%;
   height: 100%;
@@ -6483,31 +6492,14 @@ output {
   outline: none;
   cursor: pointer;
   background: white;
-  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
+  box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
-}
+  user-select: none;
+  transition: background 200ms;
 
-.zammad-switch input {
+  &:after {
-  display: none;
-}
-
-.zammad-switch input:checked + label {
-  background: $supergood-color;
-  transition: none;
-}
-
-.zammad-switch input:focus + label {
-  transition: none;
-  background: hsl(200,71%,59%);
-  box-shadow: 0 0 0 3px hsl(201,62%,90%);
-}
-
-.zammad-switch label:after {
     content: "";
     position: absolute;
     transition: transform 200ms;
-}
-
-.zammad-switch label:after {
     width: calc(60% - 2px);
     height: calc(100% - 2px);
     border-radius: inherit;
@@ -6517,10 +6509,29 @@ output {
       0 0 0 1px rgba(0,0,0,.05),
       0 1px 3px rgba(0,0,0,.2);
     background: white;
+  }
 }
 
-.zammad-switch input:checked + label:after {
+.zammad-switch input {
+  display: none;
+
+  &:focus + label {
+    transition: none;
+    background: hsl(200,71%,59%);
+    box-shadow: 0 0 0 3px hsl(201,62%,90%);
+  }
+
+  &:checked + label {
+    background: hsl(200,71%,59%);
+  }
+
+  &:checked + label:after {
     transform: translateX(70%);
+  }
+}
+
+.controls .zammad-switch {
+  margin-top: 10px;
 }
 
 .horizontal-filter-text {
@@ -7439,10 +7450,22 @@ output {
   
   .browser-input {
     flex: 1;
-    margin-right: 10px;
+    position: relative;
     
     input {
       min-width: 0;
+      padding-right: 40px;
+    }
+
+    .loading.icon {
+      position: absolute;
+      right: 11px;
+      top: 11px;
+      display: none;
+    }
+
+    &.is-loading .loading.icon {
+      display: block;
     }
   }
 

public/assets/chat/chat.coffee

@@ -13,6 +13,7 @@ do($ = window.jQuery, window) ->
       host: ''
       port: 6042
       debug: false
+      flat: false
       fontSize: undefined
       buttonClass: 'open-zammad-chat'
       inactiveClass: 'is-inactive'