End of day commit, styling and dropdown logic

2014-06-30 18:20:51 +02:00
parent dbb369acb9
commit 588139eb54
13 changed files with 135 additions and 30 deletions
@@ -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')
+
+
+
@@ -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')
@@ -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
@@ -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
@@ -0,0 +1,3 @@
+Qsupplier.App.NumberField = Ember.TextField.extend
+  type: 'number'
+  attributeBindings: ['min', 'max', 'step']
@@ -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')
@@ -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
@@ -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);
 }
@@ -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')
@@ -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
@@ -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
@@ -15,7 +15,7 @@ $side-spacing: 0px
 .draggable
  cursor: move !important
 input.dimension
-  width: 40px
+  width: 52px
 .location_picker_map
  width: 600px
  height: 500px
@@ -17,3 +17,4 @@
@import ./qtables
@import ./section_tab_headers
@import ./qlists
+@import ./ember_dropdown