raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-04-06 07:29:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding a wizard progress indicator to standing order creation form

Browse Source
This commit is contained in:
Rob Harrington
2016-09-24 09:42:10 +10:00
parent 897eb11512
commit bba4b54f9b
5 changed files with 80 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/admin/standing_orders/controllers/standing_order_controller.js.coffee
View File

@@ -8,6 +8,7 @@ angular.module("admin.standingOrders").controller "StandingOrderController", ($s
$scope.newItem = { variant_id: 0, quantity: 1 }
$scope.distributor_id = $scope.standingOrder.shop_id # variant selector requires distributor_id
$scope.view = if $scope.standingOrder.id? then 'review' else 'details'
$scope.stepTitles = { details: '1. Basic Details', products: '2. Add Products', review: '3. Review & Finalise' }
$scope.save = ->
$scope.standing_order_form.$setPristine()

71
app/assets/stylesheets/admin/components/wizard_progress.css.scss Normal file
View File

@@ -0,0 +1,71 @@
$color_unselected: #d9d9d9;
$color_selected: #5498da;
ul.wizard-progress {
list-style: none;
margin: 15px 0;
padding: 0;
text-align: center;
display: block;
li {
background-color: $color_unselected;
color: #494949;
display: inline-block;
margin: 0;
font-size: 0.9rem;
text-transform: uppercase;
line-height: 30px;
padding: 0 25px 0 40px;
position: relative;
&:first-child {
padding-left: 25px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
&:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
&:after {
display: none;
}
&:before {
display: none;
}
}
&:before, &:after {
background-color: $color_unselected;
content: "";
display: block;
position: absolute;
}
&:after {
border-radius: 3px;
border-right: 3px solid #fff;
border-top: 3px solid #fff;
height: 21px;
right: -15px;
top: 3px;
transform: rotate(45deg);
width: 21px;
z-index: 5;
}
&:before {
height: 30px;
right: 3px;
width: 20px;
z-index: 6;
}
&.current {
background-color: $color_selected;
color: #fff;
&:after {
background-color: $color_selected;
}
&:before {
background-color: $color_selected;
}
}
}
}

2
app/views/admin/standing_orders/_form.html.haml
View File

@@ -1,4 +1,4 @@
%form.margin-bottom-50{ name: 'standing_order_form', novalidate: true, ng: { app: 'admin.standingOrders', controller: 'StandingOrderController', submit: 'save()' } }
%form.margin-bottom-50{ name: 'standing_order_form', novalidate: true, ng: { submit: 'save()' } }
%save-bar{ dirty: "standing_order_form.$dirty", persist: 'true', ng: { show: "view == 'review'" } }
%input.red{ type: "submit", value: "Save" }

3
app/views/admin/standing_orders/_wizard_progress.html.haml Normal file
View File

@@ -0,0 +1,3 @@
%ul.wizard-progress
%li{ ng: { repeat: "step in ['details','products','review']", class: '{current: view==step}' } }
{{ stepTitles[step] }}

6
app/views/admin/standing_orders/new.html.haml
View File

@@ -6,5 +6,7 @@
-# - content_for :page_actions do
-# %li= button_link_to "Back to standing orders list", main_app.admin_standing_orders_path, icon: 'icon-arrow-left'
= render 'data'
= render 'form'
%div{ ng: { app: 'admin.standingOrders', controller: 'StandingOrderController', cloak: true } }
= render 'data'
= render 'wizard_progress'
= render 'form'