Studio: adds in disabled/submitting state and logic for course creation button

cms/static/sass/views/_dashboard.scss

@@ -95,6 +95,7 @@ body.dashboard {
 				@extend .t-action1;
 				@include transform(rotate(45deg));
 				@include transform-origin(center center);
+				@include transition(all $tmg-f1 linear 0s);
 				float: right;
 				text-align: right;
 			}
@@ -102,7 +103,7 @@ body.dashboard {
 
 		.ui-toggle-target {
 			@extend .depth1;
-			@include transition(opacity 0.50s ease-in-out 0s);
+			@include transition(opacity $tmg-f1 ease-in-out 0s);
 			position: relative;
 			top: -2px;
 			display: none;
@@ -156,6 +157,32 @@ body.dashboard {
         @extend .btn-primary-blue;
         @extend .t-action3;
       }
+
+      // specific - request button
+      .action-request {
+      	position: relative;
+      	overflow: hidden;
+
+      	.icon-cog {
+      		@include transition(all $tmg-f1 ease-in-out $tmg-f1);
+      		@include font-size(20);
+      		position: absolute;
+      		top: ($baseline/2);
+					left: -($baseline);
+      		visibility: hidden;
+      		opacity: 0.0;
+      	}
+
+      	&.is-submitting {
+      		padding-left: ($baseline*2);
+
+					.icon-cog {
+						left: ($baseline*0.75);
+						visibility: visible;
+						opacity: 1.0;
+					}
+      	}
+      }
     }
 
     .status-update {

cms/templates/index.html

@@ -8,6 +8,28 @@
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
 <script src="http://malsup.github.com/jquery.form.js"></script>
 
+<%block name="jsextra">
+<script type="text/javascript">
+    $(document).ready(function () {
+
+        // showing/hiding creation rights UI
+        $('.show-creationrights').click(function(e){
+            (e).preventDefault();
+            $(this).closest('.wrapper-creationrights').toggleClass('is-shown').find('.ui-toggle-control').toggleClass('current');
+        });
+
+        $('#request-coursecreator').ajaxForm(function() {
+            location.reload();
+        });
+
+        $('#request-coursecreator-submit').click(function(e){
+          (e).preventDefault();
+          $(this).toggleClass('is-disabled is-submitting').find('.label').text('Submitting Your Request');
+        });
+    });
+</script>
+</%block>
+
 <%block name="header_extras">
   <script type="text/template" id="new-course-template">
     <section class="new-course">
@@ -38,23 +60,6 @@
   </script>
 </%block>
 
-<%block name="jsextra">
-<script type="text/javascript">
-    $(document).ready(function () {
-
-        // showing/hiding creation rights UI
-        $('.show-creationrights').click(function(e){
-            (e).preventDefault();
-            $(this).closest('.wrapper-creationrights').toggleClass('is-shown').find('.ui-toggle-control').toggleClass('current');
-        });
-
-        $('#request-coursecreator').ajaxForm(function() {
-            location.reload();
-        });
-    });
-</script>
-</%block>
-
 <%block name="content">
 <div class="wrapper-mast wrapper">
   <header class="mast has-actions">
@@ -162,9 +167,14 @@
             <h4 class="title">${_('Your Course Creator Request Status:')}</h4>
 
             <form id="request-coursecreator" action="${request_course_creator_url}" method="post" enctype="multipart/form-data">
+
+              <div id="request-coursecreator-error" name="request-coursecreator-error" class="message message-status message-status error">
+                <p>There was a problem submitting your request</p>
+              </div>
+
               <input type="hidden" name="csrfmiddlewaretoken" value="${csrf}">
               <div class="form-actions">
-                <button type="submit" id="request-coursecreator-submit" name="request-coursecreator-submit" class="action-primary action-request">${_('Request the Ability to Create Courses')}</button>
+                <button type="submit" id="request-coursecreator-submit" name="request-coursecreator-submit" class="action-primary action-request"><i class="icon-cog icon-inline icon-spin"></i> <span class="label">${_('Request the Ability to Create Courses')}</span></button>
               </div>
             </form>
           </div>

common/static/sass/_mixins.scss

@@ -125,7 +125,7 @@
 
   }
 
-  &.disabled, &[disabled] {
+  &.disabled, &[disabled], &.is-disabled {
     cursor: default;
     pointer-events: none;
     opacity: 0.5;