Commit 7d871ddf by Brian Talbot

studio - revised manual policy UI: added key tips on focus, moved error messages…

studio - revised manual policy UI: added key tips on focus, moved error messages to bottom of pairings
parent 0e17d16d
...@@ -582,6 +582,18 @@ ...@@ -582,6 +582,18 @@
input { input {
width: 100%; width: 100%;
} }
.tip {
@include transition (opacity 0.5s ease-in-out 0s);
opacity: 0;
}
input:focus {
& + .tip {
opacity: 1.0;
}
}
} }
} }
...@@ -599,6 +611,7 @@ ...@@ -599,6 +611,7 @@
} }
.message-error { .message-error {
float: left;
margin: 0 0 10px 0; margin: 0 0 10px 0;
} }
} }
......
...@@ -746,6 +746,7 @@ from contentstore import utils ...@@ -746,6 +746,7 @@ from contentstore import utils
<label for="course-advanced-policy-1-key">Policy Key:</label> <label for="course-advanced-policy-1-key">Policy Key:</label>
<div class="field"> <div class="field">
<input type="text" class="short" id="course-advanced-policy-1-key" value="" /> <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> </div>
<div class="value"> <div class="value">
...@@ -760,12 +761,12 @@ from contentstore import utils ...@@ -760,12 +761,12 @@ from contentstore import utils
<!-- error existing key pair example --> <!-- error existing key pair example -->
<li class="input multi course-advanced-policy-list-item"> <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="row">
<div class="key"> <div class="key">
<label for="course-advanced-policy-2-key">Policy Key:</label> <label for="course-advanced-policy-2-key">Policy Key:</label>
<div class="field"> <div class="field">
<input type="text" class="short" id="course-advanced-policy-2-key" value="" /> <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> </div>
<div class="value"> <div class="value">
...@@ -775,17 +776,19 @@ from contentstore import utils ...@@ -775,17 +776,19 @@ from contentstore import utils
</div> </div>
</div> </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> <a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a>
</li> </li>
<!-- error on key left empty example --> <!-- error on key left empty example -->
<li class="input multi course-advanced-policy-list-item"> <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="row">
<div class="key error"> <div class="key error">
<label for="course-advanced-policy-3-key">Policy Key:</label> <label for="course-advanced-policy-3-key">Policy Key:</label>
<div class="field"> <div class="field">
<input type="text" class="short" id="course-advanced-policy-3-key" value="" /> <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> </div>
<div class="value error"> <div class="value error">
...@@ -795,18 +798,20 @@ from contentstore import utils ...@@ -795,18 +798,20 @@ from contentstore import utils
</div> </div>
</div> </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> <a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a>
</li> </li>
<!-- error with value formatting example --> <!-- error with value formatting example -->
<li class="input multi course-advanced-policy-list-item"> <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="row">
<div class="key error"> <div class="key error">
<label for="course-advanced-policy-4-key">Policy Key:</label> <label for="course-advanced-policy-4-key">Policy Key:</label>
<div class="field"> <div class="field">
<input type="text" class="short" id="course-advanced-policy-4-key" value="" /> <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>
<div class="value error"> <div class="value error">
<label for="course-advanced-policy-4-value">Policy Value:</label> <label for="course-advanced-policy-4-value">Policy Value:</label>
...@@ -815,25 +820,8 @@ from contentstore import utils ...@@ -815,25 +820,8 @@ from contentstore import utils
</div> </div>
</div> </div>
</div> </div>
<a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a> <span class="message-error">The JSON value for $KEYNAME is invalid.</span>
</li>
<!-- 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> <a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a>
</li> </li>
</ul> </ul>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment