From 7d871ddfc9f3440452dab0e7c3a81498e4a2198c Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Thu, 31 Jan 2013 11:50:07 -0500
Subject: [PATCH] studio - revised manual policy UI: added key tips on focus,
 moved error messages to bottom of pairings

---
 cms/static/sass/_settings.scss | 13 +++++++++++++
 cms/templates/settings.html    | 32 ++++++++++----------------------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss
index 5f14b83a9b..51c9489254 100644
--- a/cms/static/sass/_settings.scss
+++ b/cms/static/sass/_settings.scss
@@ -582,6 +582,18 @@
             input {
               width: 100%;
             }
+
+            .tip {
+              @include transition (opacity 0.5s ease-in-out 0s);
+              opacity: 0;
+            }
+
+            input:focus {
+
+              & + .tip {
+                opacity: 1.0;
+              }
+            }
           }
         }
 
@@ -599,6 +611,7 @@
         }
 
         .message-error {
+          float: left;
           margin: 0 0 10px 0;
         }
       }
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index 7153b6daa3..6dd4d3eed6 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -746,6 +746,7 @@ from contentstore import utils
                           <label for="course-advanced-policy-1-key">Policy Key:</label>
                           <div class="field">
                             <input type="text" class="short" id="course-advanced-policy-1-key" value="" />
+                            <span class="tip tip-stacked">Keys are case sensitive and cannot contain spaces or start with a number</span>
                           </div>      
                         </div>
                         <div class="value">
@@ -760,12 +761,12 @@ from contentstore import utils
 
                     <!-- error existing key pair example -->
                     <li class="input multi course-advanced-policy-list-item">
-                      <span class="message-error">This policy key, $KEYNAME, already exists.</span>
                       <div class="row">
                         <div class="key">
                           <label for="course-advanced-policy-2-key">Policy Key:</label>
                           <div class="field">
                             <input type="text" class="short" id="course-advanced-policy-2-key" value="" />
+                            <span class="tip tip-stacked">Keys are case sensitive and cannot contain spaces or start with a number</span>
                           </div>      
                         </div>
                         <div class="value">
@@ -775,17 +776,19 @@ from contentstore import utils
                           </div>      
                         </div>
                       </div>
+                      <span class="message-error">This policy key, $KEYNAME, already exists.</span>
+
                       <a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a>
                     </li>
 
                     <!-- error on key left empty example -->
                     <li class="input multi course-advanced-policy-list-item">
-                      <span class="message-error">You cannot leave the key value for this pair blank.</span>
                       <div class="row">
                         <div class="key error">
                           <label for="course-advanced-policy-3-key">Policy Key:</label>
                           <div class="field">
                             <input type="text" class="short" id="course-advanced-policy-3-key" value="" />
+                            <span class="tip tip-stacked">Keys are case sensitive and cannot contain spaces or start with a number</span>
                           </div>      
                         </div>
                         <div class="value error">
@@ -795,18 +798,20 @@ from contentstore import utils
                           </div>      
                         </div>
                       </div>
+                      <span class="message-error">You cannot leave the key value for this pair blank.</span>
+
                       <a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a>
                     </li>
 
                     <!-- error with value formatting example -->
                     <li class="input multi course-advanced-policy-list-item">
-                      <span class="message-error">The JSON value for $KEYNAME is invalid.</span>
                       <div class="row">
                         <div class="key error">
                           <label for="course-advanced-policy-4-key">Policy Key:</label>
                           <div class="field">
                             <input type="text" class="short" id="course-advanced-policy-4-key" value="" />
-                          </div>      
+                            <span class="tip tip-stacked">Keys are case sensitive and cannot contain spaces or start with a number</span>
+                          </div>  
                         </div>
                         <div class="value error">
                           <label for="course-advanced-policy-4-value">Policy Value:</label>
@@ -815,25 +820,8 @@ from contentstore import utils
                           </div>      
                         </div>
                       </div>
-                      <a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a>
-                    </li>
+                      <span class="message-error">The JSON value for $KEYNAME is invalid.</span>
 
-                    <!-- existing pair (upon page load) - we'll need to toggle/remove the .existing class for the normal text color to appear (on blur/save?) -->
-                    <li class="input multi course-advanced-policy-list-item">
-                      <div class="row">
-                        <div class="key existing">
-                          <label for="course-advanced-policy-5-key">Policy Key:</label>
-                          <div class="field">
-                            <input type="text" class="short" id="course-advanced-policy-5-key" value="christina" />
-                          </div>      
-                        </div>
-                        <div class="value existing">
-                          <label for="course-advanced-policy-5-value">Policy Value:</label>
-                          <div class="field">
-                            <textarea class="ace text" id="course-advanced-policy-5-value">is awesome!</textarea>
-                          </div>      
-                        </div>
-                      </div>
                       <a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a>
                     </li>
                   </ul>