Merge pull request #959 from MITx/feature/cas/tomg/saving-conventions

tweaked saving mechanisms

cms/static/coffee/src/views/unit.coffee

@@ -237,3 +237,4 @@ class CMS.Views.UnitEdit.SaveDraftButton extends Backbone.View
 
   enable: =>
     @$el.removeClass('disabled')
+    @model.save()
\ No newline at end of file

cms/static/js/base.js

@@ -63,6 +63,8 @@ $(document).ready(function() {
     // add/remove policy metadata button click handlers
     $('.add-policy-data').bind('click', addPolicyMetadata);
     $('.remove-policy-data').bind('click', removePolicyMetadata);
+    $body.on('click', '.policy-list-element .save-button', savePolicyMetadata);
+    $body.on('click', '.policy-list-element .cancel-button', cancelPolicyMetadata);
 
     $('.sync-date').bind('click', syncReleaseDate);
 
@@ -161,19 +163,30 @@ function addPolicyMetadata(e) {
     newNode.insertBefore('.add-policy-data');
     $('.remove-policy-data').bind('click', removePolicyMetadata);
     newNode.find('.policy-list-name').focus();
-    newNode.find('.save-button').bind('click', savePolicyMetadata);
-    newNode.find('.cancel-button').bind('click', cancelPolicyMetadata);
 }
 
 function savePolicyMetadata(e) {
     e.preventDefault();
+
+    var $policyElement = $(this).parents('.policy-list-element');
     $('.save-subsection').click();
-    $(this).parents('.policy-list-element').removeClass('new-policy-list-element');
+    $policyElement.removeClass('new-policy-list-element');
+    $policyElement.find('.policy-list-name').attr('disabled', 'disabled');
+    $policyElement.removeClass('editing');
 }
 
 function cancelPolicyMetadata(e) {
     e.preventDefault();
-    $(this).parents('.policy-list-element').remove();
+
+    var $policyElement = $(this).parents('.policy-list-element');
+    if(!$policyElement.hasClass('editing')) {
+        $policyElement.remove();
+    } else {
+        $policyElement.removeClass('new-policy-list-element');
+        $policyElement.find('.policy-list-name').val($policyElement.data('currentValues')[0]);
+        $policyElement.find('.policy-list-value').val($policyElement.data('currentValues')[1]);
+    }
+    $policyElement.removeClass('editing');
 }
 
 function removePolicyMetadata(e) {
@@ -315,6 +328,7 @@ function saveSubsection(e) {
             'margin-top': '-10px'
         });
         $changedInput.after($spinner);
+        $spinner.show();
     }
     
     var id = $(this).data('id');

cms/static/sass/_subsection.scss

@@ -22,12 +22,18 @@
 	}
 
 	.policy-list {
+		input[disabled] {
+			border: none;
+			@include box-shadow(none);
+		}
+
 		.policy-list-name {
 			margin-right: 5px;
 			margin-bottom: 10px;
 		}
 
 		.policy-list-value {
+			width: 320px;
 			margin-right: 10px;
 		}
 	}
@@ -37,11 +43,26 @@
 		.cancel-button {
 			display: none;
 		}
+
+		.edit-icon {
+			margin-right: 8px;
+		}
+
+		&.editing,
+		&.new-policy-list-element {
+			.policy-list-name,
+			.policy-list-value {
+				border: 1px solid #b0b6c2;
+		    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
+		    background-color: #edf1f5;
+		    @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+			}
+		}
 	}
 
 	.new-policy-list-element {
 		padding: 10px 10px 0;
-		margin: 0 -10px;
+		margin: 0 -10px 10px;
 		border-radius: 3px;
 		background: $mediumGrey;
 
@@ -54,6 +75,10 @@
 			@include white-button;
 		}
 
+		.edit-icon {
+			display: none;
+		}
+
 		.delete-icon {
 			display: none;
 		}

cms/static/sass/_unit.scss

@@ -326,6 +326,10 @@
     display: none;
   }
 
+  #delete-draft {
+    display: inline-block;
+  }
+
   .save-button,
   .preview-button,
   .publish-button,

cms/templates/edit_subsection.html

@@ -36,7 +36,10 @@
           <ol class='policy-list'>
               % for policy_name in policy_metadata.keys():
               <li class="policy-list-element">
-                  <input type="text" class="policy-list-name" name="${policy_name}" value="${policy_name}" disabled size="15"/>:&nbsp;<input type="text" class="policy-list-value" name="${policy_metadata[policy_name]}" value="${policy_metadata[policy_name]}" size="40"/><a href="#" class="delete-icon remove-policy-data"></a>
+                  <input type="text" class="policy-list-name" name="${policy_name}" value="${policy_name}" disabled size="15"/>:&nbsp;<input type="text" class="policy-list-value" name="${policy_metadata[policy_name]}" value="${policy_metadata[policy_name]}" size="40"/>
+                  <a href="#" class="save-button">Save</a>
+                  <a href="#" class="cancel-button">Cancel</a>
+                  <a href="#" class="delete-icon remove-policy-data"></a>
               </li>
               % endfor
         <a href="#" class="new-policy-item add-policy-data">