tungsten 0.1.19 → 0.1.20

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 120a1040b1300094e1c96b54d0517ff337d5cdd3
-  data.tar.gz: 5a0e1faa1bec9ed897d66863bfd5c298818e554d
+  metadata.gz: 3ee12661632e5e680b97d10b8e53ac76a28b09ff
+  data.tar.gz: 9242ee825cd2fb7f3adcaf983e8376ce45bfea70
 SHA512:
-  metadata.gz: 74c18f297122cc3a3b7e45a559d9b5cb74f03e75777885a57c74ff2d4ef68014d2acbd3ab171993e713a71d1a2c1e2a6cf77737651def11216bc63d2f5f144ba
-  data.tar.gz: 25f3e7b80d374da31905cd96ea73ddb4a05548b91db9a414137f02150c98601d3a942feaa88910b3e7fa1552aa89540b7015debe6e4c3b284f6d7cc55289d5f0
+  metadata.gz: 7aee84b8ac48e4fd18b7becb907ab612e177172971f8781c7562019dc7441478262f1bffef14c27c0f5fa1f97b60384817ffafceebb69348bd8e3068f2ba0304
+  data.tar.gz: d5ad13b8dc2744fe0aa04d35703deeda232defe933a23d110d220a27be2823ff8621d901149c87ea998eb3af972d2a48ad41a0d50000aae0a5b3dcf8def2e8ae

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

@@ -2,7 +2,7 @@
 
   function embed() {
     if (!document.querySelector('#esvg-svg-icons')) {
-      document.querySelector('body').insertAdjacentHTML('afterbegin', '<svg id="esvg-svg-icons" data-symbol-class="svg-symbol" data-prefix="svg" version="1.1" style="height:0;position:absolute"><symbol id="svg-deployment" data-name="deployment" viewBox="0 0 176 201" width="176" height="201" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M88 5.985l82.272 47.5v95L88 195.985l-82.272-47.5v-95L88 5.985z"/></symbol></svg>')
+      document.querySelector('body').insertAdjacentHTML('afterbegin', '<svg id="esvg-svg-icons" data-symbol-class="svg-symbol" data-prefix="svg" version="1.1" style="height:0;position:absolute"><symbol id="svg-deployment" data-name="deployment" viewBox="0 0 176 201" width="176" height="201" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M88 5.985l82.272 47.5v95L88 195.985l-82.272-47.5v-95L88 5.985z"/></symbol><symbol id="svg-copy" data-name="copy" viewBox="0 0 294 294" width="294" height="294" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M0 136.96c0-28.877 23.444-52.32 52.32-52.32v89.854c0 37.036 30.07 67.105 67.105 67.105h89.854c0 28.875-23.445 52.32-52.32 52.32H52.32C23.444 293.92 0 270.474 0 241.6V136.96z" fill-opacity=".529"/><path d="M136.96 0c-28.877 0-52.32 23.444-52.32 52.32v104.64c0 28.875 23.443 52.32 52.32 52.32H241.6c28.875 0 52.32-23.445 52.32-52.32V52.32C293.92 23.444 270.474 0 241.6 0H136.96z"/></symbol><symbol id="svg-logo" data-name="logo" viewBox="0 0 256 256" width="256" height="256" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M152.89 179.214l-49.78 28.74-53.332-30.792L0 148.42V86.838l53.333-30.792 49.777 28.74 49.777-28.74 53.333 30.792 49.78 28.74v61.584l-53.333 30.792-49.778-28.74zm3.137-6.374v-49.052l42.975 24.635.01 49.27-42.985-24.853zm-99.14.217v-49.27l43.126 24.77.01 49.566-43.135-25.066zM7.11 144.317v-49.27l42.668 24.635.002 49.27-42.67-24.635zm96-51.32l42.67 24.634-42.67 24.636-42.67-24.634 42.67-24.634zm99.557 0l42.668 24.634-42.668 24.636-42.67-24.634 42.67-24.634zM53.333 64.257l42.67 24.633-42.67 24.635-42.67-24.634 42.67-24.633zm99.554 0l42.67 24.633-42.67 24.635-42.67-24.634 42.67-24.633z"/><path d="M6.82 144.547l.023-50 93.295 53.877.04 50.06L6.82 144.547zm148.916 28.477l.14-49.667 43.428 24.894-.045 50.235-43.525-25.46z" fill-opacity=".349"/></symbol></svg>')
     }
   }
 

data/app/assets/javascripts/tungsten/enhancements/text-helpers.js

@@ -0,0 +1,31 @@
+var toolbox = require( 'compose-toolbox' )
+
+function autoSizeTextarea( textarea ) {
+  var parent = textarea.parentElement
+
+  if ( textarea.value == '' ) return
+  if ( parent.classList.contains('input-wrapper') ) {
+
+    parent.style.height = textarea.style.height
+    var offset = textarea.offsetHeight - textarea.clientHeight
+    textarea.style.height = 'auto'
+    var newHeight = ( textarea.scrollHeight + offset )
+    var maxHeight = window.innerHeight * .95
+
+    if ( newHeight < maxHeight )
+      textarea.style.height = newHeight + 'px'
+    else
+      textarea.style.height = maxHeight + 'px'
+
+    parent.style.height = 'auto'
+  }
+}
+
+toolbox.event.change(function(){
+  var textareas = document.querySelectorAll('textarea')
+  toolbox.event.delay( function(){ Array.prototype.forEach.call(textareas, autoSizeTextarea) } )
+})
+
+toolbox.event.on(document, 'keyup toggler:show', 'textarea', function(event){
+  autoSizeTextarea(event.currentTarget)
+})

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

@@ -13,6 +13,7 @@ require( 'compose-slider' )          // Our slider (range input) component
 require( './_icons' )                // Import svg icons (from Esvg)
 require( './_form-helpers' )
 require( './enhancements/flash-messages' )
+require( './enhancements/text-helpers' )
 
 // Public API object
 window.Tungsten = module.exports = toolbox.merge( {

data/app/assets/stylesheets/tungsten/components/_toggle-nav.scss

@@ -3,7 +3,7 @@
   justify-content: center;
   position: relative;
   z-index: 1;
-  @include block-margin;
+  margin-bottom: -35px;
 
   &-label {
     box-shadow: $input-shadow;
@@ -38,6 +38,3 @@
     }
   }
 }
-.toggle-nav + .card-well {
-  margin-top: -35px;
-}

data/app/assets/stylesheets/tungsten/components/_tooltip.scss

@@ -19,7 +19,7 @@
     background-color: rgba(#000, 0.8);
     color: #fff;
     white-space: nowrap;
-    font-size: 11px;
+    font-size: 10px;
     line-height: 1.5em;
     padding: 5px 8px;
     border-radius: $radius;
@@ -47,6 +47,4 @@
       @include triangle(up, rgba($green-02, .8), 6px);
     }
   }
-
 }
-

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

@@ -35,7 +35,7 @@
 
 @keyframes half-spin {
   0% { 
-    transform: rotate(-180deg); 
+    transform: rotate(-180deg);
   }
   100% {
     transform: rotate(0deg); 

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

@@ -80,7 +80,7 @@ $card-padding: 20px;
 $vertical-margin: 20px;
 
 // Inner content padding
-$content-padding: 40px;
+$content-padding: 30px;
 
 // Main header height
 $header-height: 84px;

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

@@ -238,6 +238,14 @@ form [class*='columns'] {
   justify-items: flex-end;
 }
 
+.push-right {
+  margin-left: auto;
+}
+
+.push-left {
+  margin-right: auto;
+}
+
 /* ===================================== *
  * Breakpoints
  * ------------------------------------- */

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

@@ -15,6 +15,10 @@
  * Document
  * ------------------------------------- */
 
+html {
+  background: $gray-02;
+}
+
 body {
   display: flex;
   min-height: 100vh;
@@ -45,6 +49,47 @@ textarea {
  * Application
  * ------------------------------------- */
 
+.application-banner {
+  background: $gray-10;
+  color: $white;
+  display: flex;
+  align-items: center;
+  padding: $content-padding * .5 $content-padding;
+
+  .svg-deployment {
+    margin-right: 20px;
+  }
+
+  @each $name, $colors in $gradients {
+    $start: nth($colors, 1);
+    $end:   nth($colors, 2);
+
+    &.#{$name}-gradient-bg {
+      background: linear-gradient(135deg, #{$start}, #{$end}) left top/100% 100% no-repeat;
+    }
+  }
+
+  a {
+    transition: $duration;
+    text-decoration: none;
+    padding: .3em .6em;
+    border-radius: $radius;
+
+    &,
+    &:visited {
+      color: inherit;
+      background: transparent;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: inherit;
+      background: rgba($white, .2);
+    }
+  }
+}
+
 .application-content {
   padding: $content-padding;
 }

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

@@ -17,7 +17,7 @@
 
   &-header {
     justify-content: space-between;
-    @include block-margin;
+    // @include block-margin;
   }
 
   &-heading {

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

@@ -78,7 +78,6 @@ textarea,
     border: none;
     padding: 0;
   }
-
 }
 
 .input-wrapper {
@@ -102,9 +101,10 @@ select {
 
 // Confine resizing of textareas
 textarea {
+  line-height: 1.4em;
   display: block;
   resize: vertical;
-  min-height: 75px;
+  max-height: 50vh;
 }
 
 ::placeholder {

data/app/assets/stylesheets/tungsten/form/_copy-input.scss

@@ -0,0 +1,31 @@
+.copy-input {
+  position: relative;
+
+  .copy-button  {
+    right: 1px;
+    top: 10px;
+    z-index: 2;
+    padding: 4px 10px;
+
+    &, &:hover, &:active, &:focus {
+      transform: translate3d(0,0,0);
+      position: absolute;
+      border: none;
+      box-shadow: none;
+      background: linear-gradient( to right, rgba(#fff, .4), #fff 15%)
+    }
+  }
+}
+
+.copy-button {
+  svg {
+    opacity: .5;
+    transition: opacity ease .2s;
+  }
+  &:hover, &:focus {
+    svg { opacity: 1; }
+  }
+  &.copied {
+    svg { fill: $green-02; }
+  }
+}

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

@@ -4,3 +4,4 @@
 @import 'check-switch';
 @import 'validation';
 @import 'slider';
+@import 'copy-input';

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

@@ -21,7 +21,7 @@
 
     // Default active color
     label:not(.valid):not(.invalid) {
-      textarea, input {
+      input {
         &:focus + span,
         &:active + span {
           color: $gray-08;
@@ -30,7 +30,7 @@
     }
     
     // Inputs
-    textarea, input {
+    input {
       z-index: 1;
       margin: 0;
       font-size: inherit;
@@ -50,7 +50,7 @@
     }
 
     &.valid, &.invalid {
-      textarea, input {
+      input {
         + .placeholder-label-text {
           color: inherit;
         }
@@ -60,10 +60,6 @@
     input {
       line-height: inherit;
     }
-
-    textarea {
-      padding-top: ($padding-y / 2) + 4;
-    }
   }
 
   // Faux-placeholder labels

data/app/assets/svgs/tungsten/copy.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 294 294" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M0,136.959c0,-28.876 23.444,-52.319 52.32,-52.319c0,0 0,89.854 0,89.854c0,37.036 30.069,67.105 67.105,67.105l89.854,0c0,28.876 -23.444,52.32 -52.32,52.32l-104.639,0c-28.876,0 -52.32,-23.444 -52.32,-52.32l0,-104.64Z" style="fill-opacity:0.529412;"/><path d="M136.959,0c-28.876,0 -52.319,23.444 -52.319,52.32l0,104.639c0,28.876 23.443,52.32 52.319,52.32l104.64,0c28.876,0 52.32,-23.444 52.32,-52.32l0,-104.639c0,-28.876 -23.444,-52.32 -52.32,-52.32l-104.64,0Z"/></svg>

data/app/assets/svgs/tungsten/logo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M152.89 179.214l-49.78 28.74-53.332-30.792L0 148.42V86.838l53.333-30.792 49.777 28.74 49.777-28.74 53.333 30.792 49.78 28.74v61.584l-53.333 30.792-49.778-28.74zm3.137-6.374v-49.052l42.975 24.635.01 49.27-42.985-24.853zm-99.14.217v-49.27l43.126 24.77.01 49.566-43.135-25.066zM7.11 144.317v-49.27l42.668 24.635.002 49.27-42.67-24.635zm96-51.32l42.67 24.634-42.67 24.635-42.67-24.634 42.67-24.634zm99.557 0l42.668 24.634-42.668 24.635-42.67-24.634 42.67-24.634zM53.333 64.256l42.67 24.634-42.67 24.635-42.67-24.634 42.67-24.634zm99.554 0l42.67 24.634-42.67 24.635-42.67-24.634 42.67-24.634z"/><path d="M6.82 144.547l.023-50 93.295 53.877.04 50.06L6.82 144.547zM155.736 173.024l.14-49.667 43.428 24.894-.045 50.234-43.524-25.46z" fill-opacity=".349"/></svg>

data/app/helpers/tungsten/button_helper.rb

@@ -63,14 +63,26 @@ module Tungsten
       button(text, options, &block)
     end
 
-    def copy_button(text, target, options={}, &block)
+    def copy_button(target, text=nil, options={}, &block)
+
+      if text.is_a? Hash
+        options = text
+        text = nil
+      end
+
       options[:aria_label] ||= "Copy to clipboard"
-      options[:class] = "#{options[:class]} has-tooltip".strip
+      options[:class] = "#{options[:class]} copy-button has-tooltip".strip
 
       options[:data] ||= {}
       options[:data][:copy_target] = target
 
-      button(text, options, &block)
+      if text.nil?
+        button( text, options ) do
+          use_svg 'copy', width: '20px'
+        end
+      else
+        button(text, options, &block)
+      end
     end
 
     def button_classes(options)

data/app/helpers/tungsten/deployments_helper.rb

@@ -6,14 +6,14 @@ module Tungsten
       if name.nil?
         deployments
       else
-        deployment = deployments.find { |d| 
+        deployment = deployments.find { |d|
           d[:name] =~ /#{name}/i || d[:slug] == name
         }
 
         if deployment.nil? && !Rails.env.production?
           raise %Q{No deployment type "#{name}" exists.}
         end
-          
+
         deployment
       end
     end
@@ -44,7 +44,8 @@ module Tungsten
       options[:use][:class] = "deployment-icon-hex #{options[:use][:class]}".strip
 
       options[:color]   ||= "#fff"
-      options[:fill]    ||= "url(##{data[:name].downcase}-gradient-bg)"
+      options[:fill]    ||= "none"
+      # options[:fill]    ||= "url(##{data[:name].downcase}-gradient-bg)"
       options[:content] ||= deployment_text(data[:short_name], options.delete(:text) || {})
 
       deployment_graphic.use(options).html_safe

data/app/helpers/tungsten/form_helper.rb

@@ -1,5 +1,7 @@
 module Tungsten
   module FormHelper
+    include Tungsten::ButtonHelper
+
     INPUT_OPTIONS = {
       email: {
         type: "email",
@@ -364,6 +366,11 @@ module Tungsten
         value = nil
       end
 
+      if options.delete(:copy)
+        copy_class = "copy-input-#{SecureRandom.hex(8)}"
+        copy = copy_button ".#{copy_class}", icon: 'copy'
+      end
+
       options = (INPUT_OPTIONS[type]||{}).deep_merge options
       options[:type] ||= type
 
@@ -371,7 +378,7 @@ module Tungsten
         class: "#{label_class(options[:type])} #{options.delete(:class)}"
       }
 
-      if placeholder = options[:placeholder]
+      if options[:type] != :textarea && placeholder = options[:placeholder]
         placeholder = content_tag(:span, class: 'placeholder-label-text') { placeholder }
         label_options[:class] += ' placeholder-label'
       end
@@ -380,9 +387,10 @@ module Tungsten
         label_text = content_tag(:span, class: 'label-text') { label_text }
       end
 
+      options[:class] = "#{options[:class]} #{copy_class}".strip if copy_class
       tag = base_tag(name, value, options, type, &block)
 
-      content_tag(:label, label_options) {
+      label = content_tag(:label, label_options) {
         concat label_text
         if type == :select
           concat tag
@@ -395,6 +403,15 @@ module Tungsten
         end
       }
 
+      if copy
+        content_tag(:div, class: 'copy-input') {
+          concat label
+          concat copy
+        }
+      else
+        label
+      end
+
     end
 
     private

data/app/views/layouts/tungsten/default.html.slim

@@ -8,7 +8,10 @@ html
     = csrf_meta_tags
 
     / Page Meta
-    title = Site.title
+    - if @page_title
+      title = "#{@page_title} - #{Site.title}"
+    - else
+      title = Site.title
     / Referrer
     meta name="referrer" content="origin"
 

data/lib/tungsten/version.rb

@@ -1,3 +1,3 @@
 module Tungsten
-  VERSION = "0.1.19"
+  VERSION = "0.1.20"
 end

data/public/{code-0.1.19.js → code-0.1.20.js}

@@ -89,4 +89,4 @@ function move(o){document.documentElement.scrollTop=o,document.body.parentNode.s
 });
 
 
-//# sourceMappingURL=/assets/tungsten/code-0.1.19.map.json
+//# sourceMappingURL=/assets/tungsten/code-0.1.20.map.json