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
+  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()
-  actions:
-    markListAsHelped: (list) -> list.is_helped() if list
-    closeList: (list)-> list.close() if list
   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,11 +12,12 @@
         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
+    Qsupplier.App.DropdownLink title="Action"
+      ul
         li
           a{action addTables} {{t 'section.add_tables.button_label'}}
         li
@@ -25,10 +26,10 @@
           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"
+    Ember.TextField valueBinding="title" class="section-edit-title-field"
-    view Ember.TextField valueBinding="width" class="dimension section-edit-width-field"
+    Qsupplier.App.NumberField valueBinding="width" class="dimension section-edit-width-field"
-    span x
+    span.fa.fa-lg.fa-times
-    view Ember.TextField valueBinding="height" class="dimension section-edit-height-field"
+    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);
 }

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

@@ -2,7 +2,7 @@
   font-size: 24px
   padding: 4px 0px
 .section-manage-tables
-  margin: -32px 6px 4px 6px
+  margin: -26px 6px 4px 6px
   min-width: 470px
   text-align: right
   .section-edit-title-field
@@ -10,10 +10,10 @@
     width: 120px
   .section-edit-width-field
     display: inline-block
-    width: 40px
+    width: 52px
   .section-edit-height-field
     display: inline-block
-    width: 40px
+    width: 52px
   #section-action-list
     text-align: left
 .section-tables-container
@@ -28,7 +28,9 @@
     height: 48px
     width: 83px
     background-repeat: no-repeat
+    box-shadow: 5px 5px 5px #888888
     color: black
+    border-radius: 3px
     a
       color: black
     //background-image: image-url('icons/section-table.png')

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

@@ -0,0 +1,49 @@
+.dropdown-container
+  position: relative
+  display: inline-block
+  .button.dropdown-trigger
+    padding-top: 4px
+    padding-bottom: 4px
+    margin-bottom: 0
+    .dropdown-trigger-icon
+      @extend .fa
+      @extend .fa-lg
+      @extend .fa-caret-left
+      margin-right: 6px
+    
+  .dropdown-list-container
+    display: none
+    text-align: left
+    background-color: white
+    position: absolute
+    right: 0
+    margin: 0
+    min-width: 160px
+    z-index: 542
+    margin-top: 7px
+    border-radius: 4px
+
+    &:after
+      border: solid transparent
+      content: " "
+      height: 0
+      width: 0
+      position: absolute
+      pointer-events: none
+      border-width: 6px
+      border-bottom-color: white
+      bottom: 100%
+      right: 30px
+      
+      
+    ul
+      list-style: none
+  //&:hover
+    //.dropdown-list-container
+      //display: block
+  &.active
+    .dropdown-list-container
+      display: block
+    .button.dropdown-trigger
+      .dropdown-trigger-icon
+        @extend .fa-caret-down

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

@@ -8,3 +8,15 @@
     @extend .fa
     @extend .fa-lg
     @extend .fa-save
+.section-actions-menu-header
+  padding-top: 4px
+  padding-bottom: 4px
+.section-manage-tables
+  .dropdown-container
+    margin-right: 10px
+  input
+    height: auto
+    padding-top: 4px
+    padding-bottom: 4px
+    &.section-edit-title-field
+      margin-right: 10px

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

@@ -15,7 +15,7 @@ $side-spacing: 0px
 .draggable
   cursor: move !important
 input.dimension
-  width: 40px
+  width: 52px
 .location_picker_map
   width: 600px
   height: 500px

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

@@ -17,3 +17,4 @@
 @import ./qtables
 @import ./section_tab_headers
 @import ./qlists
+@import ./ember_dropdown