diff --git a/app/assets/javascripts/colourPreview.js b/app/assets/javascripts/colourPreview.js new file mode 100644 index 000000000..102c574b8 --- /dev/null +++ b/app/assets/javascripts/colourPreview.js @@ -0,0 +1,29 @@ +(function(Modules) { + "use strict"; + + let isSixDigitHex = value => value.match(/^#[0-9A-F]{6}$/i); + let colourOrWhite = value => isSixDigitHex(value) ? value : '#FFFFFF'; + + Modules.ColourPreview = function() { + + this.start = component => { + + this.$input = $('input', component); + + $(component).append( + this.$preview = $('') + ); + + this.$input + .on('input', this.update) + .trigger('change'); + + }; + + this.update = () => this.$preview.css( + 'background', colourOrWhite(this.$input.val()) + ); + + }; + +})(window.GOVUK.Modules); diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss index 0555c0586..c675b016e 100644 --- a/app/assets/stylesheets/components/textbox.scss +++ b/app/assets/stylesheets/components/textbox.scss @@ -62,11 +62,13 @@ .textbox-colour-preview { @include media(desktop) { - width: 34px; - height: 34px; + width: 38px; + height: 38px; margin-left: 5px; - border: 2px solid #0B0C0C; + border-radius: 50%; + box-shadow: inset 0 0 0 1px rgba($black, 0.2); display: inline-block; vertical-align: top; + transition: background 0.3s ease-out; } } diff --git a/app/main/forms.py b/app/main/forms.py index b3678f75d..fbc856b3b 100644 --- a/app/main/forms.py +++ b/app/main/forms.py @@ -734,21 +734,18 @@ class ServiceUpdateEmailBranding(StripWhitespaceForm): domain = StringField('Domain') colour = StringField( 'Colour', - render_kw={'onchange': 'update_colour(this)'}, validators=[ Regexp(regex="^$|^#(?:[0-9a-fA-F]{3}){1,2}$", message='Must be a valid color hex code') ] ) banner_colour = StringField( 'Banner colour', - render_kw={'onchange': 'update_colour(this)'}, validators=[ Regexp(regex="^$|^#(?:[0-9a-fA-F]{3}){1,2}$", message='Must be a valid color hex code') ] ) single_id_colour = StringField( 'Single identity colour', - render_kw={'onchange': 'update_colour(this)'}, validators=[ Regexp(regex="^$|^#(?:[0-9a-fA-F]{3}){1,2}$", message='Must be a valid color hex code') ] diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html index 955ffb7d5..fc14d6dc4 100644 --- a/app/templates/components/textbox.html +++ b/app/templates/components/textbox.html @@ -4,6 +4,7 @@ hint=False, highlight_tags=False, autofocus=False, + colour_preview=False, help_link=None, help_link_text=None, width='2-3', @@ -11,7 +12,10 @@ safe_error_message=False, rows=8 ) %} -
+
{% endmacro %} - -{% macro colour_textbox( - field, - width='2-3', - colour='#FFFFFF' -) %} -
- - {% set field_class = 'form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else '') %} - {% set field_class = 'form-control ' + field_class + (' form-control-error' if field.errors else '') %} - {{ field( - class=field_class, - data_module='', - rows='1', - **kwargs - ) }} - -
-{% endmacro %} diff --git a/app/templates/views/email-branding/manage-branding.html b/app/templates/views/email-branding/manage-branding.html index 8b628a9a4..26d219fa3 100644 --- a/app/templates/views/email-branding/manage-branding.html +++ b/app/templates/views/email-branding/manage-branding.html @@ -1,7 +1,7 @@ {% extends "views/platform-admin/_base_template.html" %} {% from "components/file-upload.html" import file_upload %} {% from "components/page-footer.html" import page_footer %} -{% from "components/textbox.html" import textbox, colour_textbox %} +{% from "components/textbox.html" import textbox %} {% block service_page_title %} {{ '{} email branding'.format('Update' if email_branding else 'Create')}} @@ -22,9 +22,9 @@
{{textbox(form.name)}}
{{textbox(form.text)}}
- {{colour_textbox(form.colour, width='1-4', colour=email_branding.colour if email_branding)}} - {{colour_textbox(form.banner_colour, width='1-4', colour=email_branding.banner_colour if email_branding)}} - {{colour_textbox(form.single_id_colour, width='1-4', colour=email_branding.single_id_colour if email_branding)}} + {{ textbox(form.colour, width='1-4', colour_preview=True) }} + {{ textbox(form.banner_colour, width='1-4', colour_preview=True) }} + {{ textbox(form.single_id_colour, width='1-4', colour_preview=True) }}
{{textbox(form.domain)}}
{{ page_footer( 'Save', @@ -34,15 +34,5 @@
- - + {% endblock %} diff --git a/app/templates/views/organisations/organisation/settings/edit-name/index.html b/app/templates/views/organisations/organisation/settings/edit-name/index.html index 2c3df4084..1e710f166 100644 --- a/app/templates/views/organisations/organisation/settings/edit-name/index.html +++ b/app/templates/views/organisations/organisation/settings/edit-name/index.html @@ -1,6 +1,6 @@ {% extends "org_template.html" %} {% from "components/page-footer.html" import page_footer %} -{% from "components/textbox.html" import textbox, colour_textbox %} +{% from "components/textbox.html" import textbox %} {% block org_page_title %} Change organisation name diff --git a/gulpfile.babel.js b/gulpfile.babel.js index c8c43188c..a7da1e92e 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -75,6 +75,7 @@ gulp.task('javascripts', () => gulp paths.src + 'javascripts/preventDuplicateFormSubmissions.js', paths.src + 'javascripts/fullscreenTable.js', paths.src + 'javascripts/emailPreviewPane.js', + paths.src + 'javascripts/colourPreview.js', paths.src + 'javascripts/main.js' ]) .pipe(plugins.prettyerror())