studio - manual policy editor: stubbed in notification UI and testing code

cms/static/sass/_alerts.scss

+// notifications
+.wrapper-notification {
+	@include clearfix();
+	@include box-sizing(border-box);
+	@include transition (bottom 2.0s ease-in-out 5s);
+	@include box-shadow(0 -1px 2px rgba(0,0,0,0.1));
+	position: fixed;
+	bottom: -100px;
+	z-index: 1000;
+	width: 100%;
+	overflow: hidden;
+	opacity: 0;
+	border-top: 1px solid $darkGrey;
+	padding: 20px 40px;
+
+	&.is-shown {
+		bottom: 0;
+		opacity: 1.0;
+	}
+
+	&.wrapper-notification-warning {
+		border-color: shade($yellow, 25%);
+		background: tint($yellow, 25%);
+	}
+
+	&.wrapper-notification-error {
+		border-color: shade($red, 50%);
+		background: tint($red, 20%);
+		color: $white;
+	}
+
+	&.wrapper-notification-confirm {
+		border-color: shade($green, 30%);
+		background: tint($green, 40%);
+		color: shade($green, 30%);
+	}
+}
+
+.notification {
+	@include box-sizing(border-box);
+	margin: 0 auto;
+	width: flex-grid(12);
+	max-width: $fg-max-width;
+	min-width: $fg-min-width;
+
+	.copy {
+		float: left;
+		width: flex-grid(9, 12);
+		margin-right: flex-gutter();
+		margin-top: 5px;
+		font-size: 14px;
+
+		.icon {
+			display: inline-block;
+			vertical-align: middle;
+			margin-right: 5px;
+			font-size: 20px;
+		}
+
+		p {
+			display: inline-block;
+			vertical-align: middle;
+		}
+	}
+
+	.actions {
+		float: right;
+		width: flex-grid(3, 12);
+		margin-top: 2px;
+		text-align: right;
+
+		li {
+			display: inline-block;
+			vertical-align: middle;
+			margin-right: 10px;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+
+		.save-button {
+			@include blue-button;
+		}
+
+		.cancel-button {
+		  @include white-button;
+		}
+	}
+
+	strong {
+		font-weight: 700;
+	}
+}
+
+// adopted alerts
 .alert {
 	padding: 15px 20px;
 	margin-bottom: 30px;

cms/templates/settings.html

@@ -28,6 +28,12 @@ from contentstore import utils
   <script type="text/javascript">
     $(document).ready(function(){
 
+        // to show/hide the alert, just toggle the "is-shown" class with JS - CSS handles the rest
+        $('.test-notification').click(function(e){
+          e.preventDefault();
+          $('.wrapper-notification').toggleClass('is-shown');
+        });        
+
         // proactively populate advanced b/c it has the filtered list and doesn't really follow the model pattern
         var advancedModel = new CMS.Models.Settings.Advanced(${advanced_dict | n}, {parse:true});
         advancedModel.blacklistKeys = ${advanced_blacklist | n};
@@ -54,7 +60,10 @@ from contentstore import utils
   <!-- -->
   <div class="main-wrapper">
     <div class="inner-wrapper">      
+      <a href="#" class="test-notification">Test Notification (for testing purposes)!</a>
+
       <h1>Settings</h1>
+
       <article class="settings-overview">
         <div class="sidebar">
           <nav class="settings-page-menu">
@@ -780,5 +789,21 @@ from contentstore import utils
       </article>
     </div>
   </div>
-  <footer></footer>
+
+  <!-- notification: change has been made and a save is needed -->
+  <div class="wrapper wrapper-notification wrapper-notification-warning">
+    <div class="notification warning">
+      <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>.</p> 
+      </div>
+
+      <div class="actions">
+        <ul>
+          <li><a href="#" class="save-button">Save</a></li>
+          <li><a href="#" class="cancel-button">Cancel</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
 </%block>