From 71835a41829353789561362485c750619a6d8005 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 30 Apr 2019 10:49:33 +0100 Subject: [PATCH 1/3] Style radio select controls as buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit For the upcoming user permissions enhancements we want to differentiate between actions that take the user to a new page (eg changing a user’s phone number or email address) and actions that reveal extra controls in the current page (which will be changing the folders a team member can see). This change will be inconsistent with the interaction for scheduling a job, which uses links to reveal other controls in the page. This commit changes the scheduling interaction to use grey ‘secondary’ buttons for revealing extra controls in the page, for consistency with the upcoming folder permissions work. --- app/assets/stylesheets/components/radios.scss | 29 ++++++++----------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/app/assets/stylesheets/components/radios.scss b/app/assets/stylesheets/components/radios.scss index bd0de4268..d719ab85e 100644 --- a/app/assets/stylesheets/components/radios.scss +++ b/app/assets/stylesheets/components/radios.scss @@ -18,28 +18,23 @@ .js-reset-button, .js-category-button { - background: none; - text-decoration: underline; - color: $link-colour; - border: none; - display: inline-block; - vertical-align: top; - width: auto; - padding: 7px 20px 7px 10px; - margin-right: 5px; - cursor: pointer; - - &:hover { - color: $link-hover-colour; - } + @include button($grey-3); + margin-right: $gutter-half; } .js-reset-button-block { + display: block; - width: 100%; - text-align: left; - padding: 20px 20px $gutter 57px; + clear: both; + margin: 0 0 $gutter 0; + position: relative; + top: $gutter-half; + + &:active { + top: $gutter-half + 2px; + } + } .js-enabled & { From 078e9bc7a4b909615999de407b3f3baa03373721 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 30 Apr 2019 10:49:43 +0100 Subject: [PATCH 2/3] =?UTF-8?q?Say=20=E2=80=98done=E2=80=99=20not=20?= =?UTF-8?q?=E2=80=98back=E2=80=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We use ‘back’ to label a control which navigates to a previous page now. It could be confusing to keep this control labelled the same way. And in the future the folder permissions interaction definitely shouldn’t be using ‘back’, because it suggests undoing the selection you’ve made. --- app/assets/javascripts/radioSelect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/radioSelect.js b/app/assets/javascripts/radioSelect.js index 50d4dd046..802382736 100644 --- a/app/assets/javascripts/radioSelect.js +++ b/app/assets/javascripts/radioSelect.js @@ -30,7 +30,7 @@ {{/choices}} - + `), 'chosen': Hogan.compile(` From a67e14b900179c9487635e32f8af7d8aa227a599 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 2 May 2019 14:17:14 +0100 Subject: [PATCH 3/3] Even out the spacing a bit --- app/assets/stylesheets/components/radios.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/stylesheets/components/radios.scss b/app/assets/stylesheets/components/radios.scss index d719ab85e..e7f9110bf 100644 --- a/app/assets/stylesheets/components/radios.scss +++ b/app/assets/stylesheets/components/radios.scss @@ -8,7 +8,6 @@ vertical-align: top; .multiple-choice { - margin-right: 5px; padding-right: 10px; padding-left: 54px - 10px; }