tungsten 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 06c81130859fa7bd4a0673370e233d1b8fd8ad45
-  data.tar.gz: a9c421d5a3b3fddbd49d266ab96e36e2ea311bea
+  metadata.gz: 485aa16cdbb3ff7a8880fab83541fb5aee360533
+  data.tar.gz: c2dc7ff628762fe63152282f12931069381149a1
 SHA512:
-  metadata.gz: 12014325939bb67a71482ffb2d5f1d6ebf55b1dbdd786a4daaa543aa4f36f42e4c56f85130e9fe592a99e491025bd912ecdb60c7f65e6ee565670e39b2a5b870
-  data.tar.gz: 477692ad0379c819068b6302d54392f289ca497c9747eef41c1623993054adb5563f640c5caf9d140772a3cbc0653f5813b6f9a0289b0f50e52474b7c0381a5f
+  metadata.gz: 12a0b669adc672af3c518ec67d32a796bf830444b62e49c45c5224526475f71b1410ddcda38eb45614754ded8212f796a9aac6f8db0ce8f9539a39fa21ef4370
+  data.tar.gz: 9155fc7a0fde8da462885bfe39e997dd0560645015744c628ea4f6e6a04dd938ad39729c4e1b77d90c4e6108c6f06fa742094eba23d03f84fc0d6ed0e3addb6e

data/app/assets/javascripts/tungsten/tungsten.js

@@ -1,20 +1,18 @@
-var toggler     = require('compose-toggler')
+var toggler     = require( 'compose-toggler' )
 var formUp      = require( 'compose-form-up' )
 var toolbox     = require( 'compose-toolbox' )
 var ajax        = require( 'superagent' )
 var event       = toolbox.event
 
-event.scroll.disablePointer()      // disable pointer events on scroll for performance (to avoid extra repaints)
+event.scroll.disablePointer()        // disable pointer events on scroll for performance (to avoid extra repaints)
 
-require('compose-slider')          // Our slider (range input) component
-require('./_icons')                // Import svg icons (from Esvg)
+require( 'compose-slider' )          // Our slider (range input) component
+require( './_icons' )                // Import svg icons (from Esvg)
 require( './_form_helpers' )
 
 // Public API object
-var tungsten = toolbox.merge( {
+window.Tungsten = module.exports = toolbox.merge( {
   ajax        : ajax,
   form        : formUp,
   toggler     : toggler
 }, toolbox )
-
-window.tungsten = module.exports = tungsten

data/app/assets/stylesheets/tungsten/core/_cards.scss

@@ -36,6 +36,10 @@
     button {
       margin-left: 10px;
     }
+
+    a {
+      @include inline-link($gray-08, $gray-09);
+    }
   }
 
   #{$block-elements} {
@@ -65,7 +69,16 @@
     font-size: 16px;
   }
 
-  &-footer {
+  header, footer {
+    display: flex;
+    align-items: baseline;
+    .card-actions {
+      margin-top: 0;
+      margin-left: auto;
+    }
+  }
+
+  footer {
     display: flex;
     align-items: baseline;
     @include collapse-top;
@@ -77,14 +90,9 @@
     background-clip: padding-box;
     border-top: $card-padding solid transparent;
     margin: auto $card-padding * -1 $card-padding * -1 $card-padding * -1;
-
-    .card-actions {
-      margin-top: 0;
-      margin-left: auto;
-    }
   }
 }
 
 table.card {
   display: table;
-}
+}

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

@@ -21,8 +21,8 @@ label { *, *:before, *:after {
   @return 0 0 0 $size $color inset, $empty-shadow;
 }
 
-@function input-focus-shadow($color: $gray-08) {
-  @return 0 0 0 1px $color inset, $input-weight-shadow
+@function input-focus-shadow($color: $gray-08, $size: 1px) {
+  @return 0 0 0 $size $color inset, $input-weight-shadow
 }
 
 $focus-shadow: input-focus-shadow();
@@ -225,11 +225,17 @@ label {
   flex: 1 0 auto;
   margin: 18px 0;
 
-  &.label-text {
+  .label-text {
     transition-property: box-shadow, color;
+    padding-bottom: .2em;
   }
+
   select, input, textarea {
     margin: 0px;
   }
 }
 
+form.button_to {
+  width: auto;
+  display: inline-flex;
+}

data/app/assets/stylesheets/tungsten/form/_check-switch.scss

@@ -2,6 +2,7 @@
   $width: 70px;
   $height: 24px;
   $tick-width: $width/2 - 2;
+  cursor: pointer;
   flex-direction: row; align-items: center;
 
   .label-text {

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

@@ -2,3 +2,4 @@
 @import 'label-placeholder';
 @import 'check-radio';
 @import 'check-switch';
+@import 'validation';

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

@@ -1,21 +1,18 @@
 @mixin label-placeholder {
   // Scoped variables
-  $font-size:  16px;
-  $padding-x:  12px;
-  $padding-y:   9px;
-  $distance-y: -23px;
+  $padding-x:  .8em;
+  $padding-y:  2em;
+  $distance-y: .6em;
+  $font-size: 1em;
   $distance-x: 0;
-  $scale:      .875;
-  $height:     50px;
-  $duration: .2s;
+  $scale:      .8;
 
   // Input labels
   label.placeholder-label {
 
-    padding-top: 0;
-    line-height: 2em;
-    background: $white;
+    padding: 0;
     font-size: $font-size;
+    background: $white;
 
     // Nested text-based inputs
     > input,
@@ -45,14 +42,18 @@
       margin: 0;
       font-size: inherit;
       background: transparent;
-      padding: $padding-y $padding-x;
+      padding: ($padding-y / 2) $padding-x;
 
       // Move labels out of the way on focus and empty
-      &:focus + .placeholder-label-text, 
-      &:not(.empty) + .placeholder-label-text, {
-        z-index: 2;
-        transform: translate3d($distance-x, $distance-y, 0) scale($scale);
-        color: darken($gray-08, 10);
+      &:focus, &:not(.empty) {
+        padding-top: $padding-y - ($distance-y / 1.5);
+        padding-bottom: ($distance-y / 1.5);
+
+        + .placeholder-label-text, {
+          z-index: 2;
+          transform: translate3d($distance-x, -($distance-y), 0) scale($scale);
+          color: $gray-08;
+        }
       }
     }
 
@@ -67,8 +68,9 @@
     input {
       line-height: inherit;
     }
+
     textarea {
-      padding-top: $padding-y + 4;
+      padding-top: ($padding-y / 2) + 4;
     }
   }
 
@@ -76,9 +78,8 @@
   .placeholder-label-text {
     pointer-events: none;
     font-size: inherit;
-    line-height: 1.2em;
     position: absolute;
-    top: $padding-y + 5px;
+    top: ($padding-y / 2);
     left: $padding-x;
     padding: 1px 0 0 1px;
     transform-origin: left top 0;
@@ -89,8 +90,10 @@
     color: $gray-06;
     transform: translate3d(0, 0, 0) scale(1);
     transition-property: color, transform;
-    background: $white;
-    box-shadow: -6px 0 $white, 6px 0 $white;
+
+    .label-text ~ & {
+      top: $font-size / 2 + $padding-y;
+    }
   }
 }
 

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

@@ -0,0 +1,72 @@
+// Apply validation styles to inputs & textareas
+label.valid {
+  color: $green-01;
+
+  input, select, textarea {
+    //color: currentColor;
+    -webkit-text-fill-color: currentColor;
+    box-shadow: input-shadow( $green-01 );
+
+    @include input-active {
+      box-shadow: input-focus-shadow( $green-01 )
+    }
+  }
+}
+
+label.invalid {
+  color: $red-01;
+
+  input, select, textarea {
+    //color: currentColor;
+    -webkit-text-fill-color: currentColor;
+    box-shadow: input-shadow( $red-01, 2px );
+
+    @include input-active {
+      box-shadow: input-focus-shadow( $red-01, 2px )
+    }
+  }
+}
+
+// Validation message animation declaration
+@keyframes expand-validation {
+  0% { max-height: 0em; }
+  100% { max-height: 2.5em; }
+}
+
+@keyframes scale-fade-in {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -6px) scale(.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(-50%, 6px) scale(1);
+  }
+}
+
+// Inline validation messages
+.validation-message {
+  overflow: hidden;
+  display: block;
+  z-index: 3;
+  animation: expand-validation $duration $timing;
+  position: relative;
+  top: -1px;
+
+  // Message bubble (also a hack to maintain proper word wrap)
+  .validation-message-text {
+    margin: 0;
+    display: block;
+    padding: .8em .8em;
+    border-radius: 0 0 $radius $radius;
+    color: $white;
+    font-size: 12px;
+    line-height: 1em;
+    background: $gray-08;
+
+    .invalid & {
+      background: $red-01;
+    }
+  }
+}

data/app/helpers/tungsten/button_helper.rb

@@ -0,0 +1,71 @@
+module Tungsten
+  module ButtonHelper
+    def button(text = nil, options = nil, &block)
+      options = text if block_given? && options.nil?
+      options ||= {}
+      tag_name = options[:href].present? ? :a : :button
+
+      options[:class] = button_classes(options)
+      options[:data] ||= {}
+      options[:data][:toggle] = options.delete(:toggle)
+      options[:data][:confirm] = options.delete(:confirm)
+      options[:data][:remote] = options[:remote]
+      options[:type] = 'submit' if options[:to]
+
+      button_options = {
+        role: 'button',
+        id: options.delete(:id),
+        data: options.delete(:data),
+        class: options.delete(:class),
+        disabled: options.delete(:disabled),
+        type: options.delete(:type) || 'button'
+      }
+
+      text = capture(&block).html_safe if block_given?
+
+      button = content_tag tag_name, button_options do
+        concat text
+      end
+      
+      if options[:to]
+        form = button_to 'input', options.delete(:to), options
+        form.sub(/<input type="submit".+?>/, button).html_safe
+      else
+        button
+      end
+    end
+
+    def primary_button(text = nil, options = nil, &block)
+      options = text if block_given? && options.nil?
+      options ||= {}
+      options[:class] = "#{options[:class]} primary".strip
+      options[:type] = 'submit'
+      button(text, options, &block)
+    end
+
+    def destructive_button(text = nil, options = nil, &block)
+      options = text if block_given? && options.nil?
+      options ||= {}
+      options[:class] = "#{options[:class]} destructive".strip
+      options[:method] = 'delete'
+      button(text, options, &block)
+    end
+
+    def destructive_primary_button(text = nil, options = nil, &block)
+      options = text if block_given? && options.nil?
+      options ||= {}
+      options[:class] = "#{options[:class]} primary destructive".strip
+      options[:type] = 'submit'
+      options[:method] = 'delete'
+      button(text, options, &block)
+    end
+
+    def button_classes(options)
+      classes = ['button']
+      classes << options[:class]
+      classes << options.delete(:size)
+      classes.flatten.compact.uniq.join(' ').strip
+    end
+
+  end
+end

data/app/helpers/tungsten/card_helper.rb

@@ -1,76 +1,43 @@
 module Tungsten
   module CardHelper
-    class Section < Tungsten::Helper
+    class Card < Tungsten::Helper
 
-      def initialize( title=nil )
+      def initialize( title = nil, options = {} )
+        @options = options
         @title = title
-        @children = { cards: [] }
-
-        heading( title ) if title
       end
 
       def display( body )
-        content_tag( :section, class: 'section' ) { 
-          concat info
-          concat content_tag(:div, class: 'section-content') { body }
-        }
-      end
-
-      def add_card(card)
-        @children[cards].push card
+        content_tag( :section, class: 'card' ) do
+          concat header( @title ) if @title
+          concat body
+        end
       end
 
-      def heading( text = nil, &block )
-        @children[:heading] = get_tag(:header, :h2, text, { class: 'section-heading' }, &block )
-        nil
+      def header( text = nil, options = {}, &block )
+        options[:class] = "card-header #{options[:class]}".strip
+        
+        content_tag( :header, options ) {
+          concat content_tag( :h2, text, class: 'card-heading' ) if text
+          concat capture(&block).html_safe if block_given?
+        }
       end
 
-      def description( text = nil, &block )
-        @children[:description] = get_tag(:div, :p, text, { class: 'section-description' }, &block )
-        nil
-      end
+      def footer( text = nil, options = {}, &block )
+        options[:class] = "card-footer #{options[:class]}".strip
 
-      def card( text = nil, &block )
-        content_tag(:section, class: 'section-card') {
-          concat title( text ) if text
+        content_tag( :footer, options ) {
+          concat content_tag( :p, text ) unless text.nil?
           concat capture(&block).html_safe
         }
       end
 
-      def title( text, options={} )
-        content_tag(:header, class: "card-title #{options[:class]}") { 
-          content_tag(:h2) { text }
-        }
-      end
-
-      def content(options={}, &block )
-        content_tag(:section, class: "card-section #{options[:class]}", &block)
-      end
+      def actions(  options={}, &block )
+        options[:class] = "card-actions #{options[:class]}".strip
 
-      def footer( options={}, &block )
-        content_tag(:footer, class: "card-footer #{options[:class]}", &block)
+        content_tag( :nav, options, &block )
       end
 
-      private
-
-      def get_tag( tag, wrapper, text, options, &block )
-        text = if block_given?
-          capture(&block).html_safe
-        else
-          content_tag(wrapper){ text }
-        end
-
-        content_tag(tag, options ) { text }
-      end
-
-      def info
-        if @children[:heading]
-          content_tag(:div, class: 'section-info') { 
-            concat @children[:heading]
-            concat @children[:description]
-          }
-        end
-      end
     end
   end
 end