End of day commit, styling and dropdown logic

app/assets/javascripts/supplier/app/components/dropdown_link.js.coffee

@@ -0,0 +1,12 @@
+Qsupplier.App.DropdownLink = Ember.Component.extend
+  templateName: 'dropdown_link_view'
+  active: false
+  classNames: ['dropdown-container']
+  classNameBindings: ['active']
+  didInsertElement: ->
+    @$('.dropdown-trigger').click (e)=>
+      e.preventDefault()
+      @set 'active', !@get('active')
+
+
+

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

@@ -1,17 +1,18 @@
 Qsupplier.App.SectionController = Ember.ObjectController.extend
   needs: ['application', 'sections', 'section'] #wtf? section, otherwise an Ember error
   editmode: false
-  makeEditable: -> @set('editmode', true)
-  finishEditable: ->
-    @set('editmode', false)
-    @get('model').save()
-  addTables: ->
-    $('#add-tables-modal').modal()
-  arrangeTables: ->
-    $('#arrange-tables-modal').modal()
   actions:
     markListAsHelped: (list) -> list.is_helped() if list
     closeList: (list)-> list.close() if list
+    makeEditable: -> @set('editmode', true)
+    finishEditable: ->
+      @set('editmode', false)
+      @get('model').save()
+    addTables: ->
+      debugger
+      $('#add-tables-modal').modal()
+    arrangeTables: ->
+      $('#arrange-tables-modal').modal()
   textures: ['wood1', 'wood2']
 
   sections: (-> @get('controllers.sections.model')).property('controllers.sections.model')

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

@@ -0,0 +1,5 @@
+a.dropdown-trigger.button.tiny.dropdown href="#"
+  span.dropdown-trigger-text= view.title
+  /span.dropdown-trigger-icon
+.dropdown-list-container
+  = yield

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

@@ -12,23 +12,24 @@
         each texture in textures
           li
             a{ action setTexture texture } {{texture}}
-    a.tiny.button.dropdown href="#" data-dropdown="section-action-list" Action
+    /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
-    ul#section-action-list.f-dropdown data-dropdown-content=true
-      li
-        a{action addTables} {{t 'section.add_tables.button_label'}}
-      li
-        a{action arrangeTables} {{t 'section.arrange_tables.modal.title'}}
-      li
-        a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" {{t 'tables.qr_codes.link'}}
-      li
-        a href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}" {{t 'helpers.links.destroy'}}
-    view Ember.TextField valueBinding="title" class="section-edit-title-field"
-    view Ember.TextField valueBinding="width" class="dimension section-edit-width-field"
-    span x
-    view Ember.TextField valueBinding="height" class="dimension section-edit-height-field"
+    Qsupplier.App.DropdownLink title="Action"
+      ul
+        li
+          a{action addTables} {{t 'section.add_tables.button_label'}}
+        li
+          a{action arrangeTables} {{t 'section.arrange_tables.modal.title'}}
+        li
+          a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" {{t 'tables.qr_codes.link'}}
+        li
+          a href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}" {{t 'helpers.links.destroy'}}
+    Ember.TextField valueBinding="title" class="section-edit-title-field"
+    Qsupplier.App.NumberField valueBinding="width" class="dimension section-edit-width-field"
+    span.fa.fa-lg.fa-times
+    Qsupplier.App.NumberField valueBinding="height" class="dimension section-edit-height-field"
     a.section-normal-mode-button{ action finishEditable }: span
   else
     a.section-edit-mode-button{ action makeEditable }: span

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

@@ -0,0 +1,3 @@
+Qsupplier.App.NumberField = Ember.TextField.extend
+  type: 'number'
+  attributeBindings: ['min', 'max', 'step']

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

@@ -45,7 +45,7 @@ Qsupplier.App.SectionTableView = Ember.View.extend DragNDrop.Draggable,
   #click: ->
     #@$('.table-actions').show()
   didInsertElement: ->
-    @$el = @$(@get('element'))
+    @$el = @$()
     #@$('.table-actions').hide()
     #title = @$('.table-actions .title').clone()
     content = @$('.table-actions')

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

@@ -0,0 +1,21 @@
+#Qsupplier.App.SectionView = Ember.View.extend {}
+  #initFoundation: (->
+    #debugger
+    #@$().foundation()
+  #).on('didInsertElement')
+  #didInsertElement: ->
+    #@$().foundation()
+    #debugger
+    #true
+#$(document).on 'load', '[data-dropdown]', (a,b,c)->
+  #debugger
+  #true
+#$(document).on 'change', '[data-dropdown]', (a,b,c)->
+  #debugger
+  #true
+#$(document).on 'ready', '[data-dropdown]', (a,b,c)->
+  #debugger
+  #true
+#$(document).on 'click', '[data-dropdown]', (a,b,c)->
+  #debugger
+  #true

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

@@ -2,7 +2,7 @@
 //= require jquery_ujs
 //= require jquery.ui.sortable
 //= require vendor/modernizr
-//= require foundation
+// require foundation FOUNDATION 5 JAVASCRIPT IMPLEMENTATIONS AND EMBER ARE NOT COMPATIBLE, FOUNDATION IS TOO SIMPLISTIC AT THE MOMENT AND DESTROYS DOM EVENTS
 //= require js-routes
 //= require translations
 //= require qwaiter
@@ -20,8 +20,6 @@ var Qstorage = localStorage;
 $.extend($translations.en, <%= I18n.t('supplier', locale: :en).to_json %>);
 $.extend($translations.nl, <%= I18n.t('supplier', locale: :nl).to_json %>);
 
-$(document).foundation();
-
 String.prototype.capitalize = function() {
     return this.charAt(0).toUpperCase() + this.slice(1);
 }