RubyGems - tao_form - Versions diffs - 0.1.9 → 0.1.10 - Mend

tao_form 0.1.9 → 0.1.10

Files changed (132) hide show

data/lib/assets/javascripts/tao/form/shared/fields/select/result/base.coffee CHANGED

@@ -16,12 +16,12 @@ class Tao.Form.Select.ResultBase extends TaoComponent
   _bind: ->
     @on 'click', 'select', =>
-      @trigger 'tao:activeClick'
+      @namespacedTrigger 'activeClick'
       false
     @on 'click', '.link-clear', (e) =>
       return if @disabled
-      @clear() && @trigger('tao:clear')
+      @clearSelected() && @namespacedTrigger('clear')
       false
   selectOption: (option) ->
@@ -40,6 +40,9 @@ class Tao.Form.Select.ResultBase extends TaoComponent
     @jq.find('.selected-text').text ''
     true
+  clearSelected: ->
+    @unselectOption()
   _setSelectedOption: (option) ->
     @field.find('option:selected').prop 'selected', false
     return unless option
@@ -52,6 +55,3 @@ class Tao.Form.Select.ResultBase extends TaoComponent
     $option = $('<option>', test: option.text, value: option.value).appendTo(@field)
     @field.trigger 'tao:addOption', option, $option
     $option
-  clear: ->
-    @unselectOption()

data/lib/assets/javascripts/tao/form/shared/fields/switch.coffee CHANGED

@@ -9,10 +9,14 @@ class Tao.Form.SwitchBase extends TaoComponent
     @_bind()
   _bind: ->
+    @on 'change', 'input[type=checkbox]', (e) =>
+      @namespacedTrigger 'change'
+      null
     @on 'click', '.switch-wrapper', (e) =>
       if @field.is(':enabled')
         @_toggleChecked()
-        @trigger 'tao:change'
+        @namespacedTrigger 'change'
       false
   _disconnected: ->

data/lib/assets/javascripts/tao/form/shared/init.coffee ADDED

@@ -0,0 +1,23 @@
+Tao.Application.initializer 'moment', (app) ->
+  if moment? && app.locale
+    moment.locale(app.locale.toLowerCase())
+  if moment?.tz? && app.timeZone
+    moment.tz.setDefault(app.timeZone)
+Tao.AttributeManager.registerAttribute 'moment',
+  get: (element, name, options) ->
+    value = element.getAttribute name
+    if _.isString value
+      try
+        moment value
+      catch e
+        options.default || null
+    else
+      options.default || null
+  set: (element, name, val, options) ->
+    val = try
+      val.format()
+    catch e
+      ''
+    element.setAttribute name, val

data/lib/assets/stylesheets/tao/form/fields/checkbox.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/globals';
 @import 'tao/form/shared/fields/checkbox';
-tao-check-box {
+.tao-check-box {
   .checkbox-wrapper {
     &:hover {
       border-color: #63D65C;

data/lib/assets/stylesheets/tao/form/fields/date_range_picker.scss ADDED

@@ -0,0 +1,20 @@
+@import 'tao/form/globals';
+.tao-date-range-picker {
+  display: inline-flex;
+  width: 23rem;
+  align-items: center;
+  .start-date-picker.tao-moment-picker,
+  .end-date-picker.tao-moment-picker {
+    flex: 1 1 auto;
+    width: 50%;
+  }
+  .to {
+    font-size: 0.875rem;
+    color: $lightest-grey-color;
+    margin: 0 0.5rem;
+  }
+}

data/lib/assets/stylesheets/tao/form/fields/datetime_picker.scss CHANGED

@@ -1,6 +1,6 @@
 @import 'tao/form/globals';
-tao-datetime-picker {
+.tao-datetime-picker {
   display: inline-flex;
   width: $form-field-width;
@@ -8,13 +8,13 @@ tao-datetime-picker {
     display: none;
   }
-  tao-date-picker.moment-picker {
+  .tao-date-picker.tao-moment-picker {
     flex: 0 0 auto;
     width: 11rem;
     margin-right: 0.5rem;
   }
-  tao-time-picker.moment-picker {
+  .tao-time-picker.tao-moment-picker {
     flex: 1 1 auto;
     width: auto;
   }

data/lib/assets/stylesheets/tao/form/fields/index.scss CHANGED

@@ -4,3 +4,4 @@
 //= require ./select
 //= require ./moment_picker
 //= require ./datetime_picker
+//= require ./date_range_picker

data/lib/assets/stylesheets/tao/form/fields/moment_picker/index.scss CHANGED

@@ -3,7 +3,7 @@
 @import 'tao/form/globals';
-.moment-picker {
+.tao-moment-picker {
   display: inline-block;
   width: $form-field-width;
   position: relative;

data/lib/assets/stylesheets/tao/form/fields/moment_picker/result.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/globals';
 @import 'tao/form/shared/fields/moment_picker/result';
-tao-moment-picker-result {
+.tao-moment-picker-result {
   justify-content: space-between;
   background: $white-color;
   border: 1px solid $border-color;

data/lib/assets/stylesheets/tao/form/fields/moment_picker/segment_list.scss CHANGED

@@ -3,7 +3,7 @@
 $select-list-offset: 0.375rem;
-tao-moment-picker-segment-list {
+.tao-moment-picker-segment-list {
   display: none;
   flex-direction: column;
   position: absolute;
@@ -37,7 +37,7 @@ tao-moment-picker-segment-list {
   }
   .segments {
-    .segment {
+    .tao-moment-picker-segment {
       margin: 0 0.5rem;
       padding: 0.5rem 0;

data/lib/assets/stylesheets/tao/form/fields/moment_picker/segments/date_segment.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/globals';
 @import 'tao/form/shared/fields/moment_picker/segments/date_segment';
-tao-moment-picker-date-segment {
+.tao-moment-picker-date-segment {
   .calendar {
     width: 15rem;
     margin-top: -0.5rem;

data/lib/assets/stylesheets/tao/form/fields/moment_picker/segments/hour_segment.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/globals';
 @import 'tao/form/shared/fields/moment_picker/segments/hour_segment';
-tao-moment-picker-hour-segment {
+.tao-moment-picker-hour-segment {
   .hours {
     width: 12rem;

data/lib/assets/stylesheets/tao/form/fields/moment_picker/segments/minute_segment.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/globals';
 @import 'tao/form/shared/fields/moment_picker/segments/minute_segment';
-tao-moment-picker-minute-segment {
+.tao-moment-picker-minute-segment {
   .minutes {
     width: 12rem;
     max-height: 12rem;

data/lib/assets/stylesheets/tao/form/fields/moment_picker/segments/month_segment.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/globals';
 @import 'tao/form/shared/fields/moment_picker/segments/month_segment';
-tao-moment-picker-month-segment {
+.tao-moment-picker-month-segment {
   .month-list {
     width: 15rem;

data/lib/assets/stylesheets/tao/form/fields/moment_picker/segments/year_segment.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/globals';
 @import 'tao/form/shared/fields/moment_picker/segments/year_segment';
-tao-moment-picker-year-segment {
+.tao-moment-picker-year-segment {
   .year-list {
     width: 15rem;

data/lib/assets/stylesheets/tao/form/fields/radio.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/globals';
 @import 'tao/form/shared/fields/radio';
-tao-radio-button {
+.tao-radio-button {
   .radio-wrapper {
     &:hover {
       border-color: #69D061;

data/lib/assets/stylesheets/tao/form/fields/select/index.scss CHANGED

@@ -3,7 +3,7 @@
 @import 'tao/form/globals';
-tao-select {
+.tao-select {
   display: inline-block;
   width: $form-field-width;
   position: relative;

data/lib/assets/stylesheets/tao/form/fields/select/list.scss CHANGED

@@ -1,13 +1,13 @@
 @import 'tao/form/globals';
 @import 'tao/form/shared/fields/select/list';
-tao-select-list {
+.tao-select-list {
   display: none;
   flex-direction: column;
   position: absolute;
   top: 100%;
   left: 0;
-  min-width: $form-field-width;
+  min-width: 100%;
   border: 1px solid $border-color;
   box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);
   z-index: $z-index-popover;
@@ -51,11 +51,5 @@ tao-select-list {
   .options-list {
     display: flex;
     flex-direction: column;
-    .option {
-      &:hover {
-        background: $grey-bg-color;
-      }
-    }
   }
 }

data/lib/assets/stylesheets/tao/form/fields/select/multiple_result.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/globals';
 @import 'tao/form/shared/fields/select/multiple_result';
-tao-multiple-select-result {
+.tao-multiple-select-result {
   min-width: $form-field-width;
   padding-top: 0.125rem;

data/lib/assets/stylesheets/tao/form/fields/select/result.scss CHANGED

@@ -1,6 +1,6 @@
 @import 'tao/form/globals';
-tao-select-result {
+.tao-select-result {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -92,7 +92,7 @@ tao-select-result {
           display: flex;
         }
-        .icon-arrow-down {
+        .arrow-icon-wrapper {
           display: none;
         }
       }

data/lib/assets/stylesheets/tao/form/fields/switch.scss CHANGED

@@ -1,12 +1,14 @@
 @import 'tao/form/globals';
 @import 'tao/form/shared/fields/switch';
-tao-switch {
+.tao-switch {
   .switch-wrapper {
+    outline: none;
     &:focus {
-      border-color: #63D65C;
-      box-shadow: 0px 0px 4px 0px rgba(#4A90E2, 0.5);
-      outline: none;
+      .switch-toggle {
+        box-shadow: 0px 0px 4px 0px rgba(#4A90E2, 0.5);
+      }
     }
   }
 }

data/lib/assets/stylesheets/tao/form/inputs/boolean.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/globals';
 @import 'tao/form/shared/inputs/boolean';
-tao-form .boolean-field {
+.tao-form .boolean-field {
   height: $form-field-height;
   display: flex;
   align-items: center;

data/lib/assets/stylesheets/tao/form/layouts/default.scss CHANGED

@@ -33,10 +33,6 @@
       align-content: flex-start;
       margin: 0 0 0.75rem 0;
-      &.hidden {
-        display: none;
-      }
       &:last-child {
         margin-bottom: 0;
       }
@@ -80,6 +76,10 @@
           color: $text-color;
         }
+        .input-field {
+          font-size: $form-field-font-size;
+        }
         & > .bottom-hint {
           display: block;
           color: $lighter-grey-color;

data/lib/assets/stylesheets/tao/form/mobile/fields/date_range_picker.scss ADDED

@@ -0,0 +1,18 @@
+@import 'tao/form/mobile/globals';
+.tao-date-range-picker {
+  display: inline-block;
+  .start-date-picker.tao-moment-picker,
+  .end-date-picker.tao-moment-picker {
+    display: block;
+  }
+  .to {
+    display: block;
+    font-size: 0.875rem;
+    color: $lightest-grey-color;
+    padding: 0 0.75rem 0 0;
+    text-align: right;
+  }
+}

data/lib/assets/stylesheets/tao/form/mobile/fields/datetime_picker.scss CHANGED

@@ -1,17 +1,17 @@
 @import 'tao/form/mobile/globals';
-tao-datetime-picker {
+.tao-datetime-picker {
   display: inline-block;
   & > input[type='datetime-local'] {
     display: none;
   }
-  tao-date-picker.moment-picker {
+  .tao-date-picker.tao-moment-picker {
     display: block;
   }
-  tao-time-picker.moment-picker {
+  .tao-time-picker.tao-moment-picker {
     display: block;
   }

data/lib/assets/stylesheets/tao/form/mobile/fields/moment_picker/index.scss CHANGED

@@ -3,7 +3,7 @@
 @import 'tao/form/mobile/globals';
-.moment-picker {
+.tao-moment-picker {
   display: inline-block;
   position: relative;
 }

data/lib/assets/stylesheets/tao/form/mobile/fields/moment_picker/result.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/mobile/globals';
 @import 'tao/form/shared/fields/moment_picker/result';
-tao-moment-picker-result {
+.tao-moment-picker-result {
   .icon-wrapper {
     display: flex;
     align-items: center;

data/lib/assets/stylesheets/tao/form/mobile/fields/moment_picker/segment_list.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/mobile/globals';
 @import 'tao/form/shared/fields/moment_picker/segment_list';
-tao-moment-picker-segment-list {
+.tao-moment-picker-segment-list {
   display: block;
   .link-clear {
@@ -35,7 +35,7 @@ tao-moment-picker-segment-list {
   }
   .segments {
-    .segment {
+    .tao-moment-picker-segment {
       overflow: auto;
       -webkit-overflow-scrolling: touch;
       border-color: $light-line-color;

data/lib/assets/stylesheets/tao/form/mobile/fields/moment_picker/segments/date_segment.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/mobile/globals';
 @import 'tao/form/shared/fields/moment_picker/segments/date_segment';
-tao-moment-picker-date-segment {
+.tao-moment-picker-date-segment {
   .calendar {
     .days {
       .day {

data/lib/assets/stylesheets/tao/form/mobile/fields/moment_picker/segments/hour_segment.scss CHANGED

@@ -1,7 +1,7 @@
 @import 'tao/form/mobile/globals';
 @import 'tao/form/shared/fields/moment_picker/segments/hour_segment';
-tao-moment-picker-hour-segment {
+.tao-moment-picker-hour-segment {
   .hours {
     margin: 1rem 0 0 0;