Commit 946f7c06 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch...

Merge branch '61787-the-colour-selector-for-broadcast-messages-should-provide-a-few-default-options-with-descriptive-labels-like-red-green-blue' into 'master'

Resolve "Add color selector for broadcast messages"

Closes #61787

See merge request gitlab-org/gitlab-ce!30988
parents 6e8139c8 35238511
/**
* Convert hex color to rgb array
*
* @param hex string
* @returns array|null
*/
export const hexToRgb = hex => {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
const fullHex = hex.replace(shorthandRegex, (_m, r, g, b) => r + r + g + g + b + b);
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(fullHex);
return result
? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]
: null;
};
export const textColorForBackground = backgroundColor => {
const [r, g, b] = hexToRgb(backgroundColor);
if (r + g + b > 500) {
return '#333333';
}
return '#FFFFFF';
};
...@@ -3,26 +3,31 @@ import _ from 'underscore'; ...@@ -3,26 +3,31 @@ import _ from 'underscore';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
import flash from '~/flash'; import flash from '~/flash';
import { __ } from '~/locale'; import { __ } from '~/locale';
import { textColorForBackground } from '~/lib/utils/color_utils';
export default () => { 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(); 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() { $('input#broadcast_message_font').on('input', function onMessageFontInput() {
const previewColor = $(this).val(); 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', 'input',
_.debounce(function onMessageInput() { _.debounce(function onMessageInput() {
const message = $(this).val(); const message = $(this).val();
if (message === '') { if (message === '') {
$('.js-broadcast-message-preview').text(__('Your message here')); $jsBroadcastMessagePreview.text(__('Your message here'));
} else { } else {
axios axios
.post(previewPath, { .post(previewPath, {
...@@ -31,10 +36,40 @@ export default () => { ...@@ -31,10 +36,40 @@ export default () => {
}, },
}) })
.then(({ data }) => { .then(({ data }) => {
$('.js-broadcast-message-preview').html(data.message); $jsBroadcastMessagePreview.html(data.message);
}) })
.catch(() => flash(__('An error occurred while rendering preview broadcast message'))); .catch(() => flash(__('An error occurred while rendering preview broadcast message')));
} }
}, 250), }, 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);
}; };
...@@ -17,19 +17,27 @@ ...@@ -17,19 +17,27 @@
required: true, required: true,
dir: 'auto', dir: 'auto',
data: { preview_path: preview_admin_broadcast_messages_path } data: { preview_path: preview_admin_broadcast_messages_path }
.form-group.row.js-toggle-colors-container .form-group.row
.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
.col-sm-2.col-form-label .col-sm-2.col-form-label
= f.label :color, "Background Color" = f.label :color, _("Background color")
.col-sm-10 .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 .form-group.row.js-toggle-colors-container.toggle-colors.hide
.col-sm-2.col-form-label .col-sm-2.col-form-label
= f.label :font, "Font Color" = f.label :font, "Font Color"
.col-sm-10 .col-sm-10
= f.color_field :font, class: "form-control" = f.color_field :font, class: "form-control text-font-color"
.form-group.row .form-group.row
.col-sm-2.col-form-label .col-sm-2.col-form-label
= f.label :starts_at, _("Starts at (UTC)") = f.label :starts_at, _("Starts at (UTC)")
......
---
title: add color selector to broadcast messages form
merge_request: 30988
author:
type: other
import { textColorForBackground, hexToRgb } from '~/lib/utils/color_utils';
describe('Color utils', () => {
describe('Converting hex code to rgb', () => {
it('convert hex code to rgb', () => {
expect(hexToRgb('#000000')).toEqual([0, 0, 0]);
expect(hexToRgb('#ffffff')).toEqual([255, 255, 255]);
});
it('convert short hex code to rgb', () => {
expect(hexToRgb('#000')).toEqual([0, 0, 0]);
expect(hexToRgb('#fff')).toEqual([255, 255, 255]);
});
it('handle conversion regardless of the characters case', () => {
expect(hexToRgb('#f0F')).toEqual([255, 0, 255]);
});
});
describe('Getting text color for given background', () => {
// following tests are being ported from `text_color_for_bg` section in labels_helper_spec.rb
it('uses light text on dark backgrounds', () => {
expect(textColorForBackground('#222E2E')).toEqual('#FFFFFF');
});
it('uses dark text on light backgrounds', () => {
expect(textColorForBackground('#EEEEEE')).toEqual('#333333');
});
it('supports RGB triplets', () => {
expect(textColorForBackground('#FFF')).toEqual('#333333');
expect(textColorForBackground('#000')).toEqual('#FFFFFF');
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment