Skip to content

E
edx-platform
Commit 0e17d16d by Brian Talbot
Options

studio - advanced settings - added in several more static states and firmed up… 

studio - advanced settings - added in several more static states and firmed up key/value pair styling specifically
parent 06439c7b
Showing with 117 additions and 23 deletions
cms/static/sass/_settings.scss
......@@ -562,6 +562,14 @@
margin: 0;
border: none;
padding: 0;
// existing fields
&.existing {
input, textarea {
color: $mediumGrey;
}
}
}
.key {
......@@ -589,6 +597,35 @@
}
}
}
.message-error {
margin: 0 0 10px 0;
}
}
.actions {
@include clearfix();
margin-top: 15px;
border-top: 1px solid $lightGrey;
padding-top: 15px;
.save-button {
float: left;
@include blue-button;
margin-right: 10px;
padding-top: 8px;
padding-bottom: 8px;
}
.cancel-button {
float: left;
@include white-button;
margin-top: 4px;
}
.new-button {
float: right;
}
}
}
......@@ -619,10 +656,14 @@
// }
// }
input.error, textarea.error {
input.error, textarea.error, .error input, .error textarea {
border-color: $red;
}
.error label {
color: $red;
}
.message-error {
display: block;
margin-top: 5px;
......
cms/templates/settings.html
......@@ -729,69 +729,108 @@ from contentstore import utils
<section class="settings-advanced-policies">
<header>
<h3>Additional Policy Definition</h3>
<span class="detail">Manually Edit Course Policy Values</span>
<h3>Manual Policy Definition</h3>
<span class="detail">Manually Edit Course Policy Values (JSON Key and Pair values)</span>
</header>
<p class="instructions"><strong>Warning</strong>: Add only manual policy data that you are familiar with.</p>
<div class="row">
<div class="field enum">
<!-- basic empty & initial empty field (if user had no values yet) -->
<ul class="input-list course-advanced-policy-list">
<li class="input multi course-advanced-policy-list-item">
<div class="row">
<div class="key">
<label for="course-advanced-policy-1-key" class="">Policy Key:</label>
<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="" />
</div>
</div>
<div class="value">
<label for="course-advanced-policy-1-value" class="">Policy Value:</label>
<label for="course-advanced-policy-1-value">Policy Value:</label>
<div class="field">
<textarea class="ace text" id="course-advanced-policy-1-value" value=""></textarea>
<textarea class="ace text" id="course-advanced-policy-1-value"></textarea>
</div>
</div>
</div>
<a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a>
</li>
<!-- 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-1-key" class="">Policy Key:</label>
<label for="course-advanced-policy-2-key">Policy Key:</label>
<div class="field">
<input type="text" class="short" id="course-advanced-policy-1-key" value="" />
<input type="text" class="short" id="course-advanced-policy-2-key" value="" />
</div>
</div>
<div class="value">
<label for="course-advanced-policy-1-value" class="">Policy Value:</label>
<label for="course-advanced-policy-2-value">Policy Value:</label>
<div class="field">
<textarea class="ace text" id="course-advanced-policy-1-value" value=""></textarea>
<textarea class="ace text" id="course-advanced-policy-2-value"></textarea>
</div>
</div>
</div>
<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="" />
</div>
</div>
<div class="value error">
<label for="course-advanced-policy-3-value">Policy Value:</label>
<div class="field">
<textarea class="ace text" id="course-advanced-policy-3-value"></textarea>
</div>
</div>
</div>
<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">
<label for="course-advanced-policy-1-key" class="">Policy Key:</label>
<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-1-key" value="" />
<input type="text" class="short" id="course-advanced-policy-4-key" value="" />
</div>
</div>
<div class="value error">
<label for="course-advanced-policy-4-value">Policy Value:</label>
<div class="field">
<textarea class="ace text" id="course-advanced-policy-4-value" value=""></textarea>
</div>
</div>
</div>
<a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a>
</li>
<div class="value">
<label for="course-advanced-policy-1-value" class="">Policy Value:</label>
<!-- 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">
<textarea class="ace text" id="course-advanced-policy-1-value" value=""></textarea>
<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>
......@@ -799,9 +838,23 @@ from contentstore import utils
</li>
</ul>
<a href="#" class="new-button new-advanced-policy-item add-policy-data">
<span class="plus-icon white"></span>New Manual Policy
</a>
<!-- advanced policy actions -->
<div class="actions actions-advanced-policies">
<a href="#" class="save-button">Save</a>
<a href="#" class="cancel-button">Cancel</a>
<a href="#" class="new-button new-advanced-policy-item add-policy-data">
<span class="plus-icon white"></span>New Manual Policy
</a>
</div>
<!-- advanced policy actions (with disabled save state) -->
<div class="actions actions-advanced-policies">
<a href="#" class="save-button disabled">Save</a>
<a href="#" class="cancel-button">Cancel</a>
<a href="#" class="new-button new-advanced-policy-item add-policy-data">
<span class="plus-icon white"></span>New Manual Policy
</a>
</div>
</div>
</div>
</section><!-- .settings-advanced-policies -->
......
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