diff --git a/app/assets/javascripts/app/controllers/_channel/chat.coffee b/app/assets/javascripts/app/controllers/_channel/chat.coffee index de7a861a3..860e6988e 100644 --- a/app/assets/javascripts/app/controllers/_channel/chat.coffee +++ b/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 - 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( diff --git a/app/assets/javascripts/app/lib/bootstrap/bootstrap-datepicker.js b/app/assets/javascripts/app/lib/bootstrap/bootstrap-datepicker.js index ef1a3f4f5..7e00802d1 100755 --- a/app/assets/javascripts/app/lib/bootstrap/bootstrap-datepicker.js +++ b/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(); diff --git a/app/assets/javascripts/app/views/channel/chat.jst.eco b/app/assets/javascripts/app/views/channel/chat.jst.eco index f5afc037c..bc5dbee37 100644 --- a/app/assets/javascripts/app/views/channel/chat.jst.eco +++ b/app/assets/javascripts/app/views/channel/chat.jst.eco @@ -41,7 +41,7 @@ <% end %> - <%- @Icon('plus-small') %> + <%- @Icon('plus-small') %> Add Channel @@ -52,16 +52,18 @@
iPhone 6
-
<%- @T('Fit Width') %>
+
<%- @T('1:1') %>
MacBook
- + +
- + + <%- @T("Because of security reasons some websites can't be displayed (for example google.com).") %>
@@ -120,9 +122,10 @@
+
- +
<%- @T('Can be in any CSS color format.') %>
@@ -172,7 +175,7 @@

<%- @T('Usage') %>

-

<%- @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.') %>

+

<%- 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 `` closing tag.')) %>

Requirements

<%- @T("Zammad Chat requires jQuery. If you don't already use it on your website include it like this:") %>

@@ -213,7 +216,7 @@ $(function() {
  • <%- @T('The chat is turned off.') %>
  • <%- @T('There are too many people in queue for the chat.') %> - <%- 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.')) %>

    <%- @T('Options') %>

    diff --git a/app/assets/javascripts/app/views/channel/color_swatch.jst.eco b/app/assets/javascripts/app/views/channel/color_swatch.jst.eco new file mode 100644 index 000000000..8e93bddf4 --- /dev/null +++ b/app/assets/javascripts/app/views/channel/color_swatch.jst.eco @@ -0,0 +1 @@ +
    \ No newline at end of file diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index a1299ee27..fd181a115 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/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 { - 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;