Merge branch 'develop' of github.com:martini/zammad into develop
This commit is contained in:
Martin Edenhofer
commit
c0720b041b
5 changed files with 79 additions and 31 deletions
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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 `</body>` 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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<div class="color-swatch js-swatch" style="background: <%= @color %>" data-color="<%= @color %>"></div>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue