From 42fdb49d1a70701f343d27d0e15b65117c324e3e Mon Sep 17 00:00:00 2001 From: rr- Date: Wed, 6 Apr 2016 15:11:20 +0200 Subject: [PATCH] client/forms: fix disabling forms --- client/css/forms.css | 47 ++++++++++++++++++++++------ client/css/main.css | 12 +++++-- client/js/views/base_view.js | 12 +++++++ client/js/views/login_view.js | 6 ++-- client/js/views/registration_view.js | 6 ++-- 5 files changed, 66 insertions(+), 17 deletions(-) diff --git a/client/css/forms.css b/client/css/forms.css index 4635b009..a4dd6a14 100644 --- a/client/css/forms.css +++ b/client/css/forms.css @@ -78,8 +78,8 @@ input[type=radio], input[type=checkbox] { margin-top: -10px; width: 16px; height: 16px; - border: 2px solid var(--input-background-color); - background: var(--input-border-color); + background: var(--input-enabled-background-color); + border: 2px solid var(--input-enabled-border-color); content: ''; } input[type=radio]:checked + .radio:before, @@ -90,6 +90,16 @@ input[type=radio]:checked + .radio:after, input[type=checkbox]:checked + .checkbox:after { opacity: 1; } +input[type=radio]:disabled + .radio:before, +input[type=checkbox]:disabled + .checkbox:before, +input[type=radio]:disabled + .radio:after, +input[type=checkbox]:disabled + .checkbox:after { + border-color: var(--input-disabled-text-color); +} +input[type=radio]:disabled + .radio, +input[type=checkbox]:disabled + .checkbox { + border-color: var(--input-disabled-font-color); +} .radio:after { transition: opacity 0.1s linear; @@ -124,16 +134,26 @@ textarea, input[type=text], input[type=email], input[type=password] { - transition: border-color 0.1s linear, background-color 0.1s linear; - font-size: 100%; font-family: 'Inconsolata', monospace; + font-size: 100%; padding: 0.3em; - border: 2px solid var(--input-background-color); - background: var(--input-border-color); text-overflow: ellipsis; width: 100%; box-sizing: border-box; + border: 2px solid var(--input-enabled-border-color); + background: var(--input-enabled-background-color); + color: var(--input-enabled-text-color); box-shadow: none; /* :-moz-submit-invalid on FF */ + transition: border-color 0.1s linear, background-color 0.1s linear; +} + +textarea:disabled, +input[type=text]:disabled, +input[type=email]:disabled, +input[type=password]:disabled { + border: 2px solid var(--input-disabled-border-color); + background: var(--input-disabled-background-color); + color: var(--input-disabled-text-color); } textarea:focus, @@ -161,7 +181,16 @@ input[type=submit] { font-size: 100%; line-height: 100%; padding: 0.3em 0.7em; - border: 1px solid var(--main-color); - background: var(--main-color); - color: white; + border: 1px solid var(--button-enabled-background-color); + background: var(--button-enabled-background-color); + color: var(--button-enabled-text-color); +} + +button:disabled, +input[type=button]:disabled, +input[type=submit]:disabled { + cursor: default; + border-color: var(--button-disabled-background-color); + background-color: var(--button-disabled-background-color); + color: var(--button-disabled-text-color); } diff --git a/client/css/main.css b/client/css/main.css index e4f27ab2..06ff5f5f 100644 --- a/client/css/main.css +++ b/client/css/main.css @@ -12,8 +12,16 @@ --input-bad-background-color: #FFF5F5; --input-good-border-color: #D3E3D3; --input-good-background-color: #F5FFF5; - --input-background-color: #EEE; - --input-border-color: #FAFAFA; + --input-enabled-background-color: #FAFAFA; + --input-enabled-border-color: #EEE; + --input-enabled-text-color: var(--text-color); + --input-disabled-background-color: #FAFAFA; + --input-disabled-border-color: #EEE; + --input-disabled-text-color: #888; + --button-enabled-text-color: white; + --button-enabled-background-color: var(--main-color); + --button-disabled-text-color: #666; + --button-disabled-background-color: #CCC; } body { diff --git a/client/js/views/base_view.js b/client/js/views/base_view.js index 0f4aaf8b..426181ab 100644 --- a/client/js/views/base_view.js +++ b/client/js/views/base_view.js @@ -58,6 +58,18 @@ class BaseView { }); } + disableForm(form) { + for (let input of form.querySelectorAll('input')) { + input.disabled = true; + } + } + + enableForm(form) { + for (let input of form.querySelectorAll('input')) { + input.disabled = false; + } + } + showView(html) { this.contentHolder.innerHTML = html; } diff --git a/client/js/views/login_view.js b/client/js/views/login_view.js index 6ea29fe3..2f24053a 100644 --- a/client/js/views/login_view.js +++ b/client/js/views/login_view.js @@ -23,17 +23,17 @@ class LoginView extends BaseView { form.addEventListener('submit', e => { e.preventDefault(); this.clearMessages(); - form.setAttribute('disabled', true); + this.disableForm(form); options .login( userNameField.value, passwordField.value, rememberUserField.checked) .then(() => { - form.setAttribute('disabled', false); + this.enableForm(form); }) .catch(errorMessage => { - form.setAttribute('disabled', false); + this.enableForm(form); this.notifyError(errorMessage); }); }); diff --git a/client/js/views/registration_view.js b/client/js/views/registration_view.js index ad08e60f..7e1ee853 100644 --- a/client/js/views/registration_view.js +++ b/client/js/views/registration_view.js @@ -23,17 +23,17 @@ class RegistrationView extends BaseView { form.addEventListener('submit', e => { e.preventDefault(); this.clearMessages(); - form.setAttribute('disabled', true); + this.disableForm(form); options .register( userNameField.value, passwordField.value, emailField.value) .then(() => { - form.setAttribute('disabled', false); + this.enableForm(form); }) .catch(errorMessage => { - form.setAttribute('disabled', false); + this.enableForm(form); this.notifyError(errorMessage); }); });