From ec90d349e20ed76b2b53e4281aeb5e7ad70727fc Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 4 Mar 2013 12:47:07 -0500
Subject: [PATCH] studio - alerts: revisited advanced editor notification UI to
 marry new styles/behavior - WIP

---
 cms/static/js/base.js                         |  2 +-
 cms/static/js/views/settings/advanced_view.js |  4 ++--
 cms/templates/settings_advanced.html          | 23 +++++++++++--------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/cms/static/js/base.js b/cms/static/js/base.js
index a6e8190e17..3cb1829ffb 100644
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -57,7 +57,7 @@ $(document).ready(function () {
     });
 
     // alert and notifications - manual & action-based close
-    $('.action-notification-close, .notification.has-actions .nav-actions a').click(function(e) {
+    $('.action-notification-close').click(function(e) {
         (e).preventDefault();
         $(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding');
     });
diff --git a/cms/static/js/views/settings/advanced_view.js b/cms/static/js/views/settings/advanced_view.js
index d20a21f7e7..dc9adb30ed 100644
--- a/cms/static/js/views/settings/advanced_view.js
+++ b/cms/static/js/views/settings/advanced_view.js
@@ -141,13 +141,13 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
                         event.keyCode === 8 || event.keyCode === 46)) return;
             }
             this.$el.find(".message-status").removeClass("is-shown");
-            $('.wrapper-notification').addClass('is-shown');
+            $('.wrapper-notification').removeClass('is-hiding').addClass('is-shown');
             this.buttonsVisible = true;
         }
     },
 
     hideSaveCancelButtons: function() {
-        $('.wrapper-notification').removeClass('is-shown');
+        $('.wrapper-notification').removeClass('is-shown').addClass('is-hiding');
         this.buttonsVisible = false;
     },
 
diff --git a/cms/templates/settings_advanced.html b/cms/templates/settings_advanced.html
index ceee406398..f04015a4a9 100644
--- a/cms/templates/settings_advanced.html
+++ b/cms/templates/settings_advanced.html
@@ -105,20 +105,25 @@ editor.render();
 
 <!-- notification: change has been made and a save is needed -->
 <div class="wrapper wrapper-notification wrapper-notification-warning">
-  <div class="notification warning">
+  <div class="notification warning has-actions">
+    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
+    
     <div class="copy">
-      <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
-
-      <p><strong>Note: </strong>Your changes will not take effect until you <strong>save your
-      progress</strong>. Take care with key and value formatting, as validation is <strong>not implemented</strong>.</p>
+      <h2 class="title title-3">You've Made Some Changes</h2>
+      <p>Your changes will not take effect until you <strong>save your progress</strong>. Take care with key and value formatting, as validation is <strong>not implemented</strong>.</p>
     </div>
 
-    <div class="actions">
+    <nav class="nav-actions">
+      <h3 class="sr">Notification Actions</h3>
       <ul>
-        <li><a href="#" class="save-button">Save</a></li>
-        <li><a href="#" class="cancel-button">Cancel</a></li>
+        <li class="nav-item">
+          <a href="#" class="action-primary save-button">Save Changes</a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="action-secondary cancel-button">Cancel</a>
+        </li>
       </ul>
-    </div>
+    </nav>
   </div>
 </div>
 </%block>
\ No newline at end of file