mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-03-31 06:31:41 +00:00
Create dropdown list for toggling columns
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
orderManagementModule = angular.module("ofn.bulk_order_management", ["ofn.shared_services", "ofn.shared_directives"])
|
||||
orderManagementModule = angular.module("ofn.bulk_order_management", ["ofn.shared_services", "ofn.shared_directives", "ofn.dropdown"])
|
||||
|
||||
orderManagementModule.config [
|
||||
"$httpProvider"
|
||||
|
||||
18
app/assets/javascripts/admin/dropdown.js.coffee
Normal file
18
app/assets/javascripts/admin/dropdown.js.coffee
Normal file
@@ -0,0 +1,18 @@
|
||||
dropDownModule = angular.module("ofn.dropdown", [])
|
||||
|
||||
dropDownModule.directive "ofnDropDown", ->
|
||||
link: (scope, element, attrs) ->
|
||||
element.click ->
|
||||
scope.$apply ->
|
||||
if scope.expanded
|
||||
unless $(event.target).parents("div.ofn_drop_down div.menu").length > 0
|
||||
scope.expanded = false
|
||||
element.removeClass "expanded"
|
||||
else
|
||||
scope.expanded = true
|
||||
element.addClass "expanded"
|
||||
|
||||
|
||||
|
||||
dropDownModule.controller "DropDownCtrl", ->
|
||||
$scope.expanded = false
|
||||
@@ -28,12 +28,12 @@ sharedDirectivesModule.directive "ofnSelect2MinSearch", [
|
||||
|
||||
sharedDirectivesModule.directive "ofnToggleColumn", ->
|
||||
link: (scope, element, attrs) ->
|
||||
element.addClass "unselected" unless scope.column.visible
|
||||
element.addClass "selected" if scope.column.visible
|
||||
element.click "click", ->
|
||||
scope.$apply ->
|
||||
if scope.column.visible
|
||||
scope.column.visible = false
|
||||
element.addClass "unselected"
|
||||
element.removeClass "selected"
|
||||
else
|
||||
scope.column.visible = true
|
||||
element.removeClass "unselected"
|
||||
element.addClass "selected"
|
||||
@@ -133,3 +133,55 @@ table#listing_enterprise_groups {
|
||||
}
|
||||
}
|
||||
|
||||
.ofn_drop_down {
|
||||
padding: 7px 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 {
|
||||
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;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
@@ -80,9 +80,9 @@ li.column-list-item {
|
||||
border-radius: 3px;
|
||||
padding: 2px 20px;
|
||||
margin: 2px 1px;
|
||||
border: 2px solid #5498da;
|
||||
background-color: #5498da;
|
||||
color: white;
|
||||
background-color: white;
|
||||
border: 2px solid lightgray;
|
||||
color: darkgray;
|
||||
font-size: 100%;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
@@ -94,10 +94,10 @@ li.column-list-item {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
li.column-list-item.unselected {
|
||||
background-color: white;
|
||||
border: 2px solid lightgray;
|
||||
color: darkgray;
|
||||
li.column-list-item.selected {
|
||||
border: 2px solid #5498da;
|
||||
background-color: #5498da;
|
||||
color: white;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -77,6 +77,14 @@
|
||||
%select{ :class => "three columns alpha", :id => 'bulk_actions', 'ofn-select2-min-search' => 10, 'ng-model' => 'selectedBulkAction', 'ng-options' => 'a as a.name for a in bulkActions' }
|
||||
%div{ :class => "three columns alpha" }
|
||||
%input{ :class => "three columns alpha", :value => "Run", :type => "button", :id => 'bulk_execute', 'ng-click' => 'selectedBulkAction.callback(filteredLineItems)' }
|
||||
%div{ :class => "five columns omega" }
|
||||
%div.ofn_drop_down{ :class => "two columns omega", 'ofn-drop-down' => true }
|
||||
%span 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 }}
|
||||
%table.index#listing_orders.bulk
|
||||
%thead
|
||||
%tr
|
||||
|
||||
Reference in New Issue
Block a user