From b73e42650d4d7c8fd4cc39c0c316ece43392e69f Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 20 Aug 2018 13:27:50 +0100 Subject: [PATCH 1/3] Refactor hex colour preview Javascript MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit improves the code that previews a hex colour when setting up or changing an email branding. Specifically it: - refactors the Javascript to conform to our patterns (module pattern, preprocessed with Gulp) - makes the code work when there are multiple colour previews on one page It also does some visual prettifying, because I couldn’t help myself… --- app/assets/javascripts/colourPreview.js | 26 +++++++++++++++++++ .../stylesheets/components/textbox.scss | 8 +++--- app/main/forms.py | 3 --- app/templates/components/textbox.html | 7 +++-- .../views/email-branding/manage-branding.html | 12 +-------- gulpfile.babel.js | 1 + 6 files changed, 36 insertions(+), 21 deletions(-) create mode 100644 app/assets/javascripts/colourPreview.js diff --git a/app/assets/javascripts/colourPreview.js b/app/assets/javascripts/colourPreview.js new file mode 100644 index 000000000..da9546ba7 --- /dev/null +++ b/app/assets/javascripts/colourPreview.js @@ -0,0 +1,26 @@ +(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); + this.$preview = $('.textbox-colour-preview', component); + + this.$input + .on('change keyup', 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..e723b9a41 100644 --- a/app/templates/components/textbox.html +++ b/app/templates/components/textbox.html @@ -60,10 +60,9 @@ {% macro colour_textbox( field, - width='2-3', - colour='#FFFFFF' + width='2-3' ) %} -
+
{% endmacro %} diff --git a/app/templates/views/email-branding/manage-branding.html b/app/templates/views/email-branding/manage-branding.html index 8b628a9a4..f191d2a2d 100644 --- a/app/templates/views/email-branding/manage-branding.html +++ b/app/templates/views/email-branding/manage-branding.html @@ -34,15 +34,5 @@
- - + {% endblock %} 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()) From 6501105768ffe672e01aedac2153545d4954ee6c Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 20 Aug 2018 15:03:58 +0100 Subject: [PATCH 2/3] Refactor to not repeat lots of Jinja code --- app/assets/javascripts/colourPreview.js | 5 ++- app/templates/components/textbox.html | 31 +++---------------- .../views/email-branding/manage-branding.html | 8 ++--- .../settings/edit-name/index.html | 2 +- 4 files changed, 14 insertions(+), 32 deletions(-) diff --git a/app/assets/javascripts/colourPreview.js b/app/assets/javascripts/colourPreview.js index da9546ba7..58f975e4f 100644 --- a/app/assets/javascripts/colourPreview.js +++ b/app/assets/javascripts/colourPreview.js @@ -9,7 +9,10 @@ this.start = component => { this.$input = $('input', component); - this.$preview = $('.textbox-colour-preview', component); + + $(component).append( + this.$preview = $('') + ); this.$input .on('change keyup', this.update) diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html index e723b9a41..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' -) %} -
- - {% 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 f191d2a2d..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', 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 From b10f0747aebe61631576f41ac8af844a7a64d9aa Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 20 Aug 2018 15:04:07 +0100 Subject: [PATCH 3/3] Use input event not keyup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The `oninput` event is a more performant way to detect changes to a textbox’s contents (compared to `onkeydown`, `onpaste`, etc). It’s not supported in older browsers, but since this is a likely to be used by platform admin users only that’s OK. --- app/assets/javascripts/colourPreview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/colourPreview.js b/app/assets/javascripts/colourPreview.js index 58f975e4f..102c574b8 100644 --- a/app/assets/javascripts/colourPreview.js +++ b/app/assets/javascripts/colourPreview.js @@ -15,7 +15,7 @@ ); this.$input - .on('change keyup', this.update) + .on('input', this.update) .trigger('change'); };