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

This commit is contained in:
Martin Edenhofer 2015-11-23 17:12:27 +01:00
commit c0720b041b
5 changed files with 79 additions and 31 deletions

View file

@ -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
height: @demo.height() / percentage
width: @el.width() / 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(

View file

@ -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();

View file

@ -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>

View file

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

View file

@ -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 {
fill: hsl(60,1%,34%);
}
color: 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;