From d35f986c22e6d75c218d28cbef15a122e2e3273a Mon Sep 17 00:00:00 2001 From: Chris Toynbee Date: Thu, 16 May 2019 09:23:56 +1200 Subject: Fix for #61788 predefined colours dont have descriptive labels --- app/helpers/labels_helper.rb | 56 +++++++++++-------- app/views/admin/labels/_form.html.haml | 5 +- .../shared/issuable/_label_page_create.html.haml | 4 +- app/views/shared/labels/_form.html.haml | 7 +-- ...efined-colours-dont-have-descriptive-labels.yml | 5 ++ locale/gitlab.pot | 63 ++++++++++++++++++++++ 6 files changed, 104 insertions(+), 36 deletions(-) create mode 100644 changelogs/unreleased/61788-predefined-colours-dont-have-descriptive-labels.yml diff --git a/app/helpers/labels_helper.rb b/app/helpers/labels_helper.rb index acc8aeae282..a6b3b79737b 100644 --- a/app/helpers/labels_helper.rb +++ b/app/helpers/labels_helper.rb @@ -76,29 +76,39 @@ module LabelsHelper end def suggested_colors - [ - '#0033CC', - '#428BCA', - '#44AD8E', - '#A8D695', - '#5CB85C', - '#69D100', - '#004E00', - '#34495E', - '#7F8C8D', - '#A295D6', - '#5843AD', - '#8E44AD', - '#FFECDB', - '#AD4363', - '#D10069', - '#CC0033', - '#FF0000', - '#D9534F', - '#D1D100', - '#F0AD4E', - '#AD8D43' - ] + { + '#0033CC' => s_('SuggestedColors|UA blue'), + '#428BCA' => s_('SuggestedColors|Moderate blue'), + '#44AD8E' => s_('SuggestedColors|lime green'), + '#A8D695' => s_('SuggestedColors|Feijoa'), + '#5CB85C' => s_('SuggestedColors|Slightly desaturated green'), + '#69D100' => s_('SuggestedColors|Bright Green'), + '#004E00' => s_('SuggestedColors|Very dark lime green'), + '#34495E' => s_('SuggestedColors|Very dark desaturated blue'), + '#7F8C8D' => s_('SuggestedColors|Dark grayish cyan'), + '#A295D6' => s_('SuggestedColors|Slightly desaturated blue'), + '#5843AD' => s_('SuggestedColors|Dark moderate blue'), + '#8E44AD' => s_('SuggestedColors|Dark moderate violet'), + '#FFECDB' => s_('SuggestedColors|Very pale orange'), + '#AD4363' => s_('SuggestedColors|Dark moderate pink'), + '#D10069' => s_('SuggestedColors|Strong pink'), + '#CC0033' => s_('SuggestedColors|Strong red'), + '#FF0000' => s_('SuggestedColors|Pure red'), + '#D9534F' => s_('SuggestedColors|Soft red'), + '#D1D100' => s_('SuggestedColors|Strong yellow'), + '#F0AD4E' => s_('SuggestedColors|Soft orange'), + '#AD8D43' => s_('SuggestedColors|Dark moderate orange') + } + end + + def render_suggested_colors + colors_html = suggested_colors.map do |color_hex_value, color_name| + link_to('', '#', class: "has-tooltip", style: "background-color: #{color_hex_value}", data: { color: color_hex_value }, title: color_name) + end + + content_tag(:div, class: 'suggest-colors') do + colors_html.join.html_safe + end end def text_color_for_bg(bg_color) diff --git a/app/views/admin/labels/_form.html.haml b/app/views/admin/labels/_form.html.haml index 49aa62a5408..299d0a12e6c 100644 --- a/app/views/admin/labels/_form.html.haml +++ b/app/views/admin/labels/_form.html.haml @@ -24,10 +24,7 @@ %br = _("Or you can choose one of the suggested colors below") - .suggest-colors - - suggested_colors.each do |color| - = link_to '#', style: "background-color: #{color}", data: { color: color } do -   + = render_suggested_colors .form-actions = f.submit _('Save'), class: 'btn btn-success js-save-button' diff --git a/app/views/shared/issuable/_label_page_create.html.haml b/app/views/shared/issuable/_label_page_create.html.haml index d173e3c0192..a0d3bc64f1f 100644 --- a/app/views/shared/issuable/_label_page_create.html.haml +++ b/app/views/shared/issuable/_label_page_create.html.haml @@ -9,9 +9,7 @@ .dropdown-labels-error.js-label-error %input#new_label_name.default-dropdown-input{ type: "text", placeholder: _('Name new label') } .suggest-colors.suggest-colors-dropdown - - suggested_colors.each do |color| - = link_to '#', style: "background-color: #{color}", data: { color: color } do -   + = render_suggested_colors .dropdown-label-color-input .dropdown-label-color-preview.js-dropdown-label-color-preview %input#new_label_color.default-dropdown-input{ type: "text", placeholder: _('Assign custom color like #FF0000') } diff --git a/app/views/shared/labels/_form.html.haml b/app/views/shared/labels/_form.html.haml index 4b88aff3313..78ff225daad 100644 --- a/app/views/shared/labels/_form.html.haml +++ b/app/views/shared/labels/_form.html.haml @@ -25,12 +25,7 @@ Choose any color. %br Or you can choose one of the suggested colors below - - .suggest-colors - - suggested_colors.each do |color| - = link_to '#', style: "background-color: #{color}", data: { color: color } do -   - + = render_suggested_colors .form-actions - if @label.persisted? = f.submit 'Save changes', class: 'btn btn-success js-save-button' diff --git a/changelogs/unreleased/61788-predefined-colours-dont-have-descriptive-labels.yml b/changelogs/unreleased/61788-predefined-colours-dont-have-descriptive-labels.yml new file mode 100644 index 00000000000..25c83d24007 --- /dev/null +++ b/changelogs/unreleased/61788-predefined-colours-dont-have-descriptive-labels.yml @@ -0,0 +1,5 @@ +--- +title: Adds a text label to color pickers to improve accessibility. +merge_request: 28343 +author: Chris Toynbee +type: changed diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 81a0ad46b77..dc119784885 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -9400,6 +9400,69 @@ msgstr "" msgid "Suggested change" msgstr "" +msgid "SuggestedColors|Bright Green" +msgstr "" + +msgid "SuggestedColors|Dark grayish cyan" +msgstr "" + +msgid "SuggestedColors|Dark moderate blue" +msgstr "" + +msgid "SuggestedColors|Dark moderate orange" +msgstr "" + +msgid "SuggestedColors|Dark moderate pink" +msgstr "" + +msgid "SuggestedColors|Dark moderate violet" +msgstr "" + +msgid "SuggestedColors|Feijoa" +msgstr "" + +msgid "SuggestedColors|Moderate blue" +msgstr "" + +msgid "SuggestedColors|Pure red" +msgstr "" + +msgid "SuggestedColors|Slightly desaturated blue" +msgstr "" + +msgid "SuggestedColors|Slightly desaturated green" +msgstr "" + +msgid "SuggestedColors|Soft orange" +msgstr "" + +msgid "SuggestedColors|Soft red" +msgstr "" + +msgid "SuggestedColors|Strong pink" +msgstr "" + +msgid "SuggestedColors|Strong red" +msgstr "" + +msgid "SuggestedColors|Strong yellow" +msgstr "" + +msgid "SuggestedColors|UA blue" +msgstr "" + +msgid "SuggestedColors|Very dark desaturated blue" +msgstr "" + +msgid "SuggestedColors|Very dark lime green" +msgstr "" + +msgid "SuggestedColors|Very pale orange" +msgstr "" + +msgid "SuggestedColors|lime green" +msgstr "" + msgid "Sunday" msgstr "" -- cgit v1.2.3