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 {