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

Pulling columns dropdown out into a shared partial

Browse Source
This commit is contained in:
Rob Harrington
2015-11-27 08:24:29 +11:00
parent 54e7677888
commit 9eaec6061e
14 changed files with 129 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/admin/dropdown/directives/dropdown.js.coffee
View File

@@ -1,8 +1,9 @@
angular.module("admin.dropdown").directive "ofnDropDown", ($document) ->
restrict: 'C'
link: (scope, element, attrs) ->
outsideClickListener = (event) ->
unless $(event.target).is("div.ofn_drop_down##{attrs.id} div.menu") ||
$(event.target).parents("div.ofn_drop_down##{attrs.id} div.menu").length > 0
unless $(event.target).is("div.ofn-drop-down##{attrs.id} div.menu") ||
$(event.target).parents("div.ofn-drop-down##{attrs.id} div.menu").length > 0
scope.$emit "offClick"
element.click (event) ->

2
app/assets/javascripts/templates/admin/links_dropdown.html.haml
View File

@@ -1,4 +1,4 @@
.ofn_drop_down{ "ofn-drop-down" => true }
.ofn-drop-down
%span
%i.icon-check
Actions

66
app/assets/stylesheets/admin/dropdown.css.scss Normal file
View File

@@ -0,0 +1,66 @@
#content-header .ofn-drop-down {
border: none;
background-color: #5498da;
color: #fff;
float: none;
margin-left: 3px;
}
.ofn-drop-down:hover, .ofn-drop-down.expanded {
border: 1px solid #adadad;
color: #575757;
}
.ofn-drop-down {
padding: 7px 15px;
border-radius: 3px;
border: 1px solid #d4d4d4;
background-color: #f5f5f5;
position: relative;
display: block;
float: right;
color: #828282;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
&:hover, &.expanded {
border: 1px solid #adadad;
color: #575757;
}
> span {
width: auto;
text-transform: uppercase;
font-size: 85%;
font-weight: 600;
}
.menu {
margin-top: 1px;
position: absolute;
float: none;
top:100%;
left: 0px;
padding: 5px 0px;
border: 1px solid #adadad;
background-color: #ffffff;
box-shadow: 1px 3px 10px #888888;
z-index: 100;
.menu_item {
margin: 0px;
padding: 2px 0px;
color: #454545;
text-align: left;
}
.menu_item:hover {
background-color: #ededed;
}
}
}

3
app/assets/stylesheets/admin/filters_and_controls.css.scss Normal file
View File

@@ -0,0 +1,3 @@
.filters, .controls, .divider {
margin-bottom: 15px;
}

62
app/assets/stylesheets/admin/openfoodnetwork.css.scss
View File

@@ -184,68 +184,6 @@ table#listing_enterprise_groups {
}
}
#content-header .ofn_drop_down {
border: none;
background-color: #5498da;
color: #fff;
float: none;
margin-left: 3px;
}
.ofn_drop_down {
padding: 6px 15px;
border-radius: 3px;
border: 1px solid #d4d4d4;
background-color: #f5f5f5;
position: relative;
display: block;
float: left;
color: #828282;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
> span {
width: auto;
text-transform: uppercase;
font-size: 85%;
font-weight: 600;
}
.menu {
margin-top: 1px;
position: absolute;
float: none;
top:100%;
left: 0px;
padding: 5px 0px;
border: 1px solid #adadad;
background-color: #ffffff;
box-shadow: 1px 3px 10px #888888;
z-index: 100;
.menu_item {
margin: 0px;
padding: 2px 0px;
color: #454545;
text-align: left;
}
.menu_item:hover {
background-color: #ededed;
}
}
}
.ofn_drop_down:hover, .ofn_drop_down.expanded {
border: 1px solid #adadad;
color: #575757;
}
.field_with_errors > input {
border-color: red;
}

11
app/views/admin/customers/index.html.haml
View File

@@ -16,21 +16,14 @@
.five.columns.alpha
%input{ :class => "fullwidth", :type => "text", :id => 'quick_search', 'ng-model' => 'quickSearch', :placeholder => 'Quick Search' }
.five.columns  
-# %div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "bulk_actions_dropdown", 'ofn-drop-down' => true }
-# %div.ofn-drop-down#bulk-actions-dropdown{ 'ng-controller' => "DropDownCtrl" }
-# %span{ :class => 'icon-check' }   Actions
-# %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
-# %div.menu{ 'ng-show' => "expanded" }
-# %div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "action in bulkActions", 'ng-click' => "selectedBulkAction.callback(filteredCustomers)", 'ofn-close-on-click' => true }
-# %span{ :class => 'three columns omega' } {{action.name }}
.three.columns  
.three.columns.omega
%div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "columns_dropdown", 'ofn-drop-down' => true, :style => 'float:right;' }
%span{ :class => 'icon-reorder' }   Columns
%span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
%div.menu{ 'ng-show' => "expanded" }
%div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "column in columns", 'ofn-toggle-column' => true }
%span{ :class => 'one column alpha', :style => 'text-align: center'} {{ column.visible && "✓" || !column.visible && " " }}
%span{ :class => 'two columns omega' } {{column.name }}
= render 'admin/shared/columns_dropdown'
.row{ 'ng-if' => 'shop && !loaded()' }
.sixteen.columns.alpha#loading
%img.spinner{ src: "/assets/spinning-circles.svg" }

11
app/views/admin/enterprises/_enterprise_user_index.html.haml
View File

@@ -4,21 +4,14 @@
.four.columns.alpha
%input{ :class => "fullwidth", :type => "text", :id => 'quick_search', 'ng-model' => 'quickSearch', :placeholder => 'Search By Name' }
.six.columns  
-# %div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "bulk_actions_dropdown", 'ofn-drop-down' => true }
-# %div.ofn-drop-down#bulk-actions-dropdown{ 'ng-controller' => "DropDownCtrl" }
-# %span{ :class => 'icon-check' }   Actions
-# %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
-# %div.menu{ 'ng-show' => "expanded" }
-# %div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "action in bulkActions", 'ng-click' => "selectedBulkAction.callback(filteredEnterprises)", 'ofn-close-on-click' => true }
-# %span{ :class => 'three columns omega' } {{action.name }}
.three.columns  
.three.columns.omega
%div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "columns_dropdown", 'ofn-drop-down' => true, :style => 'float:right;' }
%span{ :class => 'icon-reorder' }   Columns
%span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
%div.menu{ 'ng-show' => "expanded" }
%div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "column in columns", 'ofn-toggle-column' => true }
%span{ :class => 'one column alpha', :style => 'text-align: center'} {{ column.visible && "✓" || !column.visible && " " }}
%span{ :class => 'two columns omega' } {{column.name }}
= render 'admin/shared/columns_dropdown'
.row{ 'ng-if' => '!loaded' }
.sixteen.columns.alpha#loading
%img.spinner{ src: "/assets/spinning-circles.svg" }

8
app/views/admin/shared/_columns_dropdown.html.haml Normal file
View File

@@ -0,0 +1,8 @@
%div.three.columns.omega
%div.ofn-drop-down#columns-dropdown{ 'ng-controller' => "DropDownCtrl" }
%span{ :class => 'icon-reorder' }   Columns
%span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
%div.menu{ 'ng-show' => "expanded" }
%div.menu_item.three.columns.alpha.omega{ 'ng-repeat' => "column in columns", 'ofn-toggle-column' => true }
%span.one.column.alpha.text-center {{ column.visible && "✓" || !column.visible && " " }}
%span.two.columns.omega {{column.name }}

34
app/views/spree/admin/orders/bulk_management.html.haml
View File

@@ -70,27 +70,19 @@
%div{ :class => "eight columns alpha", 'ng-hide' => 'allFinalWeightVolumesPresent()' }
%span{ :class => "eight columns alpha", style: 'color:red' }
WARNING: Some variants do not have a unit value
%hr{ :class => "sixteen columns alpha", :style => "margin-bottom: 15px" }
%div{ 'ng-hide' => 'RequestMonitor.loading || lineItems.length == 0' }
.controls{ :class => "sixteen columns alpha", :style => "margin-bottom: 15px;" }
%div{ :class => "three columns alpha" }
%input{ :class => "fullwidth", :type => "text", :id => 'quick_search', 'ng-model' => 'quickSearch', :placeholder => 'Quick Search' }
%div{ :class => "three columns" }
%div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "bulk_actions_dropdown", 'ofn-drop-down' => true }
%span{ :class => 'icon-check' }   Actions
%span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
%div.menu{ 'ng-show' => "expanded" }
%div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "action in bulkActions", 'ng-click' => "$eval(action.callback)(filteredLineItems)", 'ofn-close-on-click' => true }
%span{ :class => 'three columns omega' } {{action.name }}
%div{ :class => "seven columns" }  
%div{ :class => "three columns omega" }
%div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "columns_dropdown", 'ofn-drop-down' => true, :style => 'float:right;' }
%span{ :class => 'icon-reorder' }   Columns
%span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
%div.menu{ 'ng-show' => "expanded" }
%div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "column in columns", 'ofn-toggle-column' => true }
%span{ :class => 'one column alpha', :style => 'text-align: center'} {{ column.visible && "✓" || !column.visible && " " }}
%span{ :class => 'two columns omega' } {{column.name }}
%hr.divider.sixteen.columns.alpha.omega
.controls.sixteen.columns.alpha.omega{ ng: { hide: 'RequestMonitor.loading || lineItems.length == 0' } }
%div{ :class => "three columns alpha" }
%input{ :class => "fullwidth", :type => "text", :id => 'quick_search', 'ng-model' => 'quickSearch', :placeholder => 'Quick Search' }
%div{ :class => "three columns" }
%div.ofn-drop-down#bulk-actions-dropdown{ 'ng-controller' => "DropDownCtrl" }
%span{ :class => 'icon-check' }   Actions
%span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
%div.menu{ 'ng-show' => "expanded" }
%div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "action in bulkActions", 'ng-click' => "$eval(action.callback)(filteredLineItems)", 'ofn-close-on-click' => true }
%span{ :class => 'three columns omega' } {{action.name }}
%div{ :class => "seven columns" }  
= render 'admin/shared/columns_dropdown'
%div.sixteen.columns.alpha#loading{ 'ng-if' => 'RequestMonitor.loading' }
%img.spinner{ src: "/assets/spinning-circles.svg" }
%h1 LOADING ORDERS

9
app/views/spree/admin/products/bulk_edit/_actions.html.haml
View File

@@ -3,11 +3,4 @@
%input.four.columns.alpha{ :type => 'button', :value => 'Save Changes', 'ng-click' => 'submitProducts()'}
%div.nine.columns
= render 'spree/admin/shared/status_message'
%div.three.columns.omega
%div.ofn_drop_down.three.columns.omega{ 'ng-controller' => "DropDownCtrl", :id => "columns_dropdown", 'ofn-drop-down' => true, :style => 'float:right;' }
%span{ :class => 'icon-reorder' }   Columns
%span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
%div.menu{ 'ng-show' => "expanded" }
%div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "column in columns", 'ofn-toggle-column' => true }
%span{ :class => 'one column alpha', :style => 'text-align: center'} {{ column.visible && "✓" || !column.visible && " " }}
%span{ :class => 'two columns omega' } {{column.name }}
= render 'admin/shared/columns_dropdown'

30
spec/features/admin/bulk_order_management_spec.rb
View File

@@ -156,9 +156,9 @@ feature %q{
context "modifying the weight/volume of a line item" do
it "price is altered" do
visit '/admin/orders/bulk_management'
first("div#columns_dropdown", :text => "COLUMNS").click
first("div#columns_dropdown div.menu div.menu_item", text: "Weight/Volume").click
first("div#columns_dropdown div.menu div.menu_item", text: "Price").click
first("div#columns-dropdown", :text => "COLUMNS").click
first("div#columns-dropdown div.menu div.menu_item", text: "Weight/Volume").click
first("div#columns-dropdown div.menu div.menu_item", text: "Price").click
within "tr#li_#{li1.id}" do
expect(page).to have_field "price", with: "$50.00"
fill_in "final_weight_volume", :with => 2000
@@ -175,8 +175,8 @@ feature %q{
context "modifying the quantity of a line item" do
it "price is altered" do
visit '/admin/orders/bulk_management'
first("div#columns_dropdown", :text => "COLUMNS").click
first("div#columns_dropdown div.menu div.menu_item", text: "Price").click
first("div#columns-dropdown", :text => "COLUMNS").click
first("div#columns-dropdown div.menu div.menu_item", text: "Price").click
within "tr#li_#{li1.id}" do
expect(page).to have_field "price", with: "$#{format("%.2f",li1.price * 5)}"
fill_in "quantity", :with => 6
@@ -188,8 +188,8 @@ feature %q{
context "modifying the quantity of a line item" do
it "weight/volume is altered" do
visit '/admin/orders/bulk_management'
first("div#columns_dropdown", :text => "COLUMNS").click
first("div#columns_dropdown div.menu div.menu_item", text: "Weight/Volume").click
first("div#columns-dropdown", :text => "COLUMNS").click
first("div#columns-dropdown div.menu div.menu_item", text: "Weight/Volume").click
within "tr#li_#{li1.id}" do
expect(page).to have_field "final_weight_volume", with: "#{li1.final_weight_volume.round}"
fill_in "quantity", :with => 6
@@ -209,8 +209,8 @@ feature %q{
expect(page).to have_selector "th", :text => "QUANTITY"
expect(page).to have_selector "th", :text => "MAX"
first("div#columns_dropdown", :text => "COLUMNS").click
first("div#columns_dropdown div.menu div.menu_item", text: "Producer").click
first("div#columns-dropdown", :text => "COLUMNS").click
first("div#columns-dropdown div.menu div.menu_item", text: "Producer").click
expect(page).to_not have_selector "th", :text => "PRODUCER"
expect(page).to have_selector "th", :text => "NAME"
@@ -499,8 +499,8 @@ feature %q{
it "displays a bulk action select box with a list of actions" do
list_of_actions = ['Delete Selected']
find("div#bulk_actions_dropdown").click
within("div#bulk_actions_dropdown") do
find("div#bulk-actions-dropdown").click
within("div#bulk-actions-dropdown") do
list_of_actions.each { |action_name| expect(page).to have_selector "div.menu_item", text: action_name }
end
end
@@ -512,8 +512,8 @@ feature %q{
within("tr#li_#{li2.id} td.bulk") do
check "bulk"
end
find("div#bulk_actions_dropdown").click
find("div#bulk_actions_dropdown div.menu_item", :text => "Delete Selected" ).click
find("div#bulk-actions-dropdown").click
find("div#bulk-actions-dropdown div.menu_item", :text => "Delete Selected" ).click
expect(page).to have_selector "tr#li_#{li1.id}", visible: true
expect(page).to_not have_selector "tr#li_#{li2.id}", visible: true
end
@@ -532,8 +532,8 @@ feature %q{
it "only applies the delete action to filteredLineItems" do
check "toggle_bulk"
fill_in "quick_search", with: o1.number
find("div#bulk_actions_dropdown").click
find("div#bulk_actions_dropdown div.menu_item", :text => "Delete Selected" ).click
find("div#bulk-actions-dropdown").click
find("div#bulk-actions-dropdown div.menu_item", :text => "Delete Selected" ).click
fill_in "quick_search", with: ''
expect(page).to_not have_selector "tr#li_#{li1.id}", visible: true
expect(page).to have_selector "tr#li_#{li2.id}", visible: true

24
spec/features/admin/bulk_product_update_spec.rb
View File

@@ -46,8 +46,8 @@ feature %q{
p2 = FactoryGirl.create(:product, available_on: Date.current-1)
visit '/admin/products/bulk_edit'
first("div#columns_dropdown", :text => "COLUMNS").click
first("div#columns_dropdown div.menu div.menu_item", text: "Available On").click
first("div#columns-dropdown", :text => "COLUMNS").click
first("div#columns-dropdown div.menu div.menu_item", text: "Available On").click
expect(page).to have_field "available_on", with: p1.available_on.strftime("%F %T")
expect(page).to have_field "available_on", with: p2.available_on.strftime("%F %T")
@@ -243,11 +243,11 @@ feature %q{
visit '/admin/products/bulk_edit'
first("div#columns_dropdown", :text => "COLUMNS").click
first("div#columns_dropdown div.menu div.menu_item", text: "Available On").click
first("div#columns_dropdown div.menu div.menu_item", text: "Category").click
first("div#columns_dropdown div.menu div.menu_item", text: "Inherits Properties?").click
first("div#columns_dropdown div.menu div.menu_item", text: "SKU").click
first("div#columns-dropdown", :text => "COLUMNS").click
first("div#columns-dropdown div.menu div.menu_item", text: "Available On").click
first("div#columns-dropdown div.menu div.menu_item", text: "Category").click
first("div#columns-dropdown div.menu div.menu_item", text: "Inherits Properties?").click
first("div#columns-dropdown div.menu div.menu_item", text: "SKU").click
within "tr#p_#{p.id}" do
expect(page).to have_field "product_name", with: p.name
@@ -556,8 +556,8 @@ feature %q{
visit '/admin/products/bulk_edit'
first("div#columns_dropdown", :text => "COLUMNS").click
first("div#columns_dropdown div.menu div.menu_item", text: "Available On").click
first("div#columns-dropdown", :text => "COLUMNS").click
first("div#columns-dropdown div.menu div.menu_item", text: "Available On").click
expect(page).to have_selector "th", :text => "NAME"
expect(page).to have_selector "th", :text => "PRODUCER"
@@ -565,7 +565,7 @@ feature %q{
expect(page).to have_selector "th", :text => "ON HAND"
expect(page).to have_selector "th", :text => "AV. ON"
first("div#columns_dropdown div.menu div.menu_item", text: /^.{0,1}Producer$/).click
first("div#columns-dropdown div.menu div.menu_item", text: /^.{0,1}Producer$/).click
expect(page).to have_no_selector "th", :text => "PRODUCER"
expect(page).to have_selector "th", :text => "NAME"
@@ -688,8 +688,8 @@ feature %q{
v = p.variants.first
visit '/admin/products/bulk_edit'
first("div#columns_dropdown", :text => "COLUMNS").click
first("div#columns_dropdown div.menu div.menu_item", text: "Available On").click
first("div#columns-dropdown", :text => "COLUMNS").click
first("div#columns-dropdown div.menu div.menu_item", text: "Available On").click
within "tr#p_#{p.id}" do
expect(page).to have_field "product_name", with: p.name

4
spec/features/admin/customers_spec.rb
View File

@@ -39,8 +39,8 @@ feature 'Customers' do
# Toggling columns
expect(page).to have_selector "th.email"
expect(page).to have_content customer1.email
first("div#columns_dropdown", :text => "COLUMNS").click
first("div#columns_dropdown div.menu div.menu_item", text: "Email").click
first("div#columns-dropdown", :text => "COLUMNS").click
first("div#columns-dropdown div.menu div.menu_item", text: "Email").click
expect(page).to_not have_selector "th.email"
expect(page).to_not have_content customer1.email
end

2
spec/features/admin/orders_spec.rb
View File

@@ -192,7 +192,7 @@ feature %q{
order = create(:completed_order_with_totals, distributor: distributor1)
visit spree.admin_order_path(order)
find("#links-dropdown .ofn_drop_down").click
find("#links-dropdown .ofn-drop-down").click
within "#links-dropdown" do
expect(page).to have_link "Edit", href: spree.edit_admin_order_path(order)
expect(page).to have_link "Resend Confirmation", href: spree.resend_admin_order_path(order)