diff options
author | Ammar Alakkad <aalakkad@gitlab.com> | 2019-07-26 16:06:12 +0300 |
---|---|---|
committer | Ammar Alakkad <aalakkad@gitlab.com> | 2019-07-26 16:06:12 +0300 |
commit | 352385111fb7fffead03b7a474a7feea3fdaebdf (patch) | |
tree | d0651db53d79576244d7a0a25e6c1192aa28aeb0 | |
parent | 29a7c83eb30914627163f481de40836de5dc8158 (diff) | |
download | gitlab-ce-61787-the-colour-selector-for-broadcast-messages-should-provide-a-few-default-options-with-descriptive-labels-like-red-green-blue.tar.gz |
Add default colors for broadcast messages61787-the-colour-selector-for-broadcast-messages-should-provide-a-few-default-options-with-descriptive-labels-like-red-green-blue
3 files changed, 62 insertions, 14 deletions
diff --git a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js index 6e00e31b828..7a6a486f551 100644 --- a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js +++ b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js @@ -3,26 +3,31 @@ import _ from 'underscore'; import axios from '~/lib/utils/axios_utils'; import flash from '~/flash'; import { __ } from '~/locale'; +import { textColorForBackground } from '~/lib/utils/color_utils'; export default () => { - $('input#broadcast_message_color').on('input', function onMessageColorInput() { + const $broadcastMessageColor = $('input#broadcast_message_color'); + const $broadcastMessagePreview = $('div.broadcast-message-preview'); + $broadcastMessageColor.on('input', function onMessageColorInput() { const previewColor = $(this).val(); - $('div.broadcast-message-preview').css('background-color', previewColor); + $broadcastMessagePreview.css('background-color', previewColor); }); $('input#broadcast_message_font').on('input', function onMessageFontInput() { const previewColor = $(this).val(); - $('div.broadcast-message-preview').css('color', previewColor); + $broadcastMessagePreview.css('color', previewColor); }); - const previewPath = $('textarea#broadcast_message_message').data('previewPath'); + const $broadcastMessage = $('textarea#broadcast_message_message'); + const previewPath = $broadcastMessage.data('previewPath'); + const $jsBroadcastMessagePreview = $('.js-broadcast-message-preview'); - $('textarea#broadcast_message_message').on( + $broadcastMessage.on( 'input', _.debounce(function onMessageInput() { const message = $(this).val(); if (message === '') { - $('.js-broadcast-message-preview').text(__('Your message here')); + $jsBroadcastMessagePreview.text(__('Your message here')); } else { axios .post(previewPath, { @@ -31,10 +36,40 @@ export default () => { }, }) .then(({ data }) => { - $('.js-broadcast-message-preview').html(data.message); + $jsBroadcastMessagePreview.html(data.message); }) .catch(() => flash(__('An error occurred while rendering preview broadcast message'))); } }, 250), ); + + const updateColorPreview = () => { + const selectedBackgroundColor = $broadcastMessageColor.val(); + const contrastTextColor = textColorForBackground(selectedBackgroundColor); + + // save contrastTextColor to hidden input field + $('input.text-font-color').val(contrastTextColor); + + // Updates the preview color with the hex-color input + const selectedColorStyle = { + backgroundColor: selectedBackgroundColor, + color: contrastTextColor, + }; + + $('.label-color-preview').css(selectedColorStyle); + + return $broadcastMessagePreview.css(selectedColorStyle); + }; + + const setSuggestedColor = e => { + const color = $(e.currentTarget).data('color'); + $broadcastMessageColor + .val(color) + // Notify the form, that color has changed + .trigger('input'); + updateColorPreview(); + return e.preventDefault(); + }; + + $(document).on('click', '.suggest-colors a', setSuggestedColor); }; diff --git a/app/views/admin/broadcast_messages/_form.html.haml b/app/views/admin/broadcast_messages/_form.html.haml index c8ee87c6212..962234d3aea 100644 --- a/app/views/admin/broadcast_messages/_form.html.haml +++ b/app/views/admin/broadcast_messages/_form.html.haml @@ -17,19 +17,27 @@ required: true, dir: 'auto', data: { preview_path: preview_admin_broadcast_messages_path } - .form-group.row.js-toggle-colors-container - .col-sm-10.offset-sm-2 - = link_to 'Customize colors', '#', class: 'js-toggle-colors-link' - .form-group.row.js-toggle-colors-container.toggle-colors.hide + .form-group.row .col-sm-2.col-form-label - = f.label :color, "Background Color" + = f.label :color, _("Background color") .col-sm-10 - = f.color_field :color, class: "form-control" + .input-group + .input-group-prepend + .input-group-text.label-color-preview{ :style => 'background-color: ' + @broadcast_message.color + '; color: ' + @broadcast_message.font } + = ' '.html_safe + = f.text_field :color, class: "form-control" + .form-text.text-muted + = _('Choose any color.') + %br + = _("Or you can choose one of the suggested colors below") + + = render_suggested_colors + .form-group.row.js-toggle-colors-container.toggle-colors.hide .col-sm-2.col-form-label = f.label :font, "Font Color" .col-sm-10 - = f.color_field :font, class: "form-control" + = f.color_field :font, class: "form-control text-font-color" .form-group.row .col-sm-2.col-form-label = f.label :starts_at, _("Starts at (UTC)") diff --git a/changelogs/unreleased/61787-the-colour-selector-for-broadcast-messages-should-provide-a-few-default-options-with-descriptive-labels-like.yml b/changelogs/unreleased/61787-the-colour-selector-for-broadcast-messages-should-provide-a-few-default-options-with-descriptive-labels-like.yml new file mode 100644 index 00000000000..ec6e9c5aff8 --- /dev/null +++ b/changelogs/unreleased/61787-the-colour-selector-for-broadcast-messages-should-provide-a-few-default-options-with-descriptive-labels-like.yml @@ -0,0 +1,5 @@ +--- +title: add color selector to broadcast messages form +merge_request: 30988 +author: +type: other |