raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10438 from jibees/10133-update-column-dropdown-everywhere

Browse Source 
Redesign old columns dropdown component to match the design of the new one
This commit is contained in:
Konrad
2023-02-28 20:22:00 +01:00
committed by GitHub
parent 6a0b9cbb76 166e2f525e
commit 11928859bc
4 changed files with 36 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/javascripts/templates/admin/columns_dropdown.html.haml
View File

@@ -1,11 +1,13 @@
.ofn-drop-down.right#columns-dropdown{ ng: { controller: 'ColumnsDropdownCtrl' } }
%span{ :class => 'icon-reorder' }= "  #{t('admin.columns')}".html_safe
%span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
.ofn-drop-down.ofn-drop-down-v2.right#columns-dropdown{ ng: { controller: 'ColumnsDropdownCtrl' } }
.ofn-drop-down-label
= "  #{t('admin.columns')}".html_safe
%span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
%div.menu{ 'ng-show' => "expanded" }
%div.menu_item{ ng: { repeat: "column in columns", click: "toggle(column)", class: "{selected: column.visible}" } }
%span.check
%span.name {{ column.name }}
%hr
%div.menu_item.text-center
%input.fullwidth.orange{ type: "button", ng: { value: "saved() ? 'Saved': 'Saving'", show: "saved() || saving", disabled: "saved()" } }
%input.fullwidth.red{ type: "button", :value => t('admin.column_save_as_default').html_safe, ng: { show: "!saved() && !saving", click: "saveColumnPreferences(action)"} }
.menu_items
.menu_item{ ng: { repeat: "column in columns", click: "toggle(column);" } }
%input.redesigned-input{ type: "checkbox", ng: { checked: "column.visible" } }
{{ column.name }}
%hr
%div.menu_item.text-center
%input.fullwidth.orange{ type: "button", ng: { value: "saved() ? 'Saved': 'Saving'", show: "saved() || saving", disabled: "saved()" } }
%input.fullwidth.red{ type: "button", :value => t('admin.column_save_as_default').html_safe, ng: { show: "!saved() && !saving", click: "saveColumnPreferences(action)"} }

13
app/webpacker/css/admin/dropdown.scss
View File

@@ -200,13 +200,24 @@
max-height: 200px;
overflow-y: scroll;
label.menu_item {
.menu_item {
margin-bottom: 5px;
color: #454545;
font-weight: 400;
cursor: pointer;
padding-top: 4px;
padding-bottom: 5px;
text-transform: uppercase;
font-size: 85%;
}
}
}
.ofn-drop-down.ofn-drop-down-v2 {
// Add very specific styling here for components that are in transition:
// ie. the ones using the two classes above
.ofn-drop-down-label {
padding-top: 7px;
padding-bottom: 7px;
}
}

14
spec/support/request/admin_helper.rb
View File

@@ -3,13 +3,19 @@
module AdminHelper
def toggle_columns(*labels)
# open dropdown
find("div#columns-dropdown", text: "COLUMNS").click
# case insensitive search for "Columns" text
find("div#columns-dropdown", text: /columns/i).click
labels.each do |label|
find("div#columns-dropdown div.menu div.menu_item", text: label).click
within "div#columns-dropdown" do
labels.each do |label|
# Convert label to case-insensitive regexp if not one already
label = /#{label}/i unless label.is_a?(Regexp)
find("div.menu div.menu_item", text: /#{label}/i).click
end
end
# close dropdown
find("div#columns-dropdown", text: "COLUMNS").click
find("div#columns-dropdown", text: /columns/i).click
end
end

4
spec/system/admin/bulk_product_update_spec.rb
View File

@@ -345,7 +345,7 @@ describe '
login_as_admin
visit spree.admin_products_path
toggle_columns "Available On", /^Category?/, "Inherits Properties?", "SKU"
toggle_columns "Available On", /^Category?/i, "Inherits Properties?", "SKU"
within "tr#p_#{p.id}" do
expect(page).to have_field "product_name", with: p.name
@@ -712,7 +712,7 @@ describe '
expect(page).to have_selector "th", text: "ON HAND"
expect(page).to have_selector "th", text: "AV. ON"
toggle_columns /^.{0,1}Producer$/
toggle_columns /^.{0,1}Producer$/i
expect(page).to have_no_selector "th", text: "PRODUCER"
expect(page).to have_selector "th", text: "NAME"