fixed policy editing workflow

cms/static/js/base.js

@@ -63,6 +63,9 @@ $(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', '.edit-policy-data', editPolicyMetadata);
+    $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 +164,40 @@ 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 editPolicyMetadata(e) {
+    e.preventDefault();
+
+    var $policyElement = $(this).parents('.policy-list-element');
+    $policyElement.data('currentValues', [$policyElement.find('.policy-list-name').val(), $policyElement.find('.policy-list-value').val()]);
+    $policyElement.addClass('new-policy-list-element').addClass('editing');
+    $policyElement.find('.policy-list-name, .policy-list-value').removeAttr('disabled');
 }
 
 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.find('.policy-list-value').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) {

cms/static/sass/_subsection.scss

@@ -22,12 +22,19 @@
 	}
 
 	.policy-list {
+		.policy-list-name,
+		.policy-list-value {
+			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 +44,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 +76,10 @@
 			@include white-button;
 		}
 
+		.edit-icon {
+			display: none;
+		}
+
 		.delete-icon {
 			display: none;
 		}

cms/templates/edit_subsection.html

@@ -36,7 +36,11 @@
           <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]}" disabled size="40"/>
+                  <a href="#" class="save-button">Save</a>
+                  <a href="#" class="cancel-button">Cancel</a>
+                  <a href="#" class="edit-icon edit-policy-data"></a>
+                  <a href="#" class="delete-icon remove-policy-data"></a>
               </li>
               % endfor
         <a href="#" class="new-policy-item add-policy-data">
@@ -55,6 +59,7 @@
              <input type="text" class="policy-list-name" autocomplete="off" size="15"/>:&nbsp;<input type="text" class="policy-list-value" size=40 autocomplete="off"/>
              <a href="#" class="save-button">Save</a>
              <a href="#" class="cancel-button">Cancel</a>
+             <a href="#" class="edit-icon edit-policy-data"></a>
              <a href="#" class="delete-icon remove-policy-data"></a>
            </li>       
     </div>