Merge branch 'develop' of github.com:martini/zammad into develop
This commit is contained in:
Martin Edenhofer
commit
c190abf342
28
LICENSE-3RD-PARTY.txt
Normal file
28
LICENSE-3RD-PARTY.txt
Normal file
|
|
@ -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.
|
||||
|
||||
-----------------------------------------------------------------------------
|
||||
|
|
@ -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: @renderSwatches
|
||||
success: @renderDemoWebsite
|
||||
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) =>
|
||||
@getLuminance(color) < 0.85
|
||||
swatches = _.filter swatches, (color) =>
|
||||
0.25 < color.getLuminance() < 0.85
|
||||
|
||||
htmlString = ''
|
||||
|
||||
count = 0
|
||||
countMax = 8
|
||||
for color in data
|
||||
count += 1
|
||||
max = 8
|
||||
for color, i in swatches
|
||||
htmlString += App.view('channel/color_swatch')
|
||||
color: color
|
||||
break if count == countMax
|
||||
color: color.toHexString()
|
||||
break if i is max
|
||||
|
||||
@swatches.html htmlString
|
||||
|
||||
if data[0]
|
||||
@useSwatchColor(undefined, data[0])
|
||||
|
||||
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
|
||||
# auto use first color
|
||||
if swatches[0]
|
||||
@useSwatchColor undefined, swatches[0].toHexString()
|
||||
|
||||
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)}'"
|
||||
|
|
|
|||
4
app/assets/javascripts/app/lib/base/tinycolor-min.js
vendored
Normal file
4
app/assets/javascripts/app/lib/base/tinycolor-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,44 +6492,46 @@ 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;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
transition: transform 200ms;
|
||||
width: calc(60% - 2px);
|
||||
height: calc(100% - 2px);
|
||||
border-radius: inherit;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0,0,0,.05),
|
||||
0 1px 3px rgba(0,0,0,.2);
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
box-shadow:
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ do($ = window.jQuery, window) ->
|
|||
host: ''
|
||||
port: 6042
|
||||
debug: false
|
||||
flat: false
|
||||
fontSize: undefined
|
||||
buttonClass: 'open-zammad-chat'
|
||||
inactiveClass: 'is-inactive'
|
||||
|
|
|
|||
Loading…
Reference in a new issue