Big upgrade and supplier style upgrades

app/assets/javascripts/supplier/app/controllers/modals/section_arrange_tables_controller.js.coffee

@@ -1,35 +1,50 @@
 App.modals.SectionArrangeTablesController = App.modals.BaseController.extend
+  title_path: 'section.arrange_tables.modal.title'
   arrange_type: 'distributed' # can be distributed, by_row or by_column
   row_count: 2
   column_count: 2
+  alert_message: ''
   #isDistributed: ~> @arrange_type is 'distributed'
   #isByRow: ~> @arrange_type is 'by_row'
   #isByColumn: ~> @arrange_type is 'by_column'
   isDistributed: (->@get('arrange_type') is 'distributed').property('arrange_type')
   isByRow: (->@get('arrange_type') is 'by_row').property('arrange_type')
   isByColumn: (->@get('arrange_type') is 'by_column').property('arrange_type')
+  canArrangeTables: (->
+    unless parseFloat(@get('model.width')) > 0 and parseFloat(@get('model.height')) > 0
+      @set 'alert_message', t('section.arrange_tables.modal.cannot_arrange')
+      return false
+    @set 'alert_message', ''
+    true
+  ).property('model.width', 'model.height')
   actions:
     arrangeTables: ->
+      return unless @isValid()
       Ember.$.post Routes.arrange_tables_suppliers_section_path(@get('model.id')),
         option: @get('arrange_type')
         row_count: @get('row_count')
         column_count: @get('column_count')
       , (result,state,xhr)=>
-        #@store.pushPayload 'table', result
         @store.pushPayload result
         @send 'close'
-
-        ##TODO remove followin code if Ember pushPayload is working
-        ##properly with associations
-        #section_id = @get('model.id')
-        #tables_that_should_be_in_section = @store.all('table').filter((t)->t.get('section.id') == section_id)
-        #current_table_ids = @get('model.tables').mapProperty('id')
-        #for table in tables_that_should_be_in_section.toArray()
-          #@get('model.tables').pushObject(table) unless table.get('id') in current_table_ids
-        ##TODO it still does not work for the second client side action,
-        ##soo the good old reload for now for the failing case
-        #window.location.reload() if result.tables.length != tables_that_should_be_in_section.toArray().length
         return
-    makeDistributed: -> @set 'arrange_type', 'distributed'
-    makeByRow: -> @set 'arrange_type', 'by_row'
-    makeByColumn: -> @set 'arrange_type', 'by_column'
+    makeDistributed: ->
+      @set 'arrange_type', 'distributed'
+      @set 'alert_message', ''
+    makeByRow: ->
+      @set 'arrange_type', 'by_row'
+      @set 'alert_message', ''
+    makeByColumn: ->
+      @set 'arrange_type', 'by_column'
+      @set 'alert_message', ''
+  isValid: ->
+    switch @get('arrange_type')
+      when 'by_row'
+        if parseInt(@get('row_count')) < 1
+          @set 'alert_message', "Must at least be 1"
+          return false
+      when 'by_column'
+        if parseInt(@get('column_count')) < 1
+          @set 'alert_message', "Must at least be 1"
+          return false
+    true

app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee

@@ -6,6 +6,9 @@ App.SectionController = Ember.ObjectController.extend
     finishEditable: ->
       @set('editmode', false)
       @get('model').save()
+    rollbackEditable: ->
+      @get('model').rollback()
+      @set('editmode', false)
     addSection: -> @modal 'add_section', model: @get('model')
     addTables: -> @modal 'section_add_tables', model: @get('model')
     arrangeTables: -> @modal 'section_arrange_tables', model: @get('model')

app/assets/javascripts/supplier/app/templates/global/_side_menu.emblem

@@ -6,6 +6,11 @@ aside.side-menu
       li: a.supplier-close-shop{action "markSupplierClosed"}= t 'supplier.close_for_orders'
     else
       li: a.supplier-open-shop{action "markSupplierOpen"}= t 'supplier.open_for_orders'
-    = link-to "settings" class="supplier-settings-link"
-      = t 'supplier.settings'
-    li class="supplier-sign-out-link": a{action "signOut"}= t 'supplier.sign_out'
+    li
+      =link-to 'settings' class="supplier-settings-link"
+        span.settings-icon
+        span= t 'supplier.settings'
+    li class="supplier-sign-out-link"
+      a{action "signOut"}
+        span.sign-out-icon
+        = t 'supplier.sign_out'

app/assets/javascripts/supplier/app/templates/modals/section_arrange_tables.emblem

@@ -1,52 +1,30 @@
-.modal-alert== alert_message
 p=t 'section.arrange_tables.modal.body_header'
-.arrange-type-buttons
-  if isDistributed
-    span.arrange-tables-current-type.distributed=t 'section.arrange_tables.modal.distributed.title'
-  else
-    button.arrange-tables-type-button.distributed{action "makeDistributed"}=t 'section.arrange_tables.modal.distributed.title'
-  if isByRow
-    span.arrange-tables-current-type.by_row=t 'section.arrange_tables.modal.by_row.title'
-  else
-    button.arrange-tables-type-button.by_row{action "makeByRow"}=t 'section.arrange_tables.modal.by_row.title'
-  if isByColumn
-    span.arrange-tables-current-type.by_column=t 'section.arrange_tables.modal.by_column.title'
-  else
-    button.arrange-tables-type-button.by_column{action "makeByColumn"}=t 'section.arrange_tables.modal.by_column.title'
-.arrange-content
-  if isDistributed
-    ==t 'section.arrange_tables.modal.distributed.explanation'
-  if isByRow
-    ==t 'section.arrange_tables.modal.by_row.before_field'
-    App.NumberField valueBinding="row_count"
-    ==t 'section.arrange_tables.modal.by_row.after_field'
-  if isByColumn
-    ==t 'section.arrange_tables.modal.by_column.before_field'
-    App.NumberField valueBinding="column_count"
-    ==t 'section.arrange_tables.modal.by_column.after_field'
+if canArrangeTables
+  .arrange-type-buttons
+    if isDistributed
+      span.arrange-tables-current-type.distributed=t 'section.arrange_tables.modal.distributed.title'
+    else
+      button.arrange-tables-type-button.distributed{action "makeDistributed"}=t 'section.arrange_tables.modal.distributed.title'
+    if isByRow
+      span.arrange-tables-current-type.by_row=t 'section.arrange_tables.modal.by_row.title'
+    else
+      button.arrange-tables-type-button.by_row{action "makeByRow"}=t 'section.arrange_tables.modal.by_row.title'
+    if isByColumn
+      span.arrange-tables-current-type.by_column=t 'section.arrange_tables.modal.by_column.title'
+    else
+      button.arrange-tables-type-button.by_column{action "makeByColumn"}=t 'section.arrange_tables.modal.by_column.title'
+  .arrange-content
+    if isDistributed
+      ==t 'section.arrange_tables.modal.distributed.explanation'
+    if isByRow
+      =t 'section.arrange_tables.modal.by_row.before_field'
+      App.NumberField valueBinding="row_count"
+      =t 'section.arrange_tables.modal.by_row.after_field'
+    if isByColumn
+      =t 'section.arrange_tables.modal.by_column.before_field'
+      App.NumberField valueBinding="column_count"
+      =t 'section.arrange_tables.modal.by_column.after_field'
 hr
 button.modal-close{action "close"}=t 'section.arrange_tables.modal.close_button'
-button.modal-confirm.right{action "arrangeTables"}=t 'section.arrange_tables.modal.arrange_button'
-
-
-  /form.form-horizontal
-    .control-group
-      label.control-label for='arrange-tables-distributed' data-t='section.arrange_tables.modal.distributed' = t('supplier.section.arrange_tables.modal.distributed')
-      .controls
-        input#arrange-tables-distributed type="radio" name="arrange-table-option" checked=true value="distributed"
-    .control-group
-      label.control-label for='arrange-tables-by_row' data-t='section.arrange_tables.modal.by_row' = t('supplier.section.arrange_tables.modal.by_row')
-      .controls
-        input#arrange-tables-by_row type="radio" name="arrange-table-option" value="by_row"
-        label for="arrange-tables-by-row-count" data-t='section.arrange_tables.modal.by_row_count' = t('supplier.section.arrange_tables.modal.by_row_count')
-        input.input-mini#arrange-tables-by-row-count type="text" value=0
-        '
-        span data-t='models.plural.table'
-    .control-group
-      label.control-label for='arrange-tables-by_column' data-t='section.arrange_tables.modal.by_column' = t('supplier.section.arrange_tables.modal.by_column')
-      .controls
-        input#arrange-tables-by_column type="radio" name="arrange-table-option" value="by_column"
-        label for="arrange-tables-by-column-count" data-t='section.arrange_tables.modal.by_column_count' = t('supplier.section.arrange_tables.modal.by_column_count')
-        input.input-mini#arrange-tables-by-column-count type="text" value=0
-        '
-        span data-t='models.plural.table'
+if canArrangeTables
+  button.modal-confirm.right{action "arrangeTables"}=t 'section.arrange_tables.modal.arrange_button'

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

@@ -4,33 +4,18 @@
     = view "section-tab-header" context=section
   a.add-section{action "addSection"}: span
 .section-manage-tables.pull-right
+  App.DropdownLink title="Action"
+    ul
+      li: a{action "addTables"}: span.section-add-tables-icon=t 'section.add_tables.button_label'
+      li: a{action "arrangeTables"}: span.section-arrange-tables-icon=t 'section.arrange_tables.modal.title'
+      li: a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" target="_blank": span.qr-icon=t 'table.print_qr_codes'
+      li: a.section-destroy{action "destroySection"}: span.section-remove-icon=t 'helpers.links.destroy'
   if editmode
-    /.btn-group
-      /a.btn.dropdown-toggle data-toggle="dropdown" href="#section-background"
-        span Background
-        span.caret
-      ul#section-background.dropdown-menu
-        each texture in textures
-          li
-            a{ action "setTexture" texture }= texture
-    /a.tiny.button.dropdown.section-actions-menu-header href="#" data-dropdown="section-action-list" Action
-    /button.btn.dropdown-toggle data-toggle="dropdown"
-      span Action
-      span.caret
-    App.DropdownLink title="Action"
-      ul
-        li
-          a{action "addTables"}: span.section-add-tables-icon=t 'section.add_tables.button_label'
-        li
-          a{action "arrangeTables"}: span.section-arrange-tables-icon=t 'section.arrange_tables.modal.title'
-        li
-          a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}": span.table-qr-codes=t 'tables.qr_codes.link'
-        li
-          a.section-destroy{action "destroySection"}: span.section-remove-icon=t 'helpers.links.destroy'
     = input type="text" valueBinding="title" class="section-edit-title-field"
     App.NumberField valueBinding="width" class="dimension section-edit-width-field"
     span.fa.fa-lg.fa-times
     App.NumberField valueBinding="height" class="dimension section-edit-height-field"
+    a.section-rollback-button{ action "rollbackEditable" }: span
     a.section-normal-mode-button{ action "finishEditable" }: span
   else
     a.section-edit-mode-button{ action "makeEditable" }: span

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

@@ -32,8 +32,7 @@
             /td.timestamp=time list.created_at
             td.actions
               a.section-dashboard-orders{action showDashboardOrders section}: span
-              a.table-qr-codes{path qr_codes_suppliers_tables section_id=section.id}
-                span
+              a.table-qr-codes{path qr_codes_suppliers_tables section_id=section.id} target="_blank": span.qr-icon
   else
     .row: .small-12.columns
       .panel=t 'section.none_found'

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

@@ -1,4 +1,4 @@
-h2=t 'settings.title'
+.row: .small-12.columns: h2=t 'settings.title'
 .form-row
   .form-label: label=t 'attributes.supplier.name'
   .form-field: Ember.TextField valueBinding="controller.model.name" classNames="supplier-name"

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

@@ -20,7 +20,8 @@
             td.actions
               a.table-edit{ action 'editTable' table }: span
               a.table-destroy{ action 'destroyTable' table }: span
-  a.button.new-table-button{action "newTable"}= t 'table.new_button'
-  a.table-qr-codes{path qr_codes_suppliers_tables}
-    span
-    = t 'table.print_qr_codes'
+  .form-actions
+    a.form-action-new{action "newTable"}= t 'table.new_button'
+    a.table-qr-codes{path qr_codes_suppliers_tables} target="_blank"
+      span.qr-icon
+      = t 'table.print_qr_codes'

app/assets/javascripts/supplier/app/views/side_menu_item.js.coffee

@@ -0,0 +1,14 @@
+App.SideMenuItemView = Ember.View.extend
+  classNames: 'menu-list-item'
+  classNameBindings: ['active']
+  click: ->
+    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')
+  init: ->
+    @templateName = "side_menu/#{@route}"
+    @_super()

app/assets/javascripts/supplier/foundation1/application.js.erb

@@ -21,7 +21,6 @@ $.extend($translations.en, <%= I18n.t('supplier', locale: :en).to_json %>);
 $.extend($translations.nl, <%= I18n.t('supplier', locale: :nl).to_json %>);
 
 String.prototype.capitalize = function() { return this.charAt(0).toUpperCase() + this.slice(1); }
-
 window.time_zones = <%= ActiveSupport::TimeZone.all.map{|tz| {name: tz.name, formatted: "GMT#{tz.formatted_offset} #{tz.name}"}}.to_json.html_safe %>;
 window.countries = <%= IsoCountryCodes.all.map{|cc| {name: cc.name}}.to_json.html_safe %>;
 

app/assets/stylesheets/supplier/foundation1/_form_actions.css.sass

@@ -7,7 +7,7 @@
       +button($bg: $button-index-color, $padding: $button-sml)
       margin-right: $button-margin
     &.form-action-new
-      +button($bg: $button-new-color, $padding: $button-sml)
+      +button($padding: $button-sml)
       margin-right: $button-margin
     &.form-action-edit
       +button($bg: $button-edit-color, $padding: $button-sml)

app/assets/stylesheets/supplier/foundation1/_foundation_and_overrides.css.sass

@@ -1258,8 +1258,8 @@ $alert-color: #ee3e41
 $button-margin: rem-calc(10)
 $button-qr-code-color: #555
 $button-index-color: $secondary-color
-$button-new-color: #afa
-$button-edit-color: #ffa
-$button-destroy-color: #faa
+$button-new-color: $primary-color
+$button-edit-color: $warning-color
+$button-destroy-color: $alert-color
 $button-submit-color: $primary-color
 $button-cancel-color: $secondary-color

app/assets/stylesheets/supplier/foundation1/_qsections.css.sass

@@ -1,20 +1,21 @@
 .section-edit-mode-button
-  +button
-  margin: 0
-  padding: 2px
+  margin-left: 5px
   span
     @extend .fa
     @extend .fa-lg
     @extend .fa-edit
 .section-normal-mode-button
-  +button
-  margin: 0
-  padding: 2px
-  margin-left: 8px
+  margin-left: 5px
   span
     @extend .fa
     @extend .fa-lg
     @extend .fa-save
+.section-rollback-button
+  margin-left: 5px
+  span
+    @extend .fa
+    @extend .fa-lg
+    @extend .fa-undo
 .arrange-tables-type-button
   +button($bg: $secondary-color, $padding: $button-tny)
 .arrange-tables-current-type
@@ -31,7 +32,7 @@
 .section-manage-tables
   .dropdown-container
     margin-right: 10px
-    $icon-right-margin: 8px
+    $icon-right-margin: 12px
     ul
       list-style: none
       margin: 0
@@ -44,7 +45,7 @@
         padding: 4px 7px
         &:hover
           background-color: #ddd
-        span.table-qr-codes
+        span.qr-icon
           margin-right: $icon-right-margin
     .section-destroy
       color: $alert-color

app/assets/stylesheets/supplier/foundation1/components/_menu_side.css.sass

@@ -20,6 +20,15 @@ aside.side-menu
     .title
       border-bottom: 1px solid #aaa
       margin-bottom: 4px
+  .settings-icon
+    margin-right: 18px
+    @extend .fa, .fa-gears
+  .about-mozo-icon
+    margin-right: 18px
+    @extend .fa, .fa-info-circle
+  .sign-out-icon
+    margin-right: 18px
+    @extend .fa, .fa-caret-square-o-left
 .supplier-close-shop
   +alert($bg: $alert-color, $radius: true)
   padding: 3px

app/assets/stylesheets/supplier/foundation1/components/_tables.css.sass

@@ -24,19 +24,17 @@ table
   span
     @extend .fa
     @extend .fa-pencil
-a.table-qr-codes
-  +button($bg: $secondary-color)
-  span
-    @extend .fa
-    @extend .fa-qrcode
-span.table-qr-codes
+span.qr-icon
   @extend .fa
   @extend .fa-qrcode
+  + span
+    padding-left: 7px
+a.table-qr-codes
+  +button($bg: $secondary-color, $padding: $button-sml)
 .table-destroy
   +button($bg: $secondary-color)
   +button-icon-only
   color: $warning-color
-
   margin-left: 8px
   span
     @extend .fa