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

app/assets/javascripts/lib/utils/color_utils.js

+/**
+ * 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';
+};

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);
 };

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)")

changelogs/unreleased/61787-the-colour-selector-for-broadcast-messages-should-provide-a-few-default-options-with-descriptive-labels-like.yml

+---
+title: add color selector to broadcast messages form
+merge_request: 30988
+author:
+type: other

spec/frontend/lib/utils/color_utils_spec.js

+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');
+    });
+  });
+});