From 980797493de6abcf24bdd0f168d1333249fd5b94 Mon Sep 17 00:00:00 2001 From: Rob H Date: Fri, 4 Apr 2014 19:36:06 +1100 Subject: [PATCH] Create dropdown list for toggling columns --- .../admin/bulk_order_management.js.coffee | 2 +- .../javascripts/admin/dropdown.js.coffee | 18 +++++++ .../admin/shared_directives.js.coffee | 6 +-- .../admin/openfoodnetwork.css.scss | 52 +++++++++++++++++++ .../stylesheets/admin/products.css.scss | 14 ++--- .../admin/orders/bulk_management.html.haml | 8 +++ 6 files changed, 89 insertions(+), 11 deletions(-) create mode 100644 app/assets/javascripts/admin/dropdown.js.coffee diff --git a/app/assets/javascripts/admin/bulk_order_management.js.coffee b/app/assets/javascripts/admin/bulk_order_management.js.coffee index dbd1015f83..18407061aa 100644 --- a/app/assets/javascripts/admin/bulk_order_management.js.coffee +++ b/app/assets/javascripts/admin/bulk_order_management.js.coffee @@ -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" diff --git a/app/assets/javascripts/admin/dropdown.js.coffee b/app/assets/javascripts/admin/dropdown.js.coffee new file mode 100644 index 0000000000..9297ba52b4 --- /dev/null +++ b/app/assets/javascripts/admin/dropdown.js.coffee @@ -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 diff --git a/app/assets/javascripts/admin/shared_directives.js.coffee b/app/assets/javascripts/admin/shared_directives.js.coffee index e498482709..bb0a1067ce 100644 --- a/app/assets/javascripts/admin/shared_directives.js.coffee +++ b/app/assets/javascripts/admin/shared_directives.js.coffee @@ -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" \ No newline at end of file + element.addClass "selected" \ No newline at end of file diff --git a/app/assets/stylesheets/admin/openfoodnetwork.css.scss b/app/assets/stylesheets/admin/openfoodnetwork.css.scss index 14feebae0d..8c8ddeb6b7 100644 --- a/app/assets/stylesheets/admin/openfoodnetwork.css.scss +++ b/app/assets/stylesheets/admin/openfoodnetwork.css.scss @@ -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; +} + diff --git a/app/assets/stylesheets/admin/products.css.scss b/app/assets/stylesheets/admin/products.css.scss index 20f9c49a84..c8ceaaaac2 100644 --- a/app/assets/stylesheets/admin/products.css.scss +++ b/app/assets/stylesheets/admin/products.css.scss @@ -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%; } diff --git a/app/views/spree/admin/orders/bulk_management.html.haml b/app/views/spree/admin/orders/bulk_management.html.haml index a3372434d0..236bf6f28e 100644 --- a/app/views/spree/admin/orders/bulk_management.html.haml +++ b/app/views/spree/admin/orders/bulk_management.html.haml @@ -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