consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use a switch control to enable/disable features

Browse Source 
We were using buttons with the "Enable" and "Disable" texts to
enable/disable settings. However, when machine learning settings were
introduced in commit 4d27bbeba, a switch control was introduced to
enable/disable them.

In order to keep the interface consistent, we're now using switch
controls in other sections where settings are enabled/disabled. We can
even use the same code in the machine learning settings as well.

We're also removing the confirmation dialog to enable/disable a setting,
since the dialog is really annoying when changing several settings and
this action can be undone immediately. The only setting which might need
a confirmation is the "Skip user verification" one; we might add it in
the future. Removing the confirmation here doesn't make things worse,
though; the "Are you sure?" confirmation dialog was also pretty useless
and users would most likely blindly accept it.

Note Capybara doesn't support finding a button by its `aria-labelledby`
atrribute. Ideally we'd write `click_button "Participatory budgeting"`
instead of `click_button "Yes"`, since from the user's point of view the
"Yes" or "No" texts aren't button labels but indicators of the status of
the setting. This makes the code a little brittle since tests would pass
even if the element referenced by `aria-labelledby` didn't exist.
This commit is contained in:
Javi Martín
2021-08-20 21:50:23 +02:00
parent 71aa651f6f
commit fabe97e506
13 changed files with 157 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/assets/stylesheets/admin/machine_learning/setting.scss
View File

@@ -9,46 +9,6 @@
}
}
[aria-pressed] {
@include regular-button;
border-radius: $line-height;
font-weight: bold;
min-width: rem-calc(100);
position: relative;
&::after {
background: $white;
border-radius: 100%;
content: "";
display: block;
height: 1.75em;
position: absolute;
transform: translateY(-50%);
top: 50%;
width: 1.75em;
}
&[aria-pressed=true] {
background: $primary-color;
padding-right: 2.5em;
text-align: left;
&::after {
right: 0.5em;
}
}
&[aria-pressed=false] {
background: $dark-gray;
padding-left: 2.5em;
text-align: right;
&::after {
left: 0.5em;
}
}
}
dl {
@include callout-size(map-get($callout-sizes, small));
}

6
app/assets/stylesheets/admin/settings/featured_settings_form.scss Normal file
View File

@@ -0,0 +1,6 @@
.admin .featured-settings-form {
[aria-pressed] {
@include switch;
}
}

6
app/assets/stylesheets/admin/settings/featured_settings_table.scss Normal file
View File

@@ -0,0 +1,6 @@
.admin .featured-settings-table {
td {
max-width: $global-width / 3;
}
}