Design and style upgrades

app/assets/javascripts/supplier/app/templates/active_list.emblem

@@ -1,14 +1,21 @@
 td.list-status
   if view.content.needs_help
-    span.list-needs-help-indicator ?
+    span.icon.needs-help
   if view.content.needs_payment
-    span.list-needs-payment-indicator €
+    |  
+    span.icon.needs-payment
 td.numeric.table_number {{view.content.table_number}}
 td.section_title {{view.content.section.title}}
 td.currency.total_list_amount {{currency view.content.price}}
 td.actions
   if view.content.needs_help
-    button.btn.btn-info.mark_list_as_helped{ action markListAsHelped view.content.id} {{t 'list.is_helped_button'}}
+    button.mark_list_as_helped{ action markListAsHelped view.content.id}
-  button.btn.btn-warning.close_list{ action closeList view.content.id} {{t 'list.close_list' }}
+      span.fa-stack
-  a.btn href="/supplier/lists/{{unbound view.content.id}}"
+        i.fa.fa-bell.fa-stack-1x
+        i.fa.fa-ban.fa-stack-2x.revoke
+      span.button-text=t 'list.is_helped_button'
+  button.close_list{ action closeList view.content.id}
+    span.fa.fa-times.fa-2x
+    span.button-text=t 'list.close_list'
+  a.btn.hide href="/supplier/lists/{{unbound view.content.id}}"
     span.icon-list  

app/assets/javascripts/supplier/app/templates/active_order.emblem

@@ -1,3 +1,5 @@
+td.status-icons
+  span.active-order.fa.fa-check.fa-lg
 td {{view.content.display}}
 td.numeric.table_number
   view Qsupplier.App.ActiveOrderTableNumberView contextBinding=view.content
@@ -5,5 +7,17 @@ td.section_title {{view.content.section.title}}
 td.currency {{currency view.content.total }}
 td.actions
   if view.content.placed
-    button.btn.btn-success{ action markOrderActive view.content.id} {{t 'order.being_processed'}}
+    button{ action markOrderActive view.content.id}
-  button.btn.btn-inverse{ action markOrderDelivered view.content.id} {{t 'order.being_served' }}
+      span.fa.fa-check.fa-2x
+      span.button-text=t 'order.being_processed'
+    button.hide.mark-order-active{ action markOrderActive view.content.id}
+      span.button-icon
+      span.button-text=t 'order.being_processed'
+  button{ action markOrderDelivered view.content.id}
+    span.fa-shifted-stack
+      i.fa.fa-check.fa-2x
+      i.fa.fa-check.fa-2x
+    span.button-text= t 'order.being_served'
+  button.hide.mark-order-delivered{ action markOrderDelivered view.content.id}
+    span.button-icon
+    span.button-text= t 'order.being_served'

app/assets/javascripts/supplier/app/templates/index.emblem

@@ -21,6 +21,7 @@
   table.active-orders-table.table
     thead
       tr
+        th.status-icons
         th {{t 'models.order'}}
         th.numeric {{t 'table_number'}}
         th {{t 'models.section'}}

app/assets/javascripts/user/app/controllers/application_controller.js.coffee

@@ -17,7 +17,10 @@ App.ApplicationController = Ember.Controller.extend
     list_needs_help: -> @set 'list.needs_help', true # incoming from other users
     list_is_paid: -> @set 'list.needs_payment', false
     list_needs_payment: -> @set 'list.needs_payment', true # incoming from other users
-    list_closed: -> @set 'list', null
+    list_closed: (data)->
+      @transitionToRoute('list', data.id).then =>
+        @set 'list.state', 'closed'
+        @set 'list', null
     join_request_approved: (data)->
       @setCurrentList -> @transitionToRoute('active_list')
     order_being_processed: (data)->

app/assets/javascripts/user/app/templates/application.emblem

@@ -12,7 +12,7 @@
         .right
           if list.id
             App.MenuItemView route="active_list"
-            App.MenuItemView route='list_products'
+            App.MenuItemView route='table' route_param=list.table.id
             App.MenuItemListNeedsHelpView
             App.MenuItemListNeedsPaymentView
     aside.left-off-canvas-menu
@@ -25,12 +25,13 @@
         li
           a{action scanQr bubbles=false}
             span Scan QR
-        li
+        if list.id
-          =link-to 'list_products'
+          li
-            span= t 'list_products.title'
+            =link-to 'table' list.table.id
-        li
+              span= t 'list_products.title'
-          =link-to 'active_list'
+          li
-            span= t 'active_list.title'
+            =link-to 'active_list'
+              span= t 'active_list.title'
         li
           =link-to 'lists'
             span= t 'models.plural.list'

app/assets/javascripts/user/app/templates/menu_item_list_needs_help.emblem

@@ -1 +1 @@
-span.needs-help.fa.fa-hand-o-up.fa-lg
+span.icon.needs-help

app/assets/javascripts/user/app/templates/menu_item_list_needs_payment.emblem

@@ -1 +1 @@
-span.needs-payment.fa.fa-money.fa-lg
+span.icon.needs-payment

app/assets/javascripts/user/app/views/menu_item_view.js.coffee

@@ -2,7 +2,10 @@ App.MenuItemView = Ember.View.extend
   classNames: 'menu-list-item'
   classNameBindings: ['active']
   click: ->
-    @get('controller').transitionToRoute(@route)
+    if @route_param
+      @get('controller').transitionToRoute(@route, @route_param)
+    else
+      @get('controller').transitionToRoute(@route)
   active: (->
     if @get('controller.currentPath') == @route then 'active' else ''
   ).property('controller.currentPath')

app/assets/stylesheets/supplier/base1-shared/active_lists.css.sass

@@ -0,0 +1,31 @@
+.button-text
+  // Only icons for now
+  display: none
+.active-orders-table
+  .status-icons
+    span
+      display: none
+  .active
+    .status-icons
+      .active-order
+        display: inline-block
+.active-orders-table
+  tbody
+    tr
+      td
+        .active_order_table_number
+          position: relative
+          .extra-list-info
+            // Facebook profiles
+            display: none
+            $extra-info-width: 220px
+            position: absolute
+            width: $extra-info-width
+            // 7px is padding + border, 5px is extra spacing
+            right: -$extra-info-width - 7px*2 - 5px
+            top: -7px*2
+            padding: 4px
+            border: 3px solid #aaa
+            border-radius: 3px
+            background-color: white
+            text-align: left

app/assets/stylesheets/supplier/base1-shared/icons.css.sass

@@ -0,0 +1,38 @@
+@import font-awesome
+span.icon
+  @extend .fa
+  @extend .fa-lg
+  &.needs-help
+    @extend .fa-bell
+  &.needs-payment
+    @extend .fa-money
+.fa-stack
+  .revoke
+    color: #b94a48
+
+.button-icon
+  display: inline-block
+  width: 2em
+  height: 2em
+  line-height: 2em
+  vertical-align: middle
+  background-repeat: no-repeat
+  background-position: center center
+.mark-order-active .button-icon
+  background-image: image-url('icons/order-check.png')
+.mark-order-delivered .button-icon
+  background-image: image-url('icons/order-doublecheck.png')
+
+.fa-shifted-stack
+  position: relative
+  display: inline-block
+  width: 2.5em
+  height: 2em
+  line-height: 2em
+  vertical-align: middle
+  .fa
+    position: absolute
+    width: 100%
+    left: 20%
+    &:first-child
+      left: -10%

app/assets/stylesheets/supplier/basic1/active_lists.css.sass

@@ -1,50 +0,0 @@
-.list-status
-  .list-needs-help-indicator
-    display: inline-block
-    width: 30px
-    color: #400
-    background-color: #aaf
-    text-align: center
-    margin-right: 7px
-    &.hide
-      display: none
-  .list-needs-payment-indicator
-    display: inline-block
-    width: 30px
-    color: #440
-    background-color: #faa
-    text-align: center
-    margin-right: 7px
-    &.hide
-      display: none
-.active-orders-table
-  tbody
-    tr
-      td
-        &:first-child
-          padding-left: 35px
-          background-position: 5px center
-          background-repeat: no-repeat
-        .active_order_table_number
-          position: relative
-          .extra-list-info
-            display: none
-            $extra-info-width: 220px
-            position: absolute
-            width: $extra-info-width
-            // 7px is padding + border, 5px is extra spacing
-            right: -$extra-info-width - 7px*2 - 5px
-            top: -7px*2
-            padding: 4px
-            border: 3px solid #aaa
-            border-radius: 3px
-            background-color: white
-            text-align: left
-      &.active
-        td
-          &:first-child
-            background-image: image-url('icons/order-check.png')
-      &.delivered
-        td
-          &:first-child
-            background-image: image-url('icons/order-doublecheck.png')

app/assets/stylesheets/supplier/wood1/active_lists.css.sass

@@ -1,50 +0,0 @@
-.list-status
-  .list-needs-help-indicator
-    display: inline-block
-    width: 30px
-    color: #400
-    background-color: #aaf
-    text-align: center
-    margin-right: 7px
-    &.hide
-      display: none
-  .list-needs-payment-indicator
-    display: inline-block
-    width: 30px
-    color: #440
-    background-color: #faa
-    text-align: center
-    margin-right: 7px
-    &.hide
-      display: none
-.active-orders-table
-  tbody
-    tr
-      td
-        &:first-child
-          padding-left: 35px
-          background-position: 5px center
-          background-repeat: no-repeat
-        .active_order_table_number
-          position: relative
-          .extra-list-info
-            display: none
-            $extra-info-width: 220px
-            position: absolute
-            width: $extra-info-width
-            // 7px is padding + border, 5px is extra spacing
-            right: -$extra-info-width - 7px*2 - 5px
-            top: -7px*2
-            padding: 4px
-            border: 3px solid #aaa
-            border-radius: 3px
-            background-color: white
-            text-align: left
-      &.active
-        td
-          &:first-child
-            background-image: image-url('icons/order-check.png')
-      &.delivered
-        td
-          &:first-child
-            background-image: image-url('icons/order-doublecheck.png')

app/assets/stylesheets/user/foundation/structure.css.sass

@@ -1,3 +1,4 @@
+@import font-awesome
 section.main-section
   height: 100%
 .top-menu
@@ -13,6 +14,13 @@ section.main-section
     &.active
       color: yellow
       border-color: yellow
+span.icon
+  @extend .fa
+  @extend .fa-lg
+  &.needs-help
+    @extend .fa-bell
+  &.needs-payment
+    @extend .fa-money
 #notice
   a
     color: white

app/serializers/user_extended_list_serializer.rb

@@ -11,7 +11,7 @@ class UserExtendedListSerializer < Qwaiter::Serializer
   embed :ids, include: true
   attributes :extended_version, :state, :needs_help, :needs_payment, :is_paid, :price, 
     :table_id, :table_number, :section_id, :user_ids,
-    :supplier_orders_in_process_count, :supplier_orders_placed_count
+    :supplier_orders_in_process_count, :supplier_orders_placed_count, :supplier_id
 
   def has_active_orders
     object.has_active_orders?
@@ -21,6 +21,7 @@ class UserExtendedListSerializer < Qwaiter::Serializer
   has_one :table, serializer: UserExtendedTableSerializer
   has_many :join_requests
   has_many :users, serializer: UserUserSerializer
+  #has_one :supplier
 
   def extended_version
     true