Create dropdown list for toggling columns

This commit is contained in:
Rob H
2014-04-04 19:36:06 +11:00
parent 8e54bf1e2e
commit 980797493d
6 changed files with 89 additions and 11 deletions

View File

@@ -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"

View 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

View File

@@ -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"

View File

@@ -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;
}

View File

@@ -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%;
}

View File

@@ -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