From ddf809abbdba79495a8f798655007a84d0bc224e Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 23 Nov 2015 14:09:28 +0100 Subject: [PATCH 1/8] remove :readonly style cause it clashes with calendar subscriptions --- app/assets/stylesheets/zammad.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index a1299ee27..3b88e1927 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] { From 6f49895d3174ac09a8c0ba3890df64463f606287 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 23 Nov 2015 14:09:58 +0100 Subject: [PATCH 2/8] chat designer: rename fit width to 1:1 --- app/assets/javascripts/app/views/channel/chat.jst.eco | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/app/views/channel/chat.jst.eco b/app/assets/javascripts/app/views/channel/chat.jst.eco index f5afc037c..d41a07cfe 100644 --- a/app/assets/javascripts/app/views/channel/chat.jst.eco +++ b/app/assets/javascripts/app/views/channel/chat.jst.eco @@ -52,7 +52,7 @@
iPhone 6
-
<%- @T('Fit Width') %>
+
<%- @T('1:1') %>
MacBook
From 809e28c69d79e5ef413580e63dda4666e8b7da56 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 23 Nov 2015 14:34:29 +0100 Subject: [PATCH 3/8] fix datepicker ui when in settings-list --- app/assets/stylesheets/zammad.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 3b88e1927..1efbaee47 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -6683,20 +6683,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; } @@ -6992,9 +6992,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%); From 62bdc30d57eeeddd0bd49f622fad47e028639612 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 23 Nov 2015 14:34:47 +0100 Subject: [PATCH 4/8] adjust datepicker to work in settings-list (holidays) --- .../javascripts/app/lib/bootstrap/bootstrap-datepicker.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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(); From 59761d1e2fe82398e99c8f854f374435393592f8 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 23 Nov 2015 14:42:00 +0100 Subject: [PATCH 5/8] chat designer: more explicit + add channel label --- app/assets/javascripts/app/views/channel/chat.jst.eco | 6 +++--- app/assets/stylesheets/zammad.scss | 10 ++++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/app/views/channel/chat.jst.eco b/app/assets/javascripts/app/views/channel/chat.jst.eco index d41a07cfe..d21f76102 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 @@ -172,7 +172,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 +213,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/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 1efbaee47..e5a9bceb5 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -6707,18 +6707,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; } } From bf4301cb98d8517bda431ce4c0fe3d9517708911 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 23 Nov 2015 15:23:28 +0100 Subject: [PATCH 6/8] chat designer: fix demo browser transition from iphone to macbook --- .../javascripts/app/controllers/_channel/chat.coffee | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_channel/chat.coffee b/app/assets/javascripts/app/controllers/_channel/chat.coffee index de7a861a3..545328420 100644 --- a/app/assets/javascripts/app/controllers/_channel/chat.coffee +++ b/app/assets/javascripts/app/controllers/_channel/chat.coffee @@ -11,7 +11,6 @@ class App.ChannelChat extends App.Controller 'click .js-selectBrowserWidth': 'selectBrowserWidth' elements: - '.js-demo': 'demo' '.js-browser': 'browser' '.js-iframe': 'iframe' '.js-chat': 'chat' @@ -142,16 +141,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 From c7a6d5f62fce9d789e4bba0d5c4e352b9bfcf7b6 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 23 Nov 2015 15:58:43 +0100 Subject: [PATCH 7/8] chat designer: add disclaimer to preview --- app/assets/javascripts/app/views/channel/chat.jst.eco | 6 ++++-- app/assets/stylesheets/zammad.scss | 4 ++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/app/views/channel/chat.jst.eco b/app/assets/javascripts/app/views/channel/chat.jst.eco index d21f76102..12a2601c2 100644 --- a/app/assets/javascripts/app/views/channel/chat.jst.eco +++ b/app/assets/javascripts/app/views/channel/chat.jst.eco @@ -57,11 +57,13 @@ - + +
    - + + <%- @T("Because of security reasons some websites can't be displayed (for example google.com).") %>
    diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index e5a9bceb5..2b4da673b 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -7441,6 +7441,10 @@ output { } } + .help-block { + margin-bottom: -3px; + } + .browser-control { width: 39px; display: flex; From 331083317da6fe72dd161f91a3b0fbd4638e6299 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 23 Nov 2015 17:05:10 +0100 Subject: [PATCH 8/8] chat designer: connect color-swatches api --- .../app/controllers/_channel/chat.coffee | 38 +++++++++++++++++++ .../app/views/channel/chat.jst.eco | 3 +- .../app/views/channel/color_swatch.jst.eco | 1 + app/assets/stylesheets/zammad.scss | 5 +++ 4 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 app/assets/javascripts/app/views/channel/color_swatch.jst.eco diff --git a/app/assets/javascripts/app/controllers/_channel/chat.coffee b/app/assets/javascripts/app/controllers/_channel/chat.coffee index 545328420..860e6988e 100644 --- a/app/assets/javascripts/app/controllers/_channel/chat.coffee +++ b/app/assets/javascripts/app/controllers/_channel/chat.coffee @@ -9,6 +9,7 @@ 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-browser': 'browser' @@ -18,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: [ { @@ -165,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/views/channel/chat.jst.eco b/app/assets/javascripts/app/views/channel/chat.jst.eco index 12a2601c2..bc5dbee37 100644 --- a/app/assets/javascripts/app/views/channel/chat.jst.eco +++ b/app/assets/javascripts/app/views/channel/chat.jst.eco @@ -122,9 +122,10 @@
    +
    - +
    <%- @T('Can be in any CSS color format.') %>
    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 2b4da673b..fd181a115 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -2327,6 +2327,11 @@ ol.tabs li { border-radius: 100%; width: 11px; height: 11px; + cursor: pointer; + + & + .color-swatch { + margin-left: 4px; + } } .icon-status {