forma 0.1.1 → 0.1.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 16aaf06c56a52180e7b4aea01508cb4bdc9fcb74
+  data.tar.gz: 4e1a5437ff778c502118d0cebc20fc97c03f2e8c
+SHA512:
+  metadata.gz: 84ae57199011563b025ca909d30b6047bd3865e25a54dd8d606732b8631de098411743b58b60b6e002ec615f52c8206032320ffd27a44afdbd5b764e5b2ad18f
+  data.tar.gz: c07481957ed0302a27a3325491e364fabf6effb634438ba6c15e6175e307fe23ddfa2057783942062486263444234e80a0b97d9e55c4b70eaac7c650bc7006bb

data/lib/forma/action.rb

@@ -15,31 +15,56 @@ module Forma
       @confirm = h[:confirm]
       @as = h[:as]
       @tooltip = h[:tooltip]
+      @select = h[:select]
+      @condition = h[:condition]
     end
 
     def to_html(model)
-      children = [ (el('img', attrs: { src: @icon }) if @icon.present?), el('span', text: eval_label(model)) ]
-      button = (@as.to_s == 'button')
-      el(
-        'a',
-        attrs: {
-          id: @id,
-          class: ['ff-action', ('btn' if button)],
-          href: eval_url(model), 'data-method' => @method, 'data-confirm' => @confirm,
-          'data-original-title' => @tooltip
-        },
-        children: children
-      )
+      if eval_condition(model)
+        if @select
+          el(
+            'a',
+            attrs: {
+              id: @id, class: ['ff-action', 'btn', 'btn-mini', 'ff-select-action', 'btn-xs', 'btn-default'],
+              href: '#', 'data-original-title' => @tooltip,
+              'data-value-id' => model.id, 'data-value-type' => model.class.name, 'data-value-text' => model.to_s
+            },
+            children: [ el('i', attrs: { class: 'icon icon-download fa fa-hand-o-left' }) ]
+          )
+        else
+          children = [ (el('img', attrs: { src: eval_icon(model) }) if @icon.present?), el('span', text: eval_label(model)) ]
+          button = (@as.to_s == 'button')
+          el(
+            'a',
+            attrs: {
+              id: @id,
+              class: ['ff-action', ('btn btn-default' if button)],
+              href: eval_url(model), 'data-method' => @method, 'data-confirm' => @confirm,
+              'data-original-title' => @tooltip
+            },
+            children: children
+          )
+        end
+      end
     end
 
     private
 
     def eval_url(model)
-      @url.is_a?(Proc) ? @url.call(model) : @url.to_s
+      @url.is_a?(Proc) ? @url.call(model).to_s : @url.to_s
     end
 
     def eval_label(model)
-      @label.is_a?(Proc) ? @label.call(model) : @label.to_s
+      @label.is_a?(Proc) ? @label.call(model).to_s : @label.to_s
+    end
+
+    def eval_icon(model)
+      @icon.is_a?(Proc) ? @icon.call(model).to_s : @icon.to_s
+    end
+
+    def eval_condition(model)
+      if @condition then @condition.is_a?(Proc) ? @condition.call(model) : @condition
+      else true end
     end
   end
 end

data/lib/forma/config.rb

@@ -34,9 +34,13 @@ module Forma
   class NumberConfig
     attr_accessor :delimiter
     attr_accessor :separator
+    attr_accessor :max_digits
+    attr_accessor :min_digits
     def initialize
       self.delimiter = ','
       self.separator = '.'
+      self.max_digits = 3
+      self.min_digits = 2
     end
   end
 

data/lib/forma/field.rb

@@ -5,7 +5,7 @@ module Forma
     include Forma::Utils
     include Forma::Html
 
-    attr_reader :label, :hint, :i18n, :name, :tag
+    attr_reader :label, :hint, :i18n, :name, :tag, :inline_hint
     attr_reader :required, :autofocus, :readonly
     attr_reader :width, :height
     attr_reader :before, :after
@@ -17,6 +17,7 @@ module Forma
     def initialize(h = {})
       h = h.symbolize_keys
       @id = h[:id]; @label = h[:label]; @hint = h[:hint]; @i18n = h[:i18n]
+      @inline_hint = h[:inline_hint]
       @required = h[:required]; @autofocus = h[:autofocus]; @readonly = (not not h[:readonly])
       @width = h[:width]; @height = h[:height]
       @before = h[:before]; @after = h[:after]
@@ -26,6 +27,9 @@ module Forma
       @model_name = h[:model_name]; @child_model_name = h[:child_model_name]
       @actions = h[:actions] || []
       @tag = h[:tag]
+      @empty = h[:empty]
+      @force_nonempty = h[:force_nonempty]
+      @class = h[:class]
     end
 
     def action(url, h={})
@@ -40,22 +44,16 @@ module Forma
       else
         chain = [ self.model_name, self.name ]
       end
+      chain.map { |x| x.to_s.gsub '.', '_' }
     end
 
     def id
       if @id then @id
-      else name_as_chain.flatten.join('_') end
+      else name_as_chain.select{ |x| x.present? }.join('_') end
     end
 
     def parameter_name
-      chain = name_as_chain; length = chain.length
-      p_name = ''
-      chain.reverse.each_with_index do |n, i|
-        if i == 0 then p_name = n
-        elsif i == length - 1 then p_name = "#{n}[#{p_name}]"
-        else p_name = "#{n}_attributes[#{p_name}]" end
-      end
-      p_name
+      parameter_name_from_chain(name_as_chain)
     end
 
     # Convert this element into HTML.
@@ -63,15 +61,15 @@ module Forma
       val = self.value
       if edit and not readonly
         edit = edit_element(val)
-        el('div', children: [ before_element, icon_element, edit, after_element, actions_element ])
+        el('div', children: [ before_element, icon_element, edit, after_element, actions_element, inline_hint_element ])
       else
-        if val.present? or val == false
+        if val.present? or val == false or @force_nonempty
           view = view_element(val)
           view = el('a', attrs: { href: eval_url }, children: [ view ]) if @url
-          el('div', children: [ before_element, icon_element, view, after_element, actions_element ])
+          el('div', attrs: { class: (@class ? eval_with_model(@class) : nil) },
+            children: [ before_element, icon_element, view, after_element, actions_element, inline_hint_element ])
         else
-          empty = empty_element
-          el('div', children: [ empty, actions_element ])
+          el('div', children: [ empty_element, actions_element ])
         end
       end
     end
@@ -94,7 +92,9 @@ module Forma
     end
 
     def localized_label
-      self.label.present? ? self.label : I18n.t(localization_key, default: self.name)
+      unless self.label == false
+        self.label.present? ? self.label : I18n.t(localization_key, default: self.name)
+      end
     end
 
     def localized_hint
@@ -103,35 +103,28 @@ module Forma
 
     protected
 
-    def icon_element
-      el('img', attrs: { src: eval_icon, style: { 'margin-right' => '4px' } }) if @icon.present?
-    end
-
-    def before_element
-      el('span', text: before, attrs: { class: 'ff-field-before' }) if before.present?
-    end
-
-    def after_element
-      el('span', text: after, attrs: { class: 'ff-field-after' }) if after.present?
-    end
-
-    def empty_element
-      el('span', attrs: { class: 'ff-empty' }, text: Forma.config.texts.empty)
-    end
-
-    def actions_element
-      if @actions.any?
-        el('div', attrs: { class: 'ff-field-actions' }, children: @actions.map { |action| action.to_html(@model) })
+    def parameter_name_from_chain(chain)
+      length = chain.length
+      p_name = ''
+      chain.select{ |x| x.present? }.reverse.each_with_index do |n, i|
+        if i == 0 then p_name = n
+        elsif i == length - 1 then p_name = "#{n}[#{p_name}]"
+        else p_name = "#{n}_attributes[#{p_name}]" end
       end
+      p_name
     end
 
-    def eval_url
-      @url.is_a?(Proc) ? @url.call(self.model) : @url.to_s
-    end
+    def icon_element; el('img', attrs: { src: eval_icon, style: { 'margin-right' => '4px' } }) if @icon.present? end
+    def before_element; el('span', text: eval_with_model(before), attrs: { class: 'ff-field-before' }) if before.present? end
+    def after_element; el('span', text: eval_with_model(after), attrs: { class: 'ff-field-after' }) if after.present? end
+    def empty_element; el('span', attrs: { class: 'ff-empty' }, text: Forma.config.texts.empty) unless @empty == false end
+    def actions_element; el('div', attrs: { class: 'ff-field-actions' }, children: @actions.map { |action| action.to_html(@model) }) if @actions.any? end
+    def inline_hint_element; el('div', attrs: { class: 'ff-inline-hint' }, text: @inline_hint) if @inline_hint.present? end
+    def eval_url; eval_with_model(@url) end
+    def eval_icon; eval_with_model(@icon) end
 
-    def eval_icon
-      @icon.is_a?(Proc) ? @icon.call(self.model) : @icon.to_s
-    end
+    private
+    def eval_with_model(val, h={}); val.is_a?(Proc) ? val.call(h[:model] || self.model) : val.to_s end
   end
 
   # Complex field.
@@ -150,24 +143,17 @@ module Forma
     end
 
     def value
-      val = super
-      if val then val
-      else
-        @fields.each { |f| f.model = self.model }
-        @fields.map { |f| f.value }
-      end
+      @model
     end
 
     def edit_element(val)
       el(
         'div',
         attrs: { class: 'ff-complex-field' },
-        children: @fields.zip(val).map { |fv|
-          el(
-            'div',
-            attrs: { class: 'ff-field' },
-            children: [ fv[0].edit_element(fv[1]) ]
-          )
+         children: @fields.map { |f|
+          f.model = self.model
+          f.model_name = self.model_name
+          el('div', attrs: { class: 'ff-complex-part' }, children: [ f.to_html(true) ])
         }
       )
     end
@@ -176,15 +162,20 @@ module Forma
       el(
         'div',
         attrs: { class: 'ff-complex-field' },
-        children: @fields.zip(val).map { |fv|
-          el(
-            'div',
-            attrs: { class: 'ff-complex-part' },
-            children: [ fv[0].view_element(fv[1]) ]
-          )
+         children: @fields.map { |f|
+          f.model = self.model
+          el('div', attrs: { class: 'ff-complex-part' }, children: [ f.to_html(false) ])
         }
       )
     end
+
+    def errors
+      @fields.map { |f| f.model = @model; f.errors }.flatten
+    end
+
+    def has_errors?
+      errors.any?
+    end
   end
 
   # Map field.
@@ -336,21 +327,36 @@ module Forma
     def initialize(h = {})
       h = h.symbolize_keys
       @formatter = h[:formatter]
+      @@date_counter ||= 0
+      @@date_counter += 1
+      @date_counter = @@date_counter
       super(h)
     end
 
     def view_element(val)
-      el('span', text: val.localtime.strftime(formatter || Forma.config.date.formatter))
+			val = val.respond_to?(:localtime) ? val.localtime : val
+      el('span', text: val.strftime(formatter || Forma.config.date.formatter))
     end
 
     def edit_element(val)
-      el('input', attrs: {
-        name: parameter_name,
-        type: 'text',
-        value: val.to_s,
-        autofocus: @autofocus,
-        style: { width: ("#{width}px" if width.present?) }
-      })
+      input_id = "ff-date-#{@date_counter}"
+      val = Date.strptime(val) if (val.present? and val.is_a?(String)) rescue nil
+      el('div', children: [
+        el('input', attrs: {
+          id: input_id,
+          name: parameter_name,
+          value: val.to_s,
+          type: 'hidden'
+        }),
+        el('input', attrs: {
+          class: 'ff-date',
+          type: 'text',
+          value: (val.strftime('%d-%b-%Y') if val.present?),
+          autofocus: @autofocus,
+          style: { width: "#{width || 100}px" },
+          'data-altfield' => input_id,
+        })
+      ])
     end
   end
 
@@ -369,22 +375,59 @@ module Forma
 
   # Image upload field.
   class ImageField < SimpleField
+    def initialize(h = {})
+      h = h.symbolize_keys
+      @popover = h[:popover]
+      @height = h[:height] || 200
+      @width = h[:width] || 200
+      super(h)
+    end
+
     def view_element(val)
-      el('img', attrs: { src: val.url } )
+      popover_data = {}
+      image_url = val.respond_to?(:url) ? val.url : val.to_s
+      if @popover
+        popover_data['data-original-title'] = eval_with_model(@popover[:title])
+        url = eval_with_model(@popover[:url])
+        popover_data['data-content'] = %Q{<div style="height: #{@height}px; width: #{@width}px;"><img src="#{url}"></img></div>}
+        popover_data['data-html'] = 'true'
+        popover_data['data-placement'] = @popover[:placement]
+        el('img', attrs: { src: image_url, class: 'ff-popover' }.merge(popover_data))
+      else
+        el('img', attrs: { src: image_url })
+      end
     end
 
     def edit_element(val)
-      el('input', attrs: {
-        name: parameter_name,
-        type: 'file',
-      })
+      el('input', attrs: { name: parameter_name, type: 'file' })
+    end
+  end
+
+  # Image upload field.
+  class FileField < SimpleField
+    def view_element(val)
+      el('div', text: 'NO IMPLEMENTATION')
+    end
+
+    def edit_element(val)
+      el('input', attrs: { name: parameter_name, type: 'file' })
     end
   end
 
   # Number field.
   class NumberField < TextField
+    include Forma::Utils
+    def initialize(h = {})
+      h = h.symbolize_keys
+      @min_digits = h[:min_digits] || Forma.config.num.min_digits
+      @max_digits = h[:max_digits] || Forma.config.num.max_digits
+      @separator = h[:separator] || Forma.config.num.separator
+      @delimiter = h[:delimiter] || Forma.config.num.delimiter
+      super(h)
+    end
+
     def view_element(val)
-      el('code', text: "#{val}")
+      el('code', text: "#{number_format(val.to_f, max_digits: @max_digits, min_digits: @min_digits)}")
     end
   end
 
@@ -408,8 +451,8 @@ module Forma
       data = normalize_data(@collection, @empty)
       selection = val.present? ? val : @default
       el('select', attrs: { name: parameter_name }, children: data.map { |text, value|
-        if value.nil? then el('option', attrs: { selected: selection.blank? }, text: text)
-        else el('option', attrs: { selected: (true if selection == value), value: value }, text: text)
+        if value.nil? then el('option', attrs: { selected: selection.blank? , value: ""}, text: text)
+        else el('option', attrs: { selected: (true if selection.to_s == value.to_s), value: value }, text: text)
         end
       })
     end
@@ -419,11 +462,64 @@ module Forma
     def normalize_data(collection, empty)
       if collection.is_a?(Hash) then data = collection.to_a
       else data = collection.map { |x| [x.to_s, x.id] } end
-      if empty != false then data.insert[empty.to_s, nil] end
+      if empty != false then data = ([[empty.to_s, nil]] + data) end
       Hash[data]
     end
   end
 
+  # Array field.
+  class ArrayField < SimpleField
+    def initialize(h={})
+      h = h.symbolize_keys
+      @item_actions = h[:item_actions] || []
+      @item_url = h[:item_url]
+      super(h)
+    end
+
+    def view_element(val)
+      el('div', attrs: { class: ['ff-array-field'] }, children: val.map { |x| 
+        el('div', attrs: { class: 'ff-array-part' }, children: [
+          if @item_url then el('a', attrs: { href: eval_with_model(@item_url, model: x) }, text: x.to_s) else el('span', text: x.to_s) end,
+          (el('span', attrs: { class: 'ff-actions' }, children: @item_actions.map { |a| a.to_html(x) } ) if @item_actions.any?)
+        ])
+      })
+    end
+
+    def edit_element(val)
+      el('div', text: 'NO IMPLEMENTATION')
+    end
+
+    def item_action(url, h={})
+      h[:url] = url
+      @item_actions << Action.new(h)
+    end
+  end
+
+  # Table field.
+  class TableField < SimpleField
+    def initialize(h={})
+      h = h.symbolize_keys
+      h[:label] = false
+      h[:force_nonempty] = true
+      @table = Forma::Table.new(h[:table] || {})
+      super(h)
+    end
+
+    def view_element(val)
+      @table.models = val
+      @table.to_html
+    end
+
+    def edit_element(val)
+      el('div', text: 'NO IMPLEMENTATION')
+    end
+
+    def table
+      yield @table if block_given?
+      @table
+    end
+  end
+
   # Selection field.
   class SelectField < SimpleField
     def initialize(h={})
@@ -431,21 +527,46 @@ module Forma
       @search_url = h[:search_url]
       @search_width = h[:search_width] || 500
       @search_height = h[:search_height] || 600
+      @polymorphic = h[:polymorphic]
       super(h)
     end
 
-    def view_element(val)
-      el(@tag || 'span', text: val.to_s)
+    def id_field_name
+      chain = name_as_chain
+      chain[chain.length - 1] = "#{chain.last}_id"
+      parameter_name_from_chain(chain)
+    end
+
+    def type_field_name
+      chain = name_as_chain
+      chain[chain.length - 1] = "#{chain.last}_type"
+      parameter_name_from_chain(chain)
     end
 
+    def view_element(val); el(@tag || 'span', text: val.to_s) end
+
     def edit_element(val)
-      el('div', attrs: { id: self.id, class: 'ff-select-field' }, children: [
-        el('input', attrs: { id: "#{self.id}_value", type: 'text', value: "#{val and val.id}" }),
-        el('span', attrs: { id: "#{self.id}_text" }, text: val.to_s),
-        el('a', attrs: { class: 'ff-select-link btn btn-mini', 'data-id' => self.id, 'data-url' => @search_url, 'data-width' => @search_width, 'data-height' => @search_height }, children: [
-          el('i', attrs: { class: 'icon icon-search' })
+      inputs = [ el('input', attrs: { id: "#{self.id}_id_value", type: 'hidden', value: "#{val and val.id}", name: id_field_name }) ]
+      if @polymorphic
+        inputs <<  el('input',
+          attrs: { id: "#{self.id}_type_value", type: 'hidden', value: "#{val and val.class.to_s}", name: type_field_name }
+        )
+      end
+      text_element = el(
+        'span',
+        attrs: { id: "#{self.id}_text", class: ['ff-select-label', ('ff-empty' if val.blank?)] },
+        text: (val.present? ? val.to_s : Forma.config.texts.empty)
+      )
+      buttons = el('div', attrs: { class: 'btn-group' }, children: [
+        el('a', attrs: { class: 'ff-select-link btn btn-mini btn-default btn-xs', 'data-id' => self.id, 'data-url' => @search_url, 'data-width' => @search_width, 'data-height' => @search_height }, children: [
+          el('i', attrs: { class: 'icon icon-search fa fa-search' })
+        ]),
+        el('a', attrs: { class: 'ff-clear-selection-action btn btn-mini btn-default btn-xs', 'data-id' => self.id }, children: [
+          el('i', attrs: { class: 'icon icon-trash fa fa-trash-o' })
         ])
       ])
+      children = inputs + [ text_element, buttons ]
+      el('div', attrs: { id: self.id, class: 'ff-select-field' }, children: children)
     end
   end
 end

data/lib/forma/form.rb

@@ -109,7 +109,7 @@ module Forma
     end
 
     def auth_token_element
-      if @auth_token.present?
+      if @auth_token.present? and @method != 'get'
         el('div', attrs: { style: {padding: 0, margin: 0, height: 0, width: 0, display: 'inline'} }, children: [
           el('input', attrs: { type: 'hidden', name: 'authenticity_token', value: @auth_token })
         ])
@@ -138,7 +138,10 @@ module Forma
           ]
         )
       end
-      value_element = el('div', attrs: { class: (fld.required ? ['ff-value', 'ff-required'] : ['ff-value']) }, children: [
+      value_class = ['ff-value']
+      value_class << 'ff-required' if fld.required
+      value_class << 'ff-value-no-label' if fld.label == false
+      value_element = el('div', attrs: { class: value_class }, children: [
         fld.to_html(@edit), (field_error_element(fld.errors) if has_errors),
       ])
       el(

data/lib/forma/helpers.rb

@@ -92,6 +92,13 @@ module Forma
       add_field(field)
     end
 
+    def file_field(name, opts={})
+      opts[:name] = name
+      field = Forma::FileField.new(opts)
+      yield field if block_given?
+      add_field(field)
+    end
+
     def number_field(name, opts = {})
       opts[:name] = name
       field = Forma::NumberField.new(opts)
@@ -113,6 +120,20 @@ module Forma
       yield field if block_given?
       add_field(field)
     end
+
+    def array_field(name, opts = {})
+      opts[:name] = name
+      field = Forma::ArrayField.new(opts)
+      yield field if block_given?
+      add_field(field)
+    end
+
+    def table_field(name, opts = {})
+      opts[:name] = name
+      field = Forma::TableField.new(opts)
+      yield field if block_given?
+      add_field(field)
+    end
   end
 
   module WithTitleElement

data/lib/forma/html.rb

@@ -44,7 +44,7 @@ module Forma::Html
   module_function :attr
   module_function :el
 
-  private
+#  private
 
   class Attr; end
 
@@ -57,8 +57,10 @@ module Forma::Html
     end
 
     def to_s
-      if @name.present? and @value.present?
-        %Q{#{@name}="#{@value}"}
+      if @name == 'value'
+        %Q{#{@name}="#{ERB::Util.html_escape(@value)}"}
+      elsif @name.present? and @value.present?
+        %Q{#{@name}="#{ERB::Util.html_escape(@value)}"}
       end
     end
   end

data/lib/forma/table.rb

@@ -6,6 +6,7 @@ module Forma
     include Forma::WithTitleElement
     attr_reader :collapsible, :collapsed, :icon, :title
     attr_reader :title_actions
+    attr_accessor :models
 
     def initialize(h = {})
       h = h.symbolize_keys
@@ -108,7 +109,14 @@ module Forma
       if @paginate and @context
         self_from_block = eval("self", @context.binding)
         s = self_from_block.send(:will_paginate, @models, @paginate_options)
-        el('div', html: s.to_s)
+        paginate = el('div', html: s.to_s)
+        el('div', attrs: { class: 'ff-paginate' }, children: [
+          paginate,
+          (el('div', attrs: { class: 'ff-totals' }, children: [
+            el('code', text: "#{@models.total_entries}"),
+            el('span', text: @paginate_options[:records] || 'records')
+          ]) if @models.total_entries > 0)
+        ])
       end
     end
   end

data/lib/forma/utils.rb

@@ -1,6 +1,10 @@
 # -*- encoding : utf-8 -*-
+require 'action_controller'
+
 module Forma
   module Utils
+    include ActionView::Helpers::NumberHelper
+
     def singular_name(model)
       if model.respond_to?(:model_name); model.model_name.singular_route_key # Mongoid
       elsif model.class.respond_to?(:table_name); model.class.table_name.singularize # ActiveModel
@@ -18,7 +22,25 @@ module Forma
       val
     end
 
+    def number_format(num, h = {})
+      max_digits = h[:max_digits] || 2
+      max_digits = 0 if max_digits < 0
+      min_digits = h[:min_digits] || 0
+      min_digits = max_digits if min_digits > max_digits
+      separator = h[:separator] || '.'
+      delimiter = h[:delimiter] || ','
+      formatted = number_with_precision(num, precision: max_digits, separator: separator, delimiter: delimiter, strip_insignificant_zeros: true)
+      nums = formatted.split(separator)
+      length_after_separator = (nums[1] || '').length
+      if length_after_separator >= min_digits
+        formatted
+      else
+        "#{nums[0]}#{separator}#{(nums[1] || '').ljust(min_digits, '0')}"
+      end
+    end
+
     module_function :singular_name
     module_function :extract_value
+    module_function :number_format
   end
 end

data/lib/forma/version.rb

@@ -1,4 +1,4 @@
 # -*- encoding : utf-8 -*-
 module Forma
-  VERSION = "0.1.1"
+  VERSION = "0.1.2"
 end

data/test/utils_test.rb

@@ -0,0 +1,15 @@
+# -*- encoding : utf-8 -*-
+require 'test_helper'
+
+class UtilsTest < Test::Unit::TestCase
+  include Forma::Utils
+
+  def test_number_format
+    assert_equal '123,456', number_format(123_456)
+    assert_equal '123,456.00', number_format(123_456, min_digits: 2)
+    assert_equal '123,456.79', number_format(123_456.789)
+    assert_equal '123,456.789', number_format(123_456.789, max_digits: 3)
+    assert_equal '123,456.789', number_format(123_456.789, max_digits: 4)
+    assert_equal '123,456.7890', number_format(123_456.789, max_digits: 4, min_digits: 4)
+  end
+end

data/vendor/assets/javascripts/forma.js

@@ -69,6 +69,35 @@
     });
   };
 
+  var initializeSelectActions = function() {
+    $('.ff-select-action').click(function() {
+      var valueId = window.name + '_id_value';
+      var typeId = window.name + '_type_value';
+      var labelId = window.name + '_text';
+      var valueElement = window.opener.$('#' + valueId);
+      var labelElement = window.opener.$('#' + labelId);
+      var typeElement = window.opener.$('#' + typeId);
+      valueElement.val($(this).attr('data-value-id'));
+      if (typeElement) { typeElement.val($(this).attr('data-value-type')); }
+      labelElement.html($(this).attr('data-value-text'));
+      labelElement.removeClass('ff-empty');
+      window.close();
+      return false;
+    });
+    $('.ff-clear-selection-action').click(function() {
+      var valueId = $(this).attr('data-id') + '_id_value';
+      var labelId = $(this).attr('data-id') + '_text';
+      var typeId  = $(this).attr('data-id') + '_type_value';
+      var valueElement = $('#' + valueId);
+      var labelElement = $('#' + labelId);
+      var typeElement  = $('#' + typeId);
+      valueElement.val(null);
+      if (typeElement) { typeElement.val(null); }
+      labelElement.text('(empty)');
+      labelElement.addClass('ff-empty');
+    });
+  };
+
   // google map initialization
 
   var mapsData = {};
@@ -121,6 +150,24 @@
     }
   };
 
+  var initPopovers = function() {
+    $('.ff-popover').popover({ trigger: 'click' });
+  };
+
+  var initDatePicker = function() {
+    var pickers = $('.ff-date');
+    for (var i = 0, l = pickers.length; i < l; i++) {
+      var picker = $(pickers[i]);
+      picker.datepicker({
+        dateFormat: 'dd-M-yy',
+        altField: '#' + picker.attr('data-altfield'), altFormat: 'yy-mm-dd',
+        onClose: function(dateText, inst) {
+          if(dateText == '') { $(inst.settings["altField"]).val(dateText); }
+        },
+      });
+    }
+  };
+
   // prepare function
 
   var ready = function() {
@@ -129,7 +176,11 @@
     initializeFormSubmit();
     initializeTooltips();
     initGoogleMaps();
+    initPopovers();
+    initDatePicker();
+    // selectors
     initializeSelectFields();
+    initializeSelectActions();
   };
 
   // turbolink initilization!

data/vendor/assets/stylesheets/forma-min.css

@@ -1,41 +1,47 @@
-.user-select-none{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}
-.ff-form,.ff-table{margin-bottom:16px;}.ff-form .ff-action,.ff-table .ff-action{margin-left:4px;}.ff-form .ff-action:first-child,.ff-table .ff-action:first-child{margin-left:0;}
-.ff-form .ff-action img,.ff-table .ff-action img{padding-right:4px;height:16px;width:16px;}
-.ff-form .ff-title,.ff-table .ff-title{position:relative;}.ff-form .ff-title .ff-active-title,.ff-table .ff-title .ff-active-title{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:pointer;display:inline-block;padding:4px 8px;font-weight:bold;font-size:14px;}.ff-form .ff-title .ff-active-title .ff-collapse,.ff-table .ff-title .ff-active-title .ff-collapse{display:inline-block;height:14px;width:14px;margin-right:4px;margin-top:2px;}
-.ff-form .ff-title .ff-active-title img,.ff-table .ff-title .ff-active-title img{height:16px;width:16px;overflow:hidden;margin-right:4px;}
-.ff-form .ff-title .ff-title-actions,.ff-table .ff-title .ff-title-actions{position:absolute;right:0;top:4px;padding:0 8px;}
-.ff-form .ff-collapse,.ff-table .ff-collapse{background:url(/assets/glyphicons-halflings.png) -313px -119px;}
-.ff-form .ff-collapsed.ff-collapse,.ff-table .ff-collapsed.ff-collapse{background:url(/assets/glyphicons-halflings.png) -456px -72px;}
-.ff-form .ff-field-hint,.ff-table .ff-field-hint{background:url(/assets/glyphicons-halflings.png) -456px -72px;}
-.ff-form .ff-tabs,.ff-table .ff-tabs{padding:4px 0;}.ff-form .ff-tabs ul.ff-tabs-header,.ff-table .ff-tabs ul.ff-tabs-header{list-style-type:none;margin:0;position:relative;border-bottom:1px solid #b1b1b1;}.ff-form .ff-tabs ul.ff-tabs-header li,.ff-table .ff-tabs ul.ff-tabs-header li{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:pointer;display:inline-block;padding:4px 8px;margin-left:8px;margin-bottom:-1px;border:1px solid transparent;}.ff-form .ff-tabs ul.ff-tabs-header li img,.ff-table .ff-tabs ul.ff-tabs-header li img{margin:0 4px;height:16px;width:16px;}
-.ff-form .ff-tabs ul.ff-tabs-header li.ff-selected,.ff-table .ff-tabs ul.ff-tabs-header li.ff-selected{background:#ffffcc;border:1px solid #b1b1b1;border-bottom:1px solid #ffffcc;}
-.ff-form .ff-tabs .ff-tab-actions,.ff-table .ff-tabs .ff-tab-actions{padding:4px 8px;background:#ffffcc;border:1px solid #b1b1b1;margin-top:-1px;}
-.ff-form .ff-tabs .ff-cols,.ff-table .ff-tabs .ff-cols{margin:4px 0 0 0;position:relative;font-size:13px;}.ff-form .ff-tabs .ff-cols .ff-col-100,.ff-table .ff-tabs .ff-cols .ff-col-100{width:100%;}
-.ff-form .ff-tabs .ff-cols .ff-col-50,.ff-table .ff-tabs .ff-cols .ff-col-50{width:50%;float:left;}
-.ff-form .ff-tabs .ff-cols .ff-col:first-child .ff-col-inner,.ff-table .ff-tabs .ff-cols .ff-col:first-child .ff-col-inner{padding-right:4px;}
-.ff-form .ff-tabs .ff-cols .ff-col:last-child .ff-col-inner,.ff-table .ff-tabs .ff-cols .ff-col:last-child .ff-col-inner{padding-left:4px;}
-.ff-form .ff-tabs .ff-cols .ff-col-inner,.ff-table .ff-tabs .ff-cols .ff-col-inner{padding:0;position:relative;}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field{position:relative;border-bottom:1px solid #b1b1b1;}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field:first-child,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field:first-child{border-top:1px solid #b1b1b1;}
-.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label{display:table-cell;vertical-align:top;position:relative;width:150px;padding:4px 4px 4px 8px;background-color:#c8ffb0;border-right:3px solid transparent;}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label.ff-required,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label.ff-required{border-right:3px solid #cf0000;}
-.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label .ff-field-hint,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label .ff-field-hint{display:block;height:16px;width:16px;position:absolute;right:0;top:8px;background-position:-96px -96px;}
-.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value{display:table-cell;padding:4px;vertical-align:top;}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value .ff-field-actions,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value .ff-field-actions{display:inline-block;border-left:1px solid #b1b1b1;padding-left:8px;margin-left:8px;}
-.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-before,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-before{padding-right:8px;}
-.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-after,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-after{padding-left:8px;}
-.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-complex-part,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-complex-part{display:inline-block;padding-right:8px;}
-.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-field,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-field{display:inline-block;border:none;padding-right:8px;}
-.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-link,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-link{margin-left:8px;}
-.ff-form .ff-tabs .ff-cols:after,.ff-table .ff-tabs .ff-cols:after{content:".";display:block;clear:both;width:0;height:0;overflow:hidden;}
-.ff-form .ff-tabs input,.ff-table .ff-tabs input{padding:4px;margin:0;font-size:13px;}
-.ff-form .ff-tabs select,.ff-table .ff-tabs select{padding:4px;margin:0;font-size:13px;width:auto;}
-.ff-form .ff-tabs .ff-error input,.ff-table .ff-tabs .ff-error input{border:1px solid red;color:red;background:#fff8f8;}
-.ff-form .ff-form-errors,.ff-table .ff-form-errors{margin:8px;padding:8px;border:1px solid red;background:#fee;color:red;}
-.ff-form ul.ff-form-errors li,.ff-table ul.ff-form-errors li{margin-left:16px;}
-.ff-form .ff-field-errors,.ff-table .ff-field-errors{color:red;padding:4px 0;}
-.ff-form .ff-bottom-actions,.ff-table .ff-bottom-actions{padding:8px;border-top:1px solid #b1b1b1;background:#e0e0e0;}
-.ff-form table.ff-common-table,.ff-table table.ff-common-table{margin-top:8px;width:100%;border-collapse:collapse;}.ff-form table.ff-common-table thead,.ff-table table.ff-common-table thead{text-align:left;border-top:1px solid #3316ff;border-bottom:1px solid #3316ff;background:#c8ffb0;}.ff-form table.ff-common-table thead th,.ff-table table.ff-common-table thead th{font-weight:normal;padding:4px 8px;}
-.ff-form table.ff-common-table thead .ff-field-hint,.ff-table table.ff-common-table thead .ff-field-hint{display:inline-block;height:16px;width:16px;background-position:-96px -96px;}
-.ff-form table.ff-common-table tbody td,.ff-table table.ff-common-table tbody td{padding:4px 8px;border-bottom:1px solid #3316ff;}
-.ff-empty{color:#a0a0a0;}
-.ff-table-empty{padding:32px;text-align:center;background-color:#f6f6f6;border:1px solid #a0a0a0;border-top:none;}
-.ff-map{width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0;right:0;bottom:0;}.ff-map img{max-width:none;}
-.ff-form .ff-title,.ff-table .ff-title{background-color:#cfc8ff;border-bottom:2px solid #3316ff;border-top:2px solid #3316ff;}
-.tooltip-inner{white-space:pre;max-width:none;}
+.user-select-none{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
+.ff-form,.ff-table{margin-bottom:16px}.ff-form .ff-action,.ff-table .ff-action{margin-left:4px;font-size:13px}.ff-form .ff-action:first-child,.ff-table .ff-action:first-child{margin-left:0}
+.ff-form .ff-action img,.ff-table .ff-action img{padding-right:4px;height:16px;width:16px}
+.ff-form .ff-title,.ff-table .ff-title{position:relative}.ff-form .ff-title .ff-active-title,.ff-table .ff-title .ff-active-title{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:pointer;display:inline-block;padding:4px 8px;font-weight:bold;font-size:14px}.ff-form .ff-title .ff-active-title .ff-collapse,.ff-table .ff-title .ff-active-title .ff-collapse{display:inline-block;height:14px;width:14px;margin-right:4px;margin-top:2px}
+.ff-form .ff-title .ff-active-title img,.ff-table .ff-title .ff-active-title img{height:16px;width:16px;overflow:hidden;margin-right:4px}
+.ff-form .ff-title .ff-title-actions,.ff-table .ff-title .ff-title-actions{position:absolute;right:0;top:4px;padding:0 8px}
+.ff-form .ff-collapse,.ff-table .ff-collapse{background:url(/glyphicons-halflings.png) -313px -119px}
+.ff-form .ff-collapsed.ff-collapse,.ff-table .ff-collapsed.ff-collapse{background:url(/glyphicons-halflings.png) -456px -72px}
+.ff-form .ff-field-hint,.ff-table .ff-field-hint{background:url(/glyphicons-halflings.png) -456px -72px}
+.ff-form .ff-tabs,.ff-table .ff-tabs{padding:4px 0}.ff-form .ff-tabs ul.ff-tabs-header,.ff-table .ff-tabs ul.ff-tabs-header{font-size:13px;list-style-type:none;margin:0;padding:0;position:relative;border-bottom:1px solid #b1b1b1}.ff-form .ff-tabs ul.ff-tabs-header li,.ff-table .ff-tabs ul.ff-tabs-header li{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:pointer;display:inline-block;padding:4px 8px;margin-left:8px;margin-bottom:-1px;border:1px solid transparent}.ff-form .ff-tabs ul.ff-tabs-header li img,.ff-table .ff-tabs ul.ff-tabs-header li img{margin:0 4px;height:16px;width:16px}
+.ff-form .ff-tabs ul.ff-tabs-header li.ff-selected,.ff-table .ff-tabs ul.ff-tabs-header li.ff-selected{background:#ffc;border:1px solid #b1b1b1;border-bottom:1px solid #ffc}
+.ff-form .ff-tabs .ff-tab-actions,.ff-table .ff-tabs .ff-tab-actions{padding:4px 8px;background:#ffc;border:1px solid #b1b1b1;margin-top:-1px}
+.ff-form .ff-tabs .ff-cols,.ff-table .ff-tabs .ff-cols{margin:4px 0 0 0;position:relative;font-size:13px}.ff-form .ff-tabs .ff-cols .ff-col-100,.ff-table .ff-tabs .ff-cols .ff-col-100{width:100%}
+.ff-form .ff-tabs .ff-cols .ff-col-50,.ff-table .ff-tabs .ff-cols .ff-col-50{width:50%;float:left}
+.ff-form .ff-tabs .ff-cols .ff-col:first-child .ff-col-inner,.ff-table .ff-tabs .ff-cols .ff-col:first-child .ff-col-inner{padding-right:4px}
+.ff-form .ff-tabs .ff-cols .ff-col:last-child .ff-col-inner,.ff-table .ff-tabs .ff-cols .ff-col:last-child .ff-col-inner{padding-left:4px}
+.ff-form .ff-tabs .ff-cols .ff-col-inner,.ff-table .ff-tabs .ff-cols .ff-col-inner{padding:0;position:relative}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field{position:relative;border-bottom:1px solid #b1b1b1}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field:first-child,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field:first-child{border-top:1px solid #b1b1b1}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label{display:table-cell;vertical-align:top;position:relative;width:150px;padding:4px 4px 4px 8px;background-color:#c8ffb0;border-right:3px solid transparent}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label.ff-required,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label.ff-required{border-right:3px solid #cf0000}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label .ff-field-hint,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label .ff-field-hint{display:block;height:16px;width:16px;position:absolute;right:0;top:8px;background-position:-96px -96px}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value{display:table-cell;padding:4px;vertical-align:top}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value .ff-field-actions,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value .ff-field-actions{display:inline-block;border-left:1px solid #b1b1b1;padding-left:8px;margin-left:8px}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value.ff-value-no-label,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value.ff-value-no-label{display:block}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field{display:inline-block}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-link,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-link{margin-left:4px}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-label,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-label{display:inline-block;padding:0 4px}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-array-field,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-array-field{display:inline}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-array-field .ff-array-part,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-array-field .ff-array-part{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;display:inline-block;margin:0 4px 4px 0;padding:2px 8px;border:1px solid #ddd;background:#fafafa}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-array-field .ff-array-part .ff-action,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-array-field .ff-array-part .ff-action{margin-left:4px}
+.ff-form .ff-tabs .ff-cols:after,.ff-table .ff-tabs .ff-cols:after{content:".";display:block;clear:both;width:0;height:0;overflow:hidden}
+.ff-form .ff-tabs input,.ff-table .ff-tabs input{padding:4px;margin:0;font-size:13px}
+.ff-form .ff-tabs select,.ff-table .ff-tabs select{padding:4px;margin:0;font-size:13px;width:auto}
+.ff-form .ff-tabs .ff-error input,.ff-table .ff-tabs .ff-error input{border:1px solid red;color:red;background:#fff8f8}
+.ff-form .ff-tabs .ff-inline-hint,.ff-table .ff-tabs .ff-inline-hint{padding:4px 2px;color:#88f;font-size:12px}
+.ff-form .ff-form-errors,.ff-table .ff-form-errors{margin:8px;padding:8px;border:1px solid red;background:#fee;color:red}
+.ff-form ul.ff-form-errors li,.ff-table ul.ff-form-errors li{margin-left:16px}
+.ff-form .ff-field-errors,.ff-table .ff-field-errors{color:red;padding:4px 0}
+.ff-form .ff-bottom-actions,.ff-table .ff-bottom-actions{padding:8px;border-top:1px solid #b1b1b1;background:#e0e0e0}
+.ff-form table.ff-common-table,.ff-table table.ff-common-table{margin-top:8px;width:100%;border-collapse:collapse}.ff-form table.ff-common-table thead,.ff-table table.ff-common-table thead{text-align:left;border-top:1px solid #3316ff;border-bottom:1px solid #3316ff;background:#c8ffb0}.ff-form table.ff-common-table thead th,.ff-table table.ff-common-table thead th{font-size:13px;font-weight:normal;padding:4px 8px}
+.ff-form table.ff-common-table thead .ff-field-hint,.ff-table table.ff-common-table thead .ff-field-hint{display:inline-block;height:16px;width:16px;background-position:-96px -96px}
+.ff-form table.ff-common-table tbody td,.ff-table table.ff-common-table tbody td{font-size:13px;padding:4px 8px;border-bottom:1px solid #3316ff;background:white}
+.ff-form .ff-paginate .ff-totals,.ff-table .ff-paginate .ff-totals{padding:4px}.ff-form .ff-paginate .ff-totals span,.ff-table .ff-paginate .ff-totals span{padding-left:4px}
+.ff-form .ff-field-before,.ff-table .ff-field-before{padding-right:8px}
+.ff-form .ff-field-after,.ff-table .ff-field-after{padding-left:8px}
+.ff-form .ff-complex-field .ff-complex-part,.ff-table .ff-complex-field .ff-complex-part{display:inline-block;padding-right:8px}
+.ff-form .ff-complex-field .ff-field,.ff-table .ff-complex-field .ff-field{display:inline-block;border:none;padding-right:8px}
+.ff-form .ff-select-field,.ff-table .ff-select-field{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px solid #ddd;padding:3px 3px 2px 3px;background:#ffc}.ff-form .ff-select-field .ff-select-label,.ff-table .ff-select-field .ff-select-label{min-width:100px}
+.ff-empty{color:#a0a0a0}
+.ff-table-empty{padding:32px;text-align:center;background-color:#f6f6f6;border:1px solid #a0a0a0;border-top:none}
+.ff-map{width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0;right:0;bottom:0}.ff-map img{max-width:none}
+.ff-form .ff-title,.ff-table .ff-title{background-color:#cfc8ff;border-bottom:2px solid #3316ff;border-top:2px solid #3316ff}
+.tooltip-inner{white-space:pre;max-width:none}

data/vendor/assets/stylesheets/forma.css

@@ -11,6 +11,7 @@
 .ff-form .ff-action,
 .ff-table .ff-action {
   margin-left: 4px;
+  font-size: 13px;
 }
 .ff-form .ff-action:first-child,
 .ff-table .ff-action:first-child {
@@ -62,15 +63,15 @@
 }
 .ff-form .ff-collapse,
 .ff-table .ff-collapse {
-  background: url(/assets/glyphicons-halflings.png) -313px -119px;
+  background: url(/glyphicons-halflings.png) -313px -119px;
 }
 .ff-form .ff-collapsed.ff-collapse,
 .ff-table .ff-collapsed.ff-collapse {
-  background: url(/assets/glyphicons-halflings.png) -456px -72px;
+  background: url(/glyphicons-halflings.png) -456px -72px;
 }
 .ff-form .ff-field-hint,
 .ff-table .ff-field-hint {
-  background: url(/assets/glyphicons-halflings.png) -456px -72px;
+  background: url(/glyphicons-halflings.png) -456px -72px;
 }
 .ff-form .ff-tabs,
 .ff-table .ff-tabs {
@@ -78,8 +79,10 @@
 }
 .ff-form .ff-tabs ul.ff-tabs-header,
 .ff-table .ff-tabs ul.ff-tabs-header {
+  font-size: 13px;
   list-style-type: none;
   margin: 0;
+  padding: 0;
   position: relative;
   border-bottom: 1px solid #b1b1b1;
 }
@@ -189,28 +192,43 @@
   padding-left: 8px;
   margin-left: 8px;
 }
-.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-before,
-.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-before {
-  padding-right: 8px;
-}
-.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-after,
-.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-after {
-  padding-left: 8px;
-}
-.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-complex-part,
-.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-complex-part {
-  display: inline-block;
-  padding-right: 8px;
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value.ff-value-no-label,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value.ff-value-no-label {
+  display: block;
 }
-.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-field,
-.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-field {
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field {
   display: inline-block;
-  border: none;
-  padding-right: 8px;
 }
 .ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-link,
 .ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-link {
-  margin-left: 8px;
+  margin-left: 4px;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-label,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-label {
+  display: inline-block;
+  padding: 0 4px;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-array-field,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-array-field {
+  display: inline;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-array-field .ff-array-part,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-array-field .ff-array-part {
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  border-radius: 5px;
+  display: inline-block;
+  margin: 0 4px 4px 0;
+  padding: 2px 8px;
+  border: 1px solid #ddd;
+  background: #fafafa;
+}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-array-field .ff-array-part .ff-action,
+.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-array-field .ff-array-part .ff-action {
+  margin-left: 4px;
 }
 .ff-form .ff-tabs .ff-cols:after,
 .ff-table .ff-tabs .ff-cols:after {
@@ -240,6 +258,12 @@
   color: red;
   background: #fff8f8;
 }
+.ff-form .ff-tabs .ff-inline-hint,
+.ff-table .ff-tabs .ff-inline-hint {
+  padding: 4px 2px;
+  color: #88f;
+  font-size: 12px;
+}
 .ff-form .ff-form-errors,
 .ff-table .ff-form-errors {
   margin: 8px;
@@ -278,6 +302,7 @@
 }
 .ff-form table.ff-common-table thead th,
 .ff-table table.ff-common-table thead th {
+  font-size: 13px;
   font-weight: normal;
   padding: 4px 8px;
 }
@@ -290,8 +315,52 @@
 }
 .ff-form table.ff-common-table tbody td,
 .ff-table table.ff-common-table tbody td {
+  font-size: 13px;
   padding: 4px 8px;
   border-bottom: 1px solid #3316ff;
+  background: white;
+}
+.ff-form .ff-paginate .ff-totals,
+.ff-table .ff-paginate .ff-totals {
+  padding: 4px;
+}
+.ff-form .ff-paginate .ff-totals span,
+.ff-table .ff-paginate .ff-totals span {
+  padding-left: 4px;
+}
+.ff-form .ff-field-before,
+.ff-table .ff-field-before {
+  padding-right: 8px;
+}
+.ff-form .ff-field-after,
+.ff-table .ff-field-after {
+  padding-left: 8px;
+}
+.ff-form .ff-complex-field .ff-complex-part,
+.ff-table .ff-complex-field .ff-complex-part {
+  display: inline-block;
+  padding-right: 8px;
+}
+.ff-form .ff-complex-field .ff-field,
+.ff-table .ff-complex-field .ff-field {
+  display: inline-block;
+  border: none;
+  padding-right: 8px;
+}
+.ff-form .ff-select-field,
+.ff-table .ff-select-field {
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+  padding: 3px 3px 2px 3px;
+  background: #ffffcc;
+}
+.ff-form .ff-select-field .ff-select-label,
+.ff-table .ff-select-field .ff-select-label {
+  min-width: 100px;
 }
 .ff-empty {
   color: #a0a0a0;

data/vendor/less/forma.less

@@ -1,8 +1,8 @@
 .user-select-none { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
 .rounded-corners(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; }
 
-@halflings: url(/assets/glyphicons-halflings.png);
-@halflings-white: url(/assets/glyphicons-halflings-white.png);
+@halflings: url(/glyphicons-halflings.png);
+@halflings-white: url(/glyphicons-halflings-white.png);
 @border-color: #b1b1b1;
 @selected-tab-color: #ffffcc;
 @base-font-size: 13px;
@@ -15,6 +15,7 @@
   margin-bottom: 16px;
   .ff-action {
     margin-left: 4px;
+    font-size: 13px;
     &:first-child { margin-left: 0; };
     img { padding-right: 4px; height: 16px; width: 16px; }
   }
@@ -33,7 +34,8 @@
   .ff-tabs {
     padding: 4px 0;
     ul.ff-tabs-header {
-      list-style-type: none; margin: 0; position: relative;
+      font-size: 13px;
+      list-style-type: none; margin: 0; padding: 0; position: relative;
       border-bottom: 1px solid @border-color;
       li { .user-select-none; cursor: pointer; display: inline-block;
         padding: 4px 8px; margin-left: 8px; margin-bottom: -1px;
@@ -74,15 +76,21 @@
           .ff-value {
             display: table-cell; padding: 4px; vertical-align: top;
             .ff-field-actions { display: inline-block; border-left: 1px solid @border-color; padding-left: 8px; margin-left: 8px; }
-          }
-          .ff-field-before { padding-right: 8px; }
-          .ff-field-after { padding-left: 8px; }
-          .ff-complex-field {
-            .ff-complex-part { display: inline-block; padding-right: 8px; }
-            .ff-field { display: inline-block; border: none; padding-right: 8px; }
+            &.ff-value-no-label { display: block; }
           }
           .ff-select-field {
-            .ff-select-link { margin-left: 8px; }
+            display: inline-block;
+            .ff-select-link { margin-left: 4px; }
+            .ff-select-label { display: inline-block; padding: 0 4px; }
+          }
+          .ff-array-field {
+            display: inline;
+            .ff-array-part {
+              .rounded-corners; display: inline-block; margin: 0 4px 4px 0;
+              padding: 2px 8px; border: 1px solid #ddd;
+              background: #fafafa;
+              .ff-action { margin-left: 4px; }
+            }
           }
         }
       }
@@ -91,6 +99,7 @@
     input { padding: 4px; margin: 0; font-size: @base-font-size; }
     select { padding: 4px; margin: 0; font-size: @base-font-size; width: auto; }
     .ff-error input { border: 1px solid red; color: red; background: #fff8f8; }
+    .ff-inline-hint { padding: 4px 2px; color: #88f; font-size: 12px; }
   }
   .ff-form-errors { margin: 8px; padding: 8px; border: 1px solid red; background: #fee; color: red;}
   ul.ff-form-errors { li { margin-left: 16px; } }
@@ -102,16 +111,40 @@
       border-top: 1px solid @blue-theme-border;
       border-bottom: 1px solid @blue-theme-border;
       background: @label-background;
-      th { font-weight: normal; padding: 4px 8px; } 
+      th { font-size: 13px; font-weight: normal; padding: 4px 8px; } 
       .ff-field-hint { display: inline-block; height: 16px; width: 16px; background-position: -96px -96px; }
     }
     tbody {
-      td { padding: 4px 8px; border-bottom: 1px solid @blue-theme-border; }
+      td {
+        font-size: 13px;
+        padding: 4px 8px; border-bottom: 1px solid @blue-theme-border;
+        background: white;
+      }
     }
   }
+  .ff-paginate {
+    .ff-totals {
+      padding: 4px;
+      span { padding-left: 4px; }
+    }
+  }
+  .ff-field-before { padding-right: 8px; }
+  .ff-field-after { padding-left: 8px; }
+  .ff-complex-field {
+    .ff-complex-part { display: inline-block; padding-right: 8px; }
+    .ff-field { display: inline-block; border: none; padding-right: 8px; }
+  }
+  .ff-select-field {
+    .rounded-corners;
+    border: 1px solid #ddd;
+    padding: 3px 3px 2px 3px;
+    background: @selected-tab-color;
+    .ff-select-label { min-width: 100px; }
+  }
 }
 .ff-empty { color: #a0a0a0; }
 .ff-table-empty { padding: 32px; text-align: center; background-color: #f6f6f6; border: 1px solid #a0a0a0; border-top: none; }
+//.ff-table-body { background: white; }
 
 .ff-map {
   width:100%; height:100%; overflow:hidden; position: absolute;

metadata

@@ -1,20 +1,18 @@
 --- !ruby/object:Gem::Specification
 name: forma
 version: !ruby/object:Gem::Version
-  version: 0.1.1
-  prerelease: 
+  version: 0.1.2
 platform: ruby
 authors:
 - Dimitri Kurashvili
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-05-23 00:00:00.000000000 Z
+date: 2014-01-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
@@ -22,7 +20,6 @@ dependencies:
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
@@ -30,23 +27,20 @@ dependencies:
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - '>='
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - '>='
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: rspec
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
@@ -54,7 +48,6 @@ dependencies:
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
@@ -62,7 +55,6 @@ dependencies:
 - !ruby/object:Gem::Dependency
   name: therubyracer
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
@@ -70,7 +62,6 @@ dependencies:
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
@@ -78,7 +69,6 @@ dependencies:
 - !ruby/object:Gem::Dependency
   name: less
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
@@ -86,7 +76,6 @@ dependencies:
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
@@ -94,33 +83,29 @@ dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - '>='
       - !ruby/object:Gem::Version
         version: '3.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - '>='
       - !ruby/object:Gem::Version
         version: '3.1'
 - !ruby/object:Gem::Dependency
   name: activesupport
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - '>='
       - !ruby/object:Gem::Version
         version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - '>='
       - !ruby/object:Gem::Version
         version: '0'
 description: rich forms for ruby
@@ -157,6 +142,7 @@ files:
 - test/field_test.rb
 - test/form_test.rb
 - test/test_helper.rb
+- test/utils_test.rb
 - vendor/assets/images/ff-icons.png
 - vendor/assets/javascripts/forma.js
 - vendor/assets/stylesheets/forma-min.css
@@ -165,27 +151,26 @@ files:
 homepage: http://github.com/dimakura/forma
 licenses:
 - MIT
+metadata: {}
 post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - '>='
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - '>='
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.24
+rubygems_version: 2.0.3
 signing_key: 
-specification_version: 3
+specification_version: 4
 summary: rich forms for ruby
 test_files:
 - spec/config_spec.rb
@@ -197,3 +182,4 @@ test_files:
 - test/field_test.rb
 - test/form_test.rb
 - test/test_helper.rb
+- test/utils_test.rb