tungsten 0.1.17 → 0.1.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 329f8efbe917b13ad6a9dd0905d7afb167be3d82
-  data.tar.gz: 7dc93e12d1a22c612d3ea79742ce99787b72f2f6
+  metadata.gz: 84a6187cac138f3e21e0ed94b80a54d8df98a2ef
+  data.tar.gz: 4012d13ac481790f836cb2e5f6f2af887c02703d
 SHA512:
-  metadata.gz: fb1c49ab62f7a3ea7a4f1f354b602b3791c62cdcccbab9d9a478d7dd7ce0f240be9bb7cc6f16a73b6af27d2cf21055dea93f4251725bf65aae54484abe05e6b1
-  data.tar.gz: ae18d0137dac13386f774285e05adb9cbcf2986af0e4263dddfd84ee3fb1515ef113c7840a5ac5d9b650870d695f210e4156327f6edfb7b41cee3a7b581af701
+  metadata.gz: 8b8a2135aad4ad4491e7ecccaf8782fd0d3a5c0524468f68371a8792d7fb9dda111e99121a69ea1ecdee5ac53d71d90a7857c4864e6db17532540a78398f4ddf
+  data.tar.gz: 52ad761a7308f1944cfbe46a4d9e6cf39913299655e7cb996979d5f76260d7ec0914e99092e6cbbd68ba4d0951c61b1cb1de111ac2354db9367d138025f21b51

data/app/assets/javascripts/tungsten/enhancements/flash-messages.js

@@ -0,0 +1,14 @@
+var Event = require('compose-event')
+var Notify = require('./notify')
+
+// If a page has an element .form-flash, trigger a notification
+//
+Event.change(function(){
+  var flash = document.querySelector('.flash-message')
+  if (flash) {
+    flash.classList.add('hidden')
+    var type = flash.dataset.type || 'error'
+    Notify(type, flash.textContent.trim())
+  }
+})
+

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

@@ -0,0 +1,89 @@
+var Event = require( 'compose-event' )
+
+var defaultsByType = {
+  normal: { dismissAfter: 2500 },
+  success: { dismissAfter: 2500 },
+}
+
+
+var timeout, 
+    messageEl,
+    template = '\
+<div class="notification">\
+  <div class="notification-content">\
+    <div class="notification-message" role="alert"></div>\
+    <button class="notification-close" href="#" role="button" aria-label="close message">\
+      <span class="close-icon" aria-hidden="true"></span>\
+    </button>\
+  </div>\
+</div>\
+'
+
+function notify (type, message) {
+  if ( !message ) {
+    message = type
+    type = null
+  }
+
+  return show( type, message )
+}
+
+function show ( type, message ) {
+  if ( messageEl ) return dismiss( function(){ show( type, message ) })
+
+  document.body.insertAdjacentHTML( 'beforeend', template )
+  messageEl = document.body.lastChild
+
+  messageEl.querySelector( '.notification-message' ).innerHTML = message
+
+  if ( type ) {
+
+    messageEl.classList.add( type )
+    var defaults = defaultsByType[ type ]
+
+    if ( defaults && defaults.dismissAfter ){
+      timeout = Event.delay( dismiss, defaults.dismissAfter )
+    }
+  }
+
+  messageEl = document.body.lastChild
+
+  Event.keyOne( 'esc', dismiss )
+  Event.one( messageEl, 'click', '.notification-close', dismiss )
+
+  return {
+    dismiss: dismiss
+  }
+}
+
+function dismiss ( callback ) {
+
+  var cb
+
+  if ( typeof callback == 'function' ) {
+    cb = function() { remove(); callback() }
+  } else {
+    cb = remove;
+  }
+
+  var timeout = Event.delay( cb, 500 )
+
+  Event.one( messageEl, 'animationstart', function() {
+    clearTimeout( timeout )
+
+    Event.afterAnimation( messageEl, cb )
+  })
+
+  messageEl.classList.add( 'dismiss' )
+}
+
+function remove () {
+  messageEl = document.querySelector('body > .notification')
+
+  if (messageEl) {
+    messageEl.parentNode.removeChild( messageEl )
+  }
+  messageEl = null
+}
+
+module.exports = notify

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

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

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

@@ -3,3 +3,5 @@
 @import 'badges';
 @import 'cards';
 @import 'tooltip';
+@import 'notices';
+@import 'notifications';

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

@@ -0,0 +1,31 @@
+@mixin notice-colors ($text, $bg, $border) {
+  color: $text;
+  background: linear-gradient( top, lighten($bg, 2), darken($bg, 2));
+  border: 1px solid $border;
+}
+.notice {
+  border-radius: $radius;
+  box-shadow: 0 3px 5px rgba($gray-11, .15);
+  padding: $card-padding;
+  @include block-margin;
+
+  .notice-title, p {
+    margin: {
+      top: 10px;
+      bottom: 10px;
+    }
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  @include notice-colors(currentColor, #fff, $gray-05);
+
+  &.warning {
+    @include notice-colors(#80602A, #fff4ad, #E2C66D);
+  }
+  &.error {
+    @include notice-colors(#FFF, #F37B78, #AB5857);
+    text-shadow: rgba(#000, .2) 0 1px 1px;
+  }
+}

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

@@ -0,0 +1,136 @@
+$status-text: #fff;
+$status-text-shadow: rgba(#000, .2) 0 1px 1px;
+
+@mixin notification-style($color) {
+  .notification-content { 
+    background: $color;
+  }
+  .notification-content:before {
+    background-color: darken($color, 10);
+  }
+}
+
+.flash-message {
+  display: none;
+}
+
+.notification {
+  position: fixed; top: 0; left: 10px; right: 10px;
+  height: 1px;
+  z-index: 1000;
+  overflow: visible;
+  transform: translate3d(0,0,0);
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 56px;
+    z-index: -1;
+  }
+
+  &-content {
+    width: 100%;
+    font-size: 1.2em;
+    margin: 0 auto;
+    position: relative;
+    animation: slide-down .4s $timing;
+    color: $status-text;
+    text-shadow: $status-text-shadow;
+    box-shadow: 0 3px 10px rgba($gray-11, .3);
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    display: flex;
+    align-items: middle;
+
+    &:before {
+      filter: brightness(1);
+      border-bottom-left-radius: 5px;
+      width: 45px;
+      content: "";
+      vertical-align: middle;
+      text-align: center;
+      padding-top: .4em;
+      content: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"%3E%3Cpath fill="#fff" d="M16 8.5a.5.5 0 0 1 0 1c-5.327 0-10 2.804-10 6a.5.5 0 0 1-1 0c0-3.794 5.037-7 11-7zm0-5c-8.837 0-16 5.373-16 12 0 4.127 2.78 7.766 7.008 9.926 0 .027-.008.045-.008.074 0 1.793-1.34 3.723-1.928 4.736h.002a.906.906 0 0 0 .832 1.264c.094 0 .26-.025.255-.014 3.13-.512 6.07-3.383 6.76-4.215 1 .15 2.03.23 3.09.23 8.84 0 16-5.37 16-12s-7.16-12-16-12zm0 22c-.917 0-1.858-.07-2.796-.207a1.998 1.998 0 0 0-1.836.71c-.428.52-1.646 1.683-3.085 2.538.39-.89.695-1.89.716-2.93v-.18c0-.75-.42-1.44-1.09-1.78C4.21 21.75 2 18.71 2 15.5c0-5.514 6.28-10 14-10 7.718 0 14 4.486 14 10s-6.28 10-14 10z"/%3E%3C/svg%3E');
+    }
+  }
+
+  &-message {
+    flex-grow: 1;
+    padding: 8px 15px;
+    a { 
+      color: #fef0bd;
+      &:hover, &:focus {
+        color: inherit;
+      }
+    }
+  }
+
+  &-close {
+    flex-shrink: 1;
+    text-align: center;
+    text-decoration: none;
+    padding: 16px 12px;
+    color: #fff;
+    cursor: pointer;
+    opacity: .7;
+    background: none;
+    border: none;
+    animation: half-spin .5s ease-out;
+
+    .close-icon {
+      display: block;
+      transition: all .3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
+      cursor: pointer;
+      
+      &:before,&:after {
+        content: "";
+        width: 18px;
+        height: 4px;
+        background-color: #fff;
+        display: block;
+        cursor: pointer;
+        position: relative;
+      }
+      &:before {
+        top: 2px;
+        transform: rotate(-45deg);
+      }
+      &:after { 
+        top: -2px;
+        transform: rotate(45deg);
+      }
+    }
+
+    &:focus, &:hover {
+      opacity: 1;
+      outline: none;
+    }
+  }
+
+  &.dismiss {
+    .notification-content {
+      animation: slide-up .2s .3s ease-out;
+    }
+    .close-icon {
+      animation: half-spin .5s ease-in reverse;
+    }
+  }
+
+  & {
+    @include notification-style($gray-09);
+  }
+
+  &.error {
+    @include notification-style($red-01);
+  }
+
+  &.action {
+    @include notification-style($blue-02);
+  }
+
+  &.success {
+    @include notification-style($green-02);
+  }
+
+}

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

@@ -7,13 +7,16 @@
     transform: translate3d(-50%, 0, 0);
     z-index: 100000;
     pointer-events: none;
+    animation: fade-in .1s ease-in;
+    animation-fill-mode: forwards;
+    animation-delay: .4s;
+    display: none;
   }
   &:after {
     -webkit-font-smoothing: subpixel-antialiased;
+    content: attr(aria-label);
     top: calc(100% + 6px);
-    transform: translateX(-50%);
-    background: rgba(#000, 0.8);
-    display: inline-block;
+    background-color: rgba(#000, 0.8);
     color: #fff;
     white-space: nowrap;
     font-size: 11px;
@@ -23,16 +26,27 @@
   }
   &:before {
     top: 100%;
+    content: "";
     @include triangle(up, rgba(#000, 0.8), 6px);
   }
 
   &:hover, &:focus {
-    &:after { content: attr(aria-label); }
-    &:before { content: ""; }
+    &:after { display: inline-block; }
+    &:before { display: inline-block; }
+  }
+
+  &.copied {
+    &:after { content: "Copied!"; }
     &:before, &:after {
-      animation: fade-in .1s ease-in;
-      animation-fill-mode: forwards;
-      animation-delay: .4s;
+      animation-delay: 0s;
+    }
+    &:after {
+      background-color: rgba($green-02, .8);
+    }
+    &:before {
+      @include triangle(up, rgba($green-02, .8), 6px);
     }
   }
+
 }
+

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

@@ -2,3 +2,51 @@
   0%   { opacity: 0; }
   100% { opacity: 1; }
 }
+
+@keyframes fade-out {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes slide-down {
+  0% {
+    transform: translateY(-100%) 
+  } 100% {
+    transform: translateY(0) 
+  }
+}
+
+@keyframes slide-up {
+  0% {
+    transform: translateY(0) 
+  } 100% {
+    transform: translateY(-100%) 
+  }
+}
+
+@keyframes spin {
+  0%   { 
+    transform: rotate(0deg);
+  }
+  100% { 
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes half-spin {
+  0% { 
+    transform: rotate(-180deg); 
+  }
+  100% {
+    transform: rotate(0deg); 
+  }
+}
+
+@keyframes zoom-in {
+  0% { 
+    transform: scale(.8, .8); 
+  }
+  100% {
+    transform: scale(1,1); 
+  }
+}

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

@@ -162,6 +162,21 @@ $header-height: 84px;
   }
 }
 
+// Between widths media query mixin
+@mixin between($small-width, $large-width) {
+  $large-width: $large-width - 1;
+  @media (max-width: $large-width) and (min-width: $small-width) {
+    @content;
+  }
+}
+
+// HDPI screens media query mixin
+@mixin hdpi {
+  @media (min-device-pixel-ratio: 1.3), (min-resolution: 120dpi), (min-resolution: 1.3dppx) {
+    @content;
+  }
+}
+
 @mixin triangle($direction, $color, $size) {
   @if $direction == left {
     border-bottom: $size solid transparent;
@@ -188,17 +203,3 @@ $header-height: 84px;
   width: 0;
 }
 
-// Between widths media query mixin
-@mixin between($small-width, $large-width) {
-  $large-width: $large-width - 1;
-  @media (max-width: $large-width) and (min-width: $small-width) {
-    @content;
-  }
-}
-
-// HDPI screens media query mixin
-@mixin hdpi {
-  @media (min-device-pixel-ratio: 1.3), (min-resolution: 120dpi), (min-resolution: 1.3dppx) {
-    @content;
-  }
-}