studio - alerts: converted transition-based animation to keyframe/css animation and added in a demo for a fleeting notification

2013-02-27 12:45:44 -05:00
parent cc02b4714c
commit cb456ad228
5 changed files with 105 additions and 35 deletions
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -50,21 +50,18 @@ $(document).ready(function () {
    });

    // alert and notifications - manual close
-    $('.action-alert-close').click(function(e) {
+    $('.action-alert-close, .alert.has-actions .nav-actions a').click(function(e) {
        (e).preventDefault();
        console.log('closing alert');
        $(this).closest('.wrapper-alert').removeClass('is-shown');
    });

-    // alert and notifications - manual close
-    $('.action-notification-close').click(function(e) {
+    // alert and notifications - manual & action-based close
+    $('.action-notification-close, .notification.has-actions .nav-actions a').click(function(e) {
        (e).preventDefault();
        $(this).closest('.wrapper-notification').removeClass('is-shown');
    });

-
-
-
    // nav - dropdown related
    $body.click(function (e) {
        $('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown');
--- a/cms/static/sass/_alerts.scss
+++ b/cms/static/sass/_alerts.scss
@@ -5,10 +5,9 @@
 .wrapper-notification {
  @include clearfix();
  @include box-sizing(border-box);
-  transition: bottom 1.0s ease-in-out 0.125s;
-  -webkit-transition: bottom 1.0s ease-in-out 0.125s;
  @include box-shadow(0 -1px 3px $shadow);
  position: fixed;
+  bottom: 0;
  z-index: 1000;
  width: 100%;
  border-top: 4px solid $gray-l1;
@@ -31,7 +30,7 @@
    }
  }

-  &.wrapper-notification-error {
+  &.wrapper-cation-error {
    border-top-color: $red-l1;

    .icon-error {
@@ -50,24 +49,31 @@
  &.wrapper-notification-confirmation {
    border-top-color: $green;

-    .icon-error {
+    .icon-confirmation {
      color: $green;
    }

    &:hover {
      border-top-color: $green-s1;

-      .icon-error {
+      .icon-confirmation {
        color: $green-s1;
      }
    }
  }

+  &.wrapper-notification-saving {
+    border-top-color: $pink;
+
+    &:hover {
+      border-top-color: $pink-s1;
+    }
+  } 
+
  // shorter/status notifications
  &.wrapper-notification-status {
-    width: ($baseline*6);
+    width: ($baseline*8);
    right: ($baseline);
-    border-top-color: $pink;
    padding: ($baseline/2) $baseline;

    .notification {
@@ -77,25 +83,26 @@
      max-width: none;
      min-width: none;

+      .icon, .copy {
+        float: none;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
      .icon {
        width: $baseline;
+        height: ($baseline*1.25);
        margin-right: ($baseline*0.75);
+        line-height: 3rem;
      }

      .copy {
-        width: ($baseline*9);

-        p {
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          width: 100%;
-        }
      }
-    }    
+    } 
  }

-  // shorter/status notifications
+  // help notifications
  &.wrapper-notification-help {
    width: ($baseline*14);
    right: ($baseline);
@@ -138,12 +145,15 @@

  .icon, .copy {
    float: left;
+    display: inline-block;
+    vertical-align: middle;
  }

  .icon {
    @include transition (color 0.5s ease-in-out);
    @include font-size(22);
    width: flex-grid(1, 12);
+    height: ($baseline*1.25);
    margin-right: flex-gutter();
    text-align: right;
    color: $white;
@@ -165,9 +175,9 @@
  .action-notification-close {
    @include border-top-radius(3px);
    position: absolute;
-    top: -31px;
+    top: -34px;
    right: $baseline;
-    padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
+    padding: ($baseline/5) ($baseline/2.5) 0 ($baseline/2.5);
    background: $gray-l1;
    text-align: center;

@@ -278,6 +288,10 @@

  &.confirmation {

+    .copy {
+      margin-top: ($baseline/5);
+    }
+
    .action-notification-close {
      background: $green;

@@ -323,8 +337,6 @@
    .icon-saving {
      @include animation(rotateClockwise 3.0s forwards linear infinite);
      width: 22px;
-      height: 25px;
-      line-height: 3rem !important;
    }

    .copy p {
@@ -619,12 +631,14 @@
  }

  .wrapper-notification {
-    bottom: -1000px;
-    opacity: 0;
+    bottom: -($notification-height);

    &.is-shown {
-      bottom: 0;
-      opacity: 1.0;
+      @include animation(notificationsSlideUp 2s forwards ease-in-out 1);
+    }
+
+    &.is-fleeting.is-shown {
+      @include animation(notificationsSlideUpDown 6s forwards ease-in-out 1);
    }
  }
 }
--- a/cms/static/sass/_keyframes.scss
+++ b/cms/static/sass/_keyframes.scss
@@ -19,6 +19,50 @@

 // ====================

+// notifications slide up
+@mixin notificationsSlideUp {
+  0% {
+    @include transform(translateY(0));
+  }
+
+  90% {
+    @include transform(translateY(-($notification-height)));
+  }
+
+  100% {
+    @include transform(translateY(-($notification-height*0.99)));
+  }
+}
+
+@-moz-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
+@-webkit-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
+@-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
+@keyframes notificationsSlideUp { @include notificationsSlideUp();}
+
+// ====================
+
+// notifications slide up
+@mixin notificationsSlideUpDown {
+  0%, 100% { 
+    @include transform(translateY(0));
+  }
+
+  15%, 85% {
+    @include transform(translateY(-($notification-height)));
+  }
+
+  20%, 80% {
+    @include transform(translateY(-($notification-height*0.99)));
+  }
+}
+
+@-moz-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
+@-webkit-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
+@-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
+@keyframes notificationsSlideUpDown { @include notificationsSlideUpDown();}
+
+// ====================
+
 // bounce in
@mixin bounce-in {
  0% {
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -136,6 +136,10 @@ $shadow-l1: rgba(0,0,0,0.1);
 $shadow-l2: rgba(0,0,0,0.05);
 $shadow-d1: rgba(0,0,0,0.4);

+
+// specific UI
+$notification-height: ($baseline*10);
+
 // colors - inherited 
 $baseFontColor: #3c3c3c;
 $offBlack: #3c3c3c;
--- a/cms/templates/alerts.html
+++ b/cms/templates/alerts.html
@@ -250,8 +250,8 @@
          <li><a href="#alert-removed" class="test-alert">Toggle Previous View/Action Removed Alert</a></li>
          <li><a href="#alert-system-error" class="test-alert">Toggle System Error Alert</a></li>
          <li><a href="#alert-user-error" class="test-alert">Toggle User Error Alert</a></li>
-          <li><a href="#alert-announcement1" class="test-alert">Toggle Announcement Alert</a></li>
-          <li><a href="#alert-announcement2" class="test-alert">Toggle Announcement with Actions Alert</a></li>
+          <li><a href="#alert-announcement2" class="test-alert">Toggle Announcement Alert</a></li>
+          <li><a href="#alert-announcement1" class="test-alert">Toggle Announcement with Actions Alert</a></li>
          <li><a href="#alert-activation" class="test-alert">Toggle Activiation Alert</a></li>
        </ul>
      </section>
@@ -270,6 +270,7 @@
          <li><a href="#notification-change" class="test-notification">Toggle Change Warning Notification</a></li>
          <li><a href="#notification-version" class="test-notification">Toggle New Version Warning Notification</a></li>
          <li><a href="#notification-dangerous" class="test-notification">Toggle Editing Warning Notification</a></li>
+          <li><a href="#notification-confirmation" class="test-notification">Toggle Confirmation Notification</a></li>
          <li><a href="#notification-saving" class="test-notification">Toggle Saving Notification</a></li>
          <li><a href="#notification-help" class="test-notification">Toggle Help Notification</a></li>
        </ul>
@@ -356,13 +357,23 @@
 </div>

 <!-- notification: status - saving -->
-<div class="wrapper wrapper-notification wrapper-notification-status" id="notification-saving">
+<div class="wrapper wrapper-notification wrapper-notification-status wrapper-notification-saving" id="notification-saving">
  <div class="notification saving">
    <i class="ss-icon ss-symbolicons-block icon icon-saving">&#x2699;</i>
    
    <div class="copy">
-      <h2 class="title title-3">Saving</h2>
-      <p>Hamster wheels are turning pretty fast right now. Hang on! Saving will be done soon.</p>
+      <h2 class="title title-3">Saving &hellip;</h2>
+    </div>
+  </div>
+</div>
+
+<!-- notification: status- confirmed -->
+<div class="wrapper wrapper-notification wrapper-notification-confirmation is-fleeting" id="notification-confirmation">
+  <div class="notification confirmation">
+    <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
+    
+    <div class="copy">
+      <h2 class="title title-3"><a href="#">Your Section</a> Has Been Created</h2>
    </div>
  </div>
 </div>