Merge pull request #835 from MITx/feature/tomg/cas-toast

added toast notification styles and basic js implementation

cms/static/js/base.js

@@ -249,5 +249,36 @@ function removeDateSetter(e) {
     $block.find('.time').val('');
 }
 
+function showToastMessage(message, $button, lifespan) {
+    var $toast = $('<div class="toast-notification"></div>');
+    var $closeBtn = $('<a href="#" class="close-button">×</a>');
+    $toast.append($closeBtn);
+    var $content = $('<div class="notification-content"></div>');
+    $content.html(message);
+    $toast.append($content);
+    if($button) {
+        $button.addClass('action-button');
+        $button.bind('click', hideToastMessage);
+        $content.append($button);
+    }
+    $closeBtn.bind('click', hideToastMessage);
 
+    if($('.toast-notification')[0]) {
+        var targetY = $('.toast-notification').offset().top + $('.toast-notification').outerHeight();
+        $toast.css('top', (targetY + 10) + 'px');
+    }
 
+    $body.prepend($toast);
+    $toast.fadeIn(200);
+
+    if(lifespan) {
+        $toast.timer = setTimeout(function() {
+            $toast.fadeOut(300);
+        }, lifespan * 1000);
+    }
+}
+
+function hideToastMessage(e) {
+    e.preventDefault();
+    $(this).closest('.toast-notification').remove();
+}

cms/static/sass/_base.scss

@@ -221,4 +221,62 @@ body.show-wip {
             @include position(absolute, 0px 0px 0 0);
         }
     }
+}
+
+.toast-notification {
+  display: none;
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 99999;
+  max-width: 350px;
+  padding: 15px 20px 17px;
+  border-radius: 3px;
+  border: 1px solid #333;
+  @include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
+  background-color: rgba(30, 30, 30, .92);
+  @include box-shadow(0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset);
+  font-size: 13px;
+  text-align: center;
+  color: #fff;
+  @include transition(all .2s);
+
+  p, span {
+    color: #fff;
+  }
+
+  strong {
+    display: block;
+    margin-bottom: 10px;
+    font-size: 16px;
+    font-weight: 700;
+    text-align: center;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 27px;
+    height: 27px;
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 25px;
+    color: #aaa;
+    text-align: center;
+
+    .close-icon {
+      font-size: 16px;
+      font-weight: 700;
+    }
+  }
+
+  .action-button {
+    @include blue-button;
+    @include box-sizing(border-box);
+    width: 100%;
+    margin-top: 10px;
+    font-size: 12px;
+    text-align: center;
+  }
 }

cms/templates/unit.html

@@ -113,4 +113,5 @@
       </div>
     </div>
   </div>
-</%block>
+
+</%block>