Merge branch 'master' of github.com:wearefine/fae into v1.7

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Fae Changelog
 
+## Unreleased
+
+- enhancements
+    + Style flash message errors appropriately
+
 ## 1.6
 
 - enhancements

Gemfile.lock

@@ -268,7 +268,7 @@ GEM
     rspec-support (3.0.4)
     ruby-prof (0.16.2)
     ruby_dep (1.5.0)
-    rubyzip (1.2.0)
+    rubyzip (1.2.1)
     sass (3.4.22)
     sass-rails (5.0.6)
       railties (>= 4.0.0, < 6)

app/assets/javascripts/fae/application.js

@@ -24,6 +24,7 @@
 //= require fae/vendor/fryr
 //= require fae/vendor/moment.min
 //= require fae/vendor/jquery.daterangepicker
+//= require fae/vendor/jqColorPicker.min
 //= require fae/vendor/jquery.multi-select
 //= require fae/vendor/jquery.simplemodal.1.4.4
 //= require fae/vendor/jquery.tablesorter
@@ -36,6 +37,7 @@
 //= require fae/form/hinter
 //= require fae/form/_form
 //= require fae/form/inputs/_dates
+//= require fae/form/inputs/_color
 //= require fae/form/inputs/_select
 //= require fae/form/inputs/_text
 //= require fae/form/inputs/_checkbox

app/assets/javascripts/fae/form/_ajax.js

@@ -69,6 +69,7 @@ Fae.form.ajax = {
       // Reinitialize form elements
       Fae.form.dates.initDatepicker();
       Fae.form.dates.initDateRangePicker();
+      Fae.form.color.initColorpicker();
       Fae.form.slugger.addListener();
       Fae.form.validator.length_counter.init();
       Fae.form.text.initMarkdown();
@@ -134,6 +135,7 @@ Fae.form.ajax = {
 
             Fae.form.dates.initDatepicker();
             Fae.form.dates.initDateRangePicker();
+            Fae.form.color.initColorpicker();
             Fae.form.validator.length_counter.init();
             Fae.form.checkbox.setCheckboxAsActive();
             Fae.form.text.initMarkdown();

app/assets/javascripts/fae/form/_form.js

@@ -11,6 +11,7 @@ Fae.form = {
     this.makeTwoColumnLabels();
 
     this.dates.init();
+    this.color.init();
     this.text.init();
     this.select.init();
     this.checkbox.init();

app/assets/javascripts/fae/form/inputs/_color.js

@@ -0,0 +1,41 @@
+/* global Fae, colorpicker, FCH */
+
+/**
+ * Fae form color
+ * @namespace form.color
+ * @memberof form
+ */
+
+Fae.form.color = {
+  init: function() {
+    this.initColorpicker();
+  },
+
+  /**
+   * Initialize colorpicker
+   */
+  initColorpicker: function(e) {
+    var includeAlphaSlider = $('.alpha-slider').length > 0
+
+    var settings = {
+      opacity: includeAlphaSlider,
+      positionCallback: function($elm) {
+        var inputOffset = $elm.offset().top;
+        var distanceToBottom = $(document).height() - inputOffset;
+        var top = distanceToBottom <= this.$UI._height ? 414 : inputOffset + $elm.innerHeight();
+
+        return { left: 30, top: top }
+      },
+      renderCallback: function($elm, toggled) {
+        var colors = this.color.colors;
+
+        // default to HEX if Alpha is 1
+        if ($elm.val() && colors.alpha > 0.9) {
+          $elm.val('#' + colors.HEX);
+        }
+      }
+    }
+
+    $('.js-color-picker').colorPicker(settings);
+  }
+};

app/assets/stylesheets/fae/base.scss

@@ -67,6 +67,7 @@
   'modules/forms/asset-actions',
   'modules/forms/select',
   'modules/forms/date',
+  'modules/forms/colorpicker',
   'modules/forms/hints',
   'modules/forms/validation',
   'modules/forms/simple-mde'

app/assets/stylesheets/fae/modules/_alerts.scss

@@ -38,6 +38,7 @@
   }
 }
 
+.flash-message.error,
 .alert {
   border-color: $c-error-content;
   background: $c-error-bg;

app/assets/stylesheets/fae/modules/forms/_colorpicker.scss

@@ -0,0 +1,57 @@
+.input.string .color-picker {
+  width: 180px;
+}
+
+div.cp-color-picker {
+  border: 1px solid $c-darker-grey;
+  padding: 10px 10px 0;
+  background: $c-lightest-grey;
+  overflow: visible;
+  border-radius: 3px;
+
+  .cp-alpha {
+    margin: 10px 0;
+    height: 6px;
+    border-radius: 6px;
+    overflow: visible;
+    border: 1px solid $c-darker-grey;
+    box-sizing: border-box;
+    background: linear-gradient(to right, rgba($c-lightest-grey, 1) 0%, rgba($c-lightest-grey, 0) 100%);
+  }
+
+  .cp-xy-slider {
+    border: 1px solid $c-darker-grey;
+    margin-bottom: 10px;
+
+    &:active {
+      cursor: none;
+    }
+  }
+
+  .cp-xy-cursor {
+    width: 12px;
+    height: 12px;
+    margin: -6px
+  }
+
+  .cp-z-slider {
+    margin-left: 10px;
+    border: 1px solid $c-darker-grey;
+  }
+
+  .cp-z-cursor {
+    border-width: 5px;
+    margin-top: -5px;
+  }
+
+  .cp-alpha-cursor {
+    background: $c-lightest-grey;
+    border-radius: 100%;
+    width: 14px;
+    height: 14px;
+    margin: -5px -7px;
+    border: 1px solid $c-mid-dark-grey !important; // overrides default border
+    box-shadow: inset -2px -4px 3px $c-mid-grey;
+  }
+}
+

app/helpers/fae/form_helper.rb

@@ -74,6 +74,15 @@ def fae_datepicker(f, attribute, options={})
       fae_input f, attribute, options
     end
 
+    def fae_color_picker(f, attribute, options={})
+      options.update(
+        as: :string,
+        input_class: "js-color-picker color-picker #{'alpha-slider' unless options[:alpha] == false}",
+        input_html: { value: f.object.send(attribute).to_s } # value needs to be set to clear color picker
+      )
+      fae_input f, attribute, options
+    end
+
     def fae_daterange(f, attr_array, options={})
       raise "Fae::MissingRequiredOption: fae_daterange requires the 'label' option." if options[:label].blank?
       raise "Fae::MalformedArgument: fae_daterange requires an array of two attributes as it's second argument." unless attr_array.present? && attr_array.is_a?(Array) && attr_array.length == 2
@@ -165,7 +174,7 @@ def to_class(attribute)
 
     def add_input_class(options, class_name)
       if options.key?(:input_html)
-        options[:input_html] = { class: "#{options[:input_html][:class]} #{class_name}" }
+        options[:input_html].merge!({class: "#{options[:input_html][:class]} #{class_name}"})
       else
         options[:input_html] = { class: class_name }
       end

app/views/fae/application/_content_form.html.slim

@@ -1,5 +1,6 @@
 ruby:
   require_locals     ['attribute', 'f'], local_assigns
+  has_label            = ![false, ''].include?(local_assigns[:label])
   label              ||= attribute.to_s.titleize
   required           ||= f.object.send(attribute).is_required?(f.object.class)
   helper_text        ||= attempt_common_helper_text(attribute)
@@ -9,16 +10,21 @@ ruby:
   options            ||= {}
   input_options      ||= {}
 
-  label_adjusted = required ? '<abbr title="required">*</abbr> ' : ''
-  label_adjusted += label
-  if markdown_supported.present? || helper_text.present?
-    label_adjusted += content_tag :h6, class: 'helper_text' do
-      concat(helper_text) if helper_text.present?
-      concat(content_tag(:span, 'Markdown Supported', class: 'markdown-support')) if markdown_supported.present?
+  if has_label
+    label_adjusted = required ? '<abbr title="required">*</abbr> ' : ''
+    label_adjusted += label
+    if markdown_supported.present? || helper_text.present?
+      label_adjusted += content_tag :h6, class: 'helper_text' do
+        concat(helper_text) if helper_text.present?
+        concat(content_tag(:span, 'Markdown Supported', class: 'markdown-support')) if markdown_supported.present?
+      end
     end
+  else
+    options[:label] = false
   end
 
-  options.merge! label: label_adjusted.html_safe, hint: hint
+  options.merge! label: label_adjusted.html_safe if label_adjusted.present?
+  options.merge! hint: hint
   options.merge! input_options if (input_options.keys).any?
   options.merge! wrapper_html: {} if input_options[:wrapper_html].blank?
 

docs/helpers/form_helpers.md

@@ -252,6 +252,16 @@ The daterangepicker is a little different: instead of a single attribute, it acc
 fae_daterange f, [:start_date, :end_date], label: 'Start/End dates'
 ```
 
+## Fae Color Picker
+
+The color picker includes alpha support but can be disabled by setting `alpha: false`
+
+```ruby
+fae_color_picker f, :color
+```
+
+![Suffix](https://raw.githubusercontent.com/wearefine/fae/master/docs/images/colorpicker.gif)
+
 ## Fae Prefix
 
 ```ruby

docs/topics/generators.md

@@ -13,6 +13,7 @@ Once you have Fae installed, you're ready to start generating your data model. F
 ```bash
 rails g fae:scaffold [ModelName] [field:type] [field:type]
 ```
+
 | option | description |
 |------- | ----------- |
 | ModelName | singular camel-cased model name |

docs/tutorials/dynamic_relationships_to_pages.md

@@ -30,7 +30,7 @@ end
 ```ruby
 class Promo < ActiveRecord::Base
 
-  belongs_to :static_page, class_name: 'Fae::StaticPage'
+  belongs_to :static_page, class_name: 'Fae::StaticPage', optional: true
 
 end
 
@@ -63,4 +63,4 @@ Lastly, in the object form be sure to add the `static_page_id` as a hidden field
   = f.hidden_field :static_page_id
 
   = f.submit
-```
+```

fae.gemspec

@@ -13,7 +13,6 @@ Gem::Specification.new do |s|
   s.license     = 'MIT'
 
   s.files = Dir['{app,config,db,lib}/**/*', 'Rakefile', 'README.md']
-  s.test_files = Dir['spec/**/*']
 
   # Rails dependencies
   s.add_dependency 'rails', '>= 4.1'