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

Use a switch to toggle investment selection

Browse Source 
Just like it happened with proposals, the button to select/deselect an
investment wasn't very intuitive; for example, it wasn't obvious that
pressing a button saying "selected" would deselect the investment.

So we're using a switch control, like we do to enable/disable features
since commit fabe97e50.

Note that we're making the text of the switch smaller than in other
places because the text in the investments table it is also smaller
(we're using `font-size: inherit` for that purpose). That made the
button look weird because we were using rems instead of ems for the
width of the button, so we're adjusting that as well.

Also note we're changing the width of the switch to `6em` instead of
`6.25em` (which would be 100px if 1em is 16px). We're doing so because
we used 100 for the minimum width because it's a round number, so
now we're using another round number.
This commit is contained in:
Javi Martín
2021-08-21 00:50:11 +02:00
parent 1b46afc95c
commit 463112c2ea
9 changed files with 68 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/stylesheets/admin/budget_investments/investments.scss
View File

@@ -12,4 +12,8 @@
font-size: $small-font-size;
}
}
.toggle-switch [aria-pressed] {
font-size: inherit;
}
}

2
app/assets/stylesheets/mixins/buttons.scss
View File

@@ -85,7 +85,7 @@
@include regular-button;
border-radius: $line-height;
font-weight: bold;
min-width: rem-calc(100);
min-width: 6em;
position: relative;
&::after {

2
app/components/admin/budget_investments/toggle_selection_component.html.erb
View File

@@ -1,5 +1,5 @@
<% if can?(:toggle_selection, investment) %>
<%= button_to text, path, method: :patch, remote: true, class: html_class %>
<%= render Admin::ToggleSwitchComponent.new(action, investment, pressed: selected?, **options) %>
<% elsif selected? %>
<%= selected_text %>
<% end %>

27
app/components/admin/budget_investments/toggle_selection_component.rb
View File

@@ -9,18 +9,14 @@ class Admin::BudgetInvestments::ToggleSelectionComponent < ApplicationComponent
private
def text
if selected?
selected_text
else
t("admin.budget_investments.index.select")
end
end
def selected_text
t("admin.budget_investments.index.selected")
end
def action
:toggle_selection
end
def path
toggle_selection_admin_budget_budget_investment_path(
investment.budget,
@@ -34,11 +30,14 @@ class Admin::BudgetInvestments::ToggleSelectionComponent < ApplicationComponent
)
end
def html_class
if selected?
"button small expanded"
else
"button small hollow expanded"
end
def options
{
"aria-label": label,
path: path
}
end
def label
t("admin.actions.label", action: t("admin.actions.select"), name: investment.title)
end
end

6
app/views/admin/budget_investments/toggle_selection.js.erb
View File

@@ -1,3 +1,3 @@
$("#<%= dom_id(@investment) %> [data-field='selected']").html(
"<%= j render(Admin::BudgetInvestments::ToggleSelectionComponent.new(@investment)) %>"
);
<%= render "admin/shared/toggle_switch",
record: @investment,
new_content: render(Admin::BudgetInvestments::ToggleSelectionComponent.new(@investment)) %>

1
config/locales/en/admin.yml
View File

@@ -269,7 +269,6 @@ en:
unfeasible: "Unfeasible"
undecided: "Undecided"
selected: "Selected"
select: "Select"
list:
id: ID
title: Title

1
config/locales/es/admin.yml
View File

@@ -269,7 +269,6 @@ es:
unfeasible: "Inviable"
undecided: "Sin decidir"
selected: "Seleccionado"
select: "Seleccionar"
list:
id: ID
title: Título

12
spec/components/admin/budget_investments/toggle_selection_component_spec.rb
View File

@@ -20,8 +20,9 @@ describe Admin::BudgetInvestments::ToggleSelectionComponent, :admin do
render_inline Admin::BudgetInvestments::ToggleSelectionComponent.new(valuation_finished_investment)
expect(page).to have_button "Select"
expect(page).not_to have_button "Selected"
expect(page).to have_button count: 1
expect(page).to have_button exact_text: "No"
expect(page).to have_css "button[aria-pressed='false']"
end
it "renders a button to deselect selected investments" do
@@ -29,8 +30,9 @@ describe Admin::BudgetInvestments::ToggleSelectionComponent, :admin do
render_inline Admin::BudgetInvestments::ToggleSelectionComponent.new(selected_investment)
expect(page).to have_button "Selected"
expect(page).not_to have_button "Select"
expect(page).to have_button count: 1
expect(page).to have_button exact_text: "Yes"
expect(page).to have_css "button[aria-pressed='true']"
end
end
@@ -58,7 +60,7 @@ describe Admin::BudgetInvestments::ToggleSelectionComponent, :admin do
render_inline Admin::BudgetInvestments::ToggleSelectionComponent.new(selected_investment)
expect(page).to have_content "Selected"
expect(page).not_to have_button "Selected"
expect(page).not_to have_button
end
end
end

60
spec/system/admin/budget_investments_spec.rb
View File

@@ -1412,9 +1412,14 @@ describe "Admin budget investments", :admin do
expect(page).to have_content "Unfeasible project"
within("#budget_investment_#{feasible_vf_bi.id}") do
click_button "Select"
expect(page).to have_button "Selected"
within("tr", text: "Feasible, VF project") do
within("[data-field=selected]") do
expect(page).to have_content "No"
click_button "Select Feasible, VF project"
expect(page).to have_content "Yes"
end
end
click_link "Advanced filters"
@@ -1424,9 +1429,10 @@ describe "Admin budget investments", :admin do
expect(page).not_to have_content "Unfeasible project"
within("#budget_investment_#{feasible_vf_bi.id}") do
expect(page).not_to have_button "Select"
expect(page).to have_button "Selected"
within("tr", text: "Feasible, VF project") do
within("[data-field=selected]") do
expect(page).to have_content "Yes"
end
end
end
@@ -1439,21 +1445,26 @@ describe "Admin budget investments", :admin do
expect(page).to have_content("There are 2 investments")
within("#budget_investment_#{selected_bi.id}") do
click_button "Selected"
within("tr", text: "Selected project") do
within("[data-field=selected]") do
expect(page).to have_content "Yes"
expect(page).to have_button "Select"
click_button "Select Selected project"
expect(page).to have_content "No"
end
end
click_button("Filter")
expect(page).not_to have_content(selected_bi.title)
expect(page).to have_content("There is 1 investment")
click_button "Filter"
expect(page).not_to have_content "Selected project"
expect(page).to have_content "There is 1 investment"
visit admin_budget_budget_investments_path(budget)
within("#budget_investment_#{selected_bi.id}") do
expect(page).to have_button "Select"
expect(page).not_to have_button "Selected"
within("tr", text: "Selected project") do
within("[data-field=selected]") do
expect(page).to have_content "No"
end
end
end
@@ -1465,10 +1476,12 @@ describe "Admin budget investments", :admin do
visit admin_budget_budget_investments_path(budget)
within("#budget_investment_#{selected_bi.id}") do
click_button "Selected"
within("tr", text: "Selected project") do
within("[data-field=selected]") do
click_button "Select Selected project"
expect(page).to have_button "Select"
expect(page).to have_content "No"
end
end
click_link("Next")
@@ -1806,11 +1819,16 @@ describe "Admin budget investments", :admin do
within("#js-columns-selector-wrapper") { uncheck "Title" }
within("#budget_investment_#{investment.id}") do
click_button "Selected"
within("[data-field=selected]") do
expect(page).to have_content "Yes"
expect(page).to have_button "Select"
expect(page).not_to have_content "Don't display me, please!"
click_button "Select Don't display me, please!"
expect(page).to have_content "No"
end
end
expect(page).not_to have_content "Don't display me, please!"
end
scenario "When restoring the page from browser history renders columns selectors only once" do