tungsten 0.1.57 → 0.1.58

data/app/assets/stylesheets/tungsten/form/_label-placeholder.scss

@@ -10,7 +10,7 @@
   // Input labels
   .placeholder-label {
 
-    padding: 0;
+    //padding: 0;
     font-size: $font-size;
 
     // Hide input placeholder text
@@ -41,7 +41,7 @@
         padding-top: $padding-y - ($distance-y / 2);
         padding-bottom: ($distance-y / 2);
 
-        + .placeholder-label-text, {
+        ~ .placeholder-label-text, {
           z-index: 2;
           transform: translate3d($distance-x, -($distance-y), 0) scale($scale);
           color: $gray-08;
@@ -51,7 +51,7 @@
 
     &.valid, &.invalid {
       input {
-        + .placeholder-label-text {
+        ~ .placeholder-label-text {
           color: inherit;
         }
       }

data/app/assets/stylesheets/tungsten/form/_unit-select.scss

@@ -0,0 +1,40 @@
+.unit-select {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  
+  &:after {
+    content: "";
+    border: 1px solid $gray-07;
+    border-left: none;
+    border-top: none;
+    width: 8px;
+    display: inline-block;
+    height: 8px;
+    transform: rotate(45deg);
+    position: absolute;
+    right: 10px;
+    top: 1em;
+    pointer-events: none;
+  }
+
+  &:hover:after {
+    border-color: $blue-01;
+  }
+
+  select {
+    transition-property: color;
+    color: $gray-07;
+    box-shadow: none;
+    width: auto;
+    background: transparent;
+    padding: 0 1.8em 0 .8em;
+    border-left: 1px solid rgba($gray-11, .2);
+    border-radius: 0;
+    min-height: 41px;
+    @include active {
+      box-shadow: none;
+      color: $blue-01;
+    }
+  }
+}

data/app/assets/stylesheets/tungsten/form/_validation.scss

@@ -2,7 +2,7 @@
 label.valid:not(.remotely-invalid) {
   color: $green-01;
 
-  input, select, textarea {
+  input, select:not([tabindex="-1"]), textarea {
     -webkit-text-fill-color: currentColor;
     box-shadow: input-shadow( $green-01 );
 
@@ -16,7 +16,7 @@ label.invalid,
 label.remotely-invalid:not(.valid) {
   color: $red-01;
 
-  input, select, textarea {
+  input, select:not([tabindex="-1"]), textarea {
     -webkit-text-fill-color: currentColor;
      box-shadow: input-shadow( $red-01 );
 

data/app/helpers/tungsten/button_helper.rb

@@ -24,6 +24,10 @@ module Tungsten
         options[:dialog][:confirm] = options.delete(:confirm)
       end
 
+      if options[:confirm_if]
+        options[:dialog][:if] = options.delete(:confirm_if)
+      end
+
       (options.delete(:dialog) || {}).each do |key, val|
         if key.to_s == 'confirm'
           options[:data]["dialog-title"] ||= val
@@ -49,7 +53,8 @@ module Tungsten
         type: options.delete(:type) || 'button',
         target: options.delete(:target),
         href: options.delete(:href),
-        'aria-label'=> options.delete(:aria_label)
+        'aria-label'=> options.delete(:aria_label),
+        tabindex: options.delete(:tabindex)
       }
 
       button = content_tag tag_name, button_options do

data/app/helpers/tungsten/content_helper.rb

@@ -98,6 +98,10 @@ module Tungsten
 
     end
 
+    def iso_date_string(date)
+      parse_date(date).sub('T', ' ').sub('+00:00', ' UTC')
+    end
+
     def timeago_tag(date, options={})
       date = DateTime.parse(date.to_s).iso8601
 

data/app/helpers/tungsten/form_helper.rb

@@ -22,6 +22,11 @@ module Tungsten
         type: "text"
       },
 
+      number: {
+        type: "number",
+        step: "any"
+      },
+
       tel: {
         type: "tel",
         placeholder: "Phone number"
@@ -117,97 +122,6 @@ module Tungsten
       end
     end
 
-    def slider_input_tag(name, options={})
-      options = options.stringify_keys
-      classnames = options.delete('class') || ''
-
-      if label = options.delete('label')
-        label = content_tag(:span, class: 'label-text') { label }
-      end
-
-      data = options['data'] || {}
-      data['input'] ||= name
-
-      if options['position_label']
-        data['position_label'] = options['position_label']
-      end
-      
-      # Set values (and max based on values size)
-      if values = options['values']
-        data['values'] = values.join(',')
-        options['max'] ||= values.size - 1
-      end
-
-      # Support legacy option
-      options['labels'] ||= options['label']
-
-      if labels = options['labels']
-        if labels.is_a?(Array)
-          data['label'] = labels.join(';')
-          options['max'] ||= labels.size - 1
-        elsif labels.is_a?(Hash)
-          labels.each do |label, value|
-            data['label-'+dasherize(label.to_s.downcase)] = value.join(';')
-            options['max'] ||= value.size - 1
-          end
-        end
-      end
-
-      if labels == false
-        data['label'] = 'false'
-      end
-
-      if labels = options['external_labels']
-        if labels.is_a?(Hash)
-          labels.each do |label, value|
-            data['external-label-'+dasherize(label.to_s.downcase)] = value.join(';')
-          end
-        end
-      end
-
-      if before = options['before']
-        if before.is_a?(String)
-          data['before-label'] = before
-        else
-          before.each do |key, value|
-            data["before-label-#{key}"] = value
-          end
-        end
-      end
-
-      if mark = options['mark']
-        data['mark'] = mark.join(',')
-      end
-
-      if after = options['after']
-        if after.is_a?(String)
-          data['after-label'] = after
-        else
-          after.each do |key, value|
-            data["after-label-#{key}"] = value
-          end
-        end
-      end
-
-      if line_labels = options['line_labels']
-        data['line_labels'] = []
-        line_labels.each do |k, v|
-          data['line_labels'] << "#{k}:#{v}"
-        end
-        data['line_labels'] = data['line_labels'].join(';')
-      end
-
-      options['value'] ||= options['min'] || 0
-
-      html_options = {"id"=> options['id'], "class" => classnames, "type" => "range", "min" => options['min'], "max" => options['max'], "value" => options['value'] }.update('data' => data)
-
-      content_tag(:label, class: 'range-label') {
-        concat label if label
-        concat tag :input, html_options
-      }
-    end
-    alias :range_input_tag :slider_input_tag
-
     # Country select
     def select_country_tag(name, options = {}, country_options = {})
       country_options.reverse_merge! INPUT_OPTIONS[:select_country][:country_options]
@@ -279,6 +193,9 @@ module Tungsten
       end
 
       options[:type] = :radio
+      (options[:class] ||= '') << ' input'
+      options[:data] ||= {}
+      options[:data][:show] = options.delete(:show)
 
       tick_wrapper( name, options ) do
         radio_button_tag(name, value, checked, options)
@@ -286,6 +203,10 @@ module Tungsten
 
     end
 
+    def slider_input_tag(name, options={})
+      input_tag(:range, name, options)
+    end
+
     def checkbox_input_tag(name, checked = false, options = {})
       value = true
 
@@ -297,7 +218,7 @@ module Tungsten
       options[:type] = :checkbox
 
       tick_wrapper( name, options ) do
-        options.delete(:class)
+        options[:class] = 'input'
         concat tag :input, name: name, type: :hidden, value: false
         concat check_box_tag(name, value, checked, options)
       end
@@ -345,6 +266,8 @@ module Tungsten
 
     def base_tag(name, value, options, type, &block)
       case type
+      when :range
+        range_input_tag(name, options)
       when :select
         value = value.html_safe if value
         select_tag(name, value, options)
@@ -367,23 +290,31 @@ module Tungsten
         value = nil
       end
 
+      options[:autocomplete] ||= 'off'
+
       options[:data] ||= {}
       options[:data][:message] ||= options.delete(:message)
+      options[:data]['unique-id'] = "#{SecureRandom.hex(8)}"
+      options[:data][:default] ||= options.delete(:default)
 
       if errors = options.delete(:errors)
         options[:data]['invalid-value'] = value
       end
 
+      if unit = options.delete(:unit)
+        options[:data][:unit] = unit
+      end
+
       if options.delete(:copy)
-        copy_class = "copy-input-#{SecureRandom.hex(8)}"
-        copy = copy_button ".#{copy_class}"
+        copy = copy_button("[data-unique-id='#{options[:data]['unique-id']}']", tabindex: '-1')
       end
 
       options = (INPUT_OPTIONS[type]||{}).deep_merge options
       options[:type] ||= type
 
-      label_options = { 
-        class: "#{label_class(options[:type])} #{options.delete(:class)} #{'remotely-invalid' if errors}"
+      label_options = {
+        class: "#{label_class(options[:type])} #{options.delete(:class)} #{'remotely-invalid' if errors} #{'copy-input' if copy}",
+        data: { 'input-type' => type }
       }
 
       if options[:type] != :textarea && placeholder = options[:placeholder]
@@ -391,13 +322,37 @@ module Tungsten
         label_options[:class] += ' placeholder-label'
       end
 
-      if label_text = options.delete(:label)
-        label_text = content_tag(:span, class: 'label-text') { label_text }
-        label_options[:class] += ' standard-label'
+      if label_description = options.delete(:description)
+        label_description = content_tag(:span, class: 'label-description') { label_description }
       end
 
+      if label_text = options.delete(:label)
+        label_text = content_tag(:span, class: 'label-text') {
+          concat label_text
+          if options[:data][:default]
+            concat " "
+            concat restore_default(options[:data]['unique-id']) 
+          end
+        }
+        if self && label_description
+          label_options[:class] += ' description-label'
+        else
+          label_options[:class] += ' standard-label'
+        end
+      end
       
-      options[:class] = "#{options[:class]} #{copy_class}".strip if copy_class
+      if requires_restart = options.delete(:requires_restart)
+        label_options[:class] += ' requires-restart'
+        requires_restart = content_tag(:span, class: 'requires-restart-input-message') {
+          if requires_restart.is_a?(String)
+            concat requires_restart
+          else
+            concat "Changing this requires a database restart."
+          end
+        }
+      end
+
+      options[:class] = 'input'
 
       if options.delete(:shell_text)
         input_wrapper_options[:class] += ' shell-text'
@@ -407,6 +362,7 @@ module Tungsten
 
       label = content_tag(:label, label_options) {
         concat label_text
+        concat label_description
 
         if type == :select
           concat tag
@@ -415,6 +371,7 @@ module Tungsten
           concat content_tag(:span, input_wrapper_options) {
             concat tag
             concat placeholder
+            concat copy if copy
           }
         end
 
@@ -435,22 +392,20 @@ module Tungsten
           }.html_safe
 
         end
+        concat requires_restart if requires_restart
       }
 
-      if copy
-        input_wrapper_options[:class] += " copy-input"
-        content_tag(:span, input_wrapper_options) {
-          concat label
-          concat copy
-        }
-      else
-        label
-      end
-
+      label
     end
 
     private
 
+    def restore_default(selector)
+      content_tag(:a, href: "#", tabindex: '-1', class: "restore-default", data: { 'restore-default' => "[data-unique-id='#{selector}']" }) {
+        content_tag(:span, "aria-label" => "Restore default value", class: "has-tooltip" ) { "⎋" }
+      }
+    end
+
     def label_class( type )
       type = case type
       when :tel, :password, :number, :url, :email, :search
@@ -468,6 +423,8 @@ module Tungsten
 
       tag = capture(&block).html_safe
 
+      options.delete(:required)
+
       tick = content_tag(:span, class: 'tick') {''}
 
       classnames = ['label-text']
@@ -484,7 +441,7 @@ module Tungsten
       }
     end
 
-    def slider_input_tag(name, options={})
+    def range_input_tag(name, options={})
       options = options.stringify_keys
       classnames = options.delete('class') || ''
 
@@ -494,7 +451,7 @@ module Tungsten
       if options['position_label']
         data['position_label'] = options['position_label']
       end
-      
+
       # Set values (and max based on values size)
       if values = options['values']
         data['values'] = values.join(',')
@@ -563,6 +520,12 @@ module Tungsten
 
       options['value'] ||= options['min'] || 0
 
+
+      if data[:default] && options['values']
+        data[:default] = options['values'].find_index(data[:default]) || data[:default]
+      end
+
+
       html_options = {"class" => classnames, "type" => "range", "min" => options['min'], "max" => options['max'], "value" => options['value'] }.update('data' => data)
       tag :input, html_options
     end
@@ -571,6 +534,5 @@ module Tungsten
       input.gsub(/[\W,_]/, '-').gsub(/-{2,}/, '-')
     end
 
-    alias :range_input_tag :slider_input_tag
   end
 end

data/app/helpers/tungsten/section_helper.rb

@@ -27,7 +27,7 @@ module Tungsten
 
         if text
           text = content_tag( :a, text, href: "##{@id}", class: 'app-section-title-anchor' ) unless @id.nil?
-          text = content_tag( :h2, text, class: 'app-section-heading' )
+          text = heading(text)
         end
 
         tag = content_tag( :div, options ) {
@@ -36,6 +36,12 @@ module Tungsten
         }
       end
 
+      def heading( text, options={})
+        options[:class] ||= ''
+        options[:class] << ' app-section-heading'
+        content_tag( :h2, text, options )
+      end
+
       def content( options={}, &block )
         content_tag( :div, class: 'app-section-content', &block )
       end