Merge pull request #565 from edx/grady/validation-sassafrass

Animations!

openassessment/templates/openassessmentblock/edit/oa_edit.html

@@ -13,7 +13,7 @@
             </ul>
         </div>
 
-        <div id="openassessment_validation_alert" class="is--hidden">
+        <div id="openassessment_validation_alert" class="covered">
             <i class="openassessment_alert_icon"></i>
             <div class="openassessment_alert_header">
                 <h2 class="openassessment_alert_title">{% trans "Rubric Change Impacts Settings Section" %}</h2>

openassessment/xblock/static/js/src/studio/oa_edit_validation_alert.js

@@ -10,6 +10,8 @@ OpenAssessment.ValidationAlert = function() {
     this.editorElement = $(this.element).parent();
     this.title = $(".openassessment_alert_title", this.element);
     this.message = $(".openassessment_alert_message", this.element);
+    this.ALERT_YELLOW = 'rgb(192, 172, 0)';
+    this.DARK_GREY = '#323232';
 };
 
 OpenAssessment.ValidationAlert.prototype = {
@@ -37,7 +39,7 @@ OpenAssessment.ValidationAlert.prototype = {
         // Finds the height of all other elements in the editor_and_tabs (the Header) and sets the height
         // of the editing area to be 100% of that element minus those constraints.
         var headerHeight = $('#openassessment_editor_header', this.editorElement).outerHeight();
-        this.element.addClass('is--hidden');
+        this.element.addClass('covered');
         var styles = {
             'height': 'Calc(100% - ' + headerHeight + 'px)',
             'border-top-right-radius': '3px',
@@ -57,21 +59,31 @@ OpenAssessment.ValidationAlert.prototype = {
         OpenAssessment.ValidationAlert
     */
     show : function() {
-        this.element.removeClass('is--hidden');
-        // Finds the height of all other elements in the editor_and_tabs (the Header and Alert) and sets
-        // the height of the editing area to be 100% of that element minus those constraints.
-        var headerHeight = $('#openassessment_editor_header', this.editorElement).outerHeight();
-        var heightString = 'Calc(100% - ' + (this.element.outerHeight() + headerHeight) + 'px)';
-        var styles = {
-            'height': heightString,
-            'border-top-right-radius': '0px',
-            'border-top-left-radius': '0px'
-        };
-
-        $('.oa_editor_content_wrapper', this.editorElement).each( function () {
-            $(this).css(styles);
-        });
-        return this;
+        var view = this;
+        if (this.isVisible()){
+            $(this.element).animate(
+                {'background-color': view.ALERT_YELLOW}, 300, 'swing', function () {
+                    $(this).animate({'background-color': view.DARK_GREY}, 700, 'swing');
+                }
+            );
+        } else {
+            // Finds the height of all other elements in the editor_and_tabs (the Header and Alert) and sets
+            // the height of the editing area to be 100% of that element minus those constraints.
+            this.element.removeClass('covered');
+            var alertHeight = this.element.outerHeight();
+            var headerHeight = $('#openassessment_editor_header', this.editorElement).outerHeight();
+            var heightString = 'Calc(100% - ' + (alertHeight + headerHeight) + 'px)';
+            var styles = {
+                'height': heightString,
+                'border-top-right-radius': '0px',
+                'border-top-left-radius': '0px'
+            };
+
+            $('.oa_editor_content_wrapper', this.editorElement).each(function () {
+                $(this).css(styles);
+            });
+            return this;
+        }
     },
 
     /**
@@ -99,7 +111,7 @@ OpenAssessment.ValidationAlert.prototype = {
 
     **/
     isVisible: function() {
-        return !this.element.hasClass('is--hidden');
+        return !this.element.hasClass('covered');
     },
 
     /**

openassessment/xblock/static/sass/oa/utilities/_developer.scss

@@ -230,7 +230,6 @@
   }
 
   #openassessment_validation_alert{
-    height: auto;
     width: 100%;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
@@ -239,8 +238,14 @@
     padding: 10px;
     position: absolute;
     z-index: 10;
-    min-height: 70px;
-    @include transition (color 0.50s ease-in-out 0s);
+    max-height: 200px;
+
+    .openassessment_alert_icon{
+      position: absolute;
+      top: 35%;
+      font-size: 200%;
+      left: 3%;
+    }
 
     .openassessment_alert_icon:before{
       font-family: FontAwesome;
@@ -248,8 +253,8 @@
       display: inline-block;
       color: rgb(192, 172, 0);
       float: left;
-      font-size: 200%;
-      margin: 1.5% 0px 0px 2%;
+      height: 0;
+      width: 0;
     }
     .openassessment_alert_header {
       width: 85%;
@@ -273,7 +278,6 @@
       top: 0px;
       right: 0px;
       color: #e9e9e9;
-      background: #323232;
       text-align: center;
       margin: 5px 10px;
 
@@ -298,6 +302,11 @@
     overflow-y: scroll;
     position: absolute;
     bottom: 0;
+    z-index: 11;
+
+    transition: height 1s ease-in-out 0;
+    -webkit-transition: height 1s ease-in-out 0;
+    -moz-transition: height 1s ease-in-out 0;
   }
 
   #openassessment_prompt_editor {