Skip to content

E
edx-platform
Commit 453e249f by Brian Talbot
Options

studio - manual policy editor: converting to new page layout - WIP

parent cbc0406d
Showing with 208 additions and 232 deletions
cms/static/client_templates/advanced_entry.html
<li class="input multi course-advanced-policy-list-item">
<div class="row">
<div class="key" id="<%= (_.isEmpty(key) ? '__new_advanced_key__' : key) %>">
<label for="course-advanced-policy-key">Policy Key:</label>
<div class="field">
<input type="text" class="short" id="course-advanced-policy-key" value="<%= key %>" />
<span class="tip tip-stacked">Keys are case sensitive and cannot contain spaces or start with a number</span>
</div>
</div>
<div class="value">
<label for="course-advanced-policy-value">Policy Value:</label>
<div class="field">
<textarea class="json text" id="course-advanced-policy-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 class="field-group course-advanced-policy-list-item">
<div class="field text key" id="<%= (_.isEmpty(key) ? '__new_advanced_key__' : key) %>">
<label for="course-advanced-policy-key">Policy Key:</label>
<input type="text" class="short" id="course-advanced-policy-key" value="<%= key %>" />
<span class="tip tip-stacked">Keys are case sensitive and cannot contain spaces or start with a number</span>
</div>
<div class="field text value">
<label for="course-advanced-policy-value">Policy Value:</label>
<textarea class="json text" id="course-advanced-policy-value"><%= value %></textarea>
</div>
<div class="actions">
<a href="#" class="button delete-button standard remove-item remove-grading-data"><span class="delete-icon"></span>Delete</a>
</div>
</li>
\ No newline at end of file
cms/static/sass/_settings.scss
......@@ -46,6 +46,11 @@ body.course.settings {
}
// UI hints/tips/messages
.instructions {
@include font-size(14);
margin: 0 0 $baseline 0;
}
.tip {
@include transition(color, 0.15s, ease-in-out);
@include font-size(13);
......@@ -62,6 +67,43 @@ body.course.settings {
color: $red;
}
// messages - should be synced up with global messages in the future
.message {
display: block;
font-size: 14px;
}
.message-status {
display: none;
@include border-top-radius(2px);
@include box-sizing(border-box);
border-bottom: 2px solid $yellow;
margin: 0 0 20px 0;
padding: 10px 20px;
font-weight: 500;
background: $paleYellow;
.text {
display: inline-block;
}
&.error {
border-color: shade($red, 50%);
background: tint($red, 20%);
color: $white;
}
&.confirm {
border-color: shade($green, 50%);
background: tint($green, 20%);
color: $white;
}
&.is-shown {
display: block;
}
}
// buttons
.remove-item {
@include white-button;
......@@ -576,108 +618,13 @@ body.course.settings {
}
}
}
}
.content-supplementary {
width: flex-grid(3, 12);
}
.settings-advanced {
// specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
.CodeMirror {
padding: 6px 8px;
@include box-sizing(border-box);
border: 1px solid $mediumGrey;
border-radius: 2px;
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
background-color: $lightGrey;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
font-family: 'Open Sans', sans-serif;
color: $baseFontColor;
outline: 0;
.CodeMirror-scroll {
height: auto;
min-height: 20px;
max-height: 200px;
}
// editor color changes just for JSON
.CodeMirror-lines {
.cm-string {
color: #cb9c40;
}
pre {
margin-bottom: 5px;
}
}
}
// messages - should be synced up with global messages in the future
.message {
display: block;
font-size: 14px;
}
.message-status {
display: none;
@include border-top-radius(2px);
@include box-sizing(border-box);
border-bottom: 2px solid $yellow;
margin: 0 0 20px 0;
padding: 10px 20px;
font-weight: 500;
background: $paleYellow;
.text {
display: inline-block;
}
&.error {
border-color: shade($red, 50%);
background: tint($red, 20%);
color: $white;
}
&.confirm {
border-color: shade($green, 50%);
background: tint($green, 20%);
color: $white;
}
&.is-shown {
display: block;
}
}
.course-advanced-policy-list {
// specific fields - advanced settings
&.advanced-policies {
.row {
.course-advanced-policy-list-item {
@include clearfix();
}
.key, .value {
margin: 0;
border: none;
padding: 0;
// existing fields
&.existing {
input, textarea {
color: $mediumGrey;
}
}
}
.key {
float: left;
width: 30%;
margin-right: 5px;
position: relative;
.field {
......@@ -706,55 +653,72 @@ body.course.settings {
}
}
}
}
.value {
float: right;
width: 65%;
.key, .value {
float: left;
margin: 0 0 ($baseline/2) 0;
}
.field {
.key {
width: flex-grid(3, 9);
margin-right: flex-gutter();
}
textarea {
width: 100%;
height: 100px;
}
.value {
width: flex-grid(6, 9);
}
}
.message-error {
position: absolute;
bottom: 10px;
margin: 0 0 10px 0;
.actions {
float: left;
width: flex-grid(9, 9);
.delete-button {
margin: 0;
}
}
}
}
.course-advanced-policy-list-item {
position: relative;
}
// specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
.CodeMirror {
@include font-size(16);
@include box-sizing(border-box);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
padding: 6px 8px;
border: 1px solid $mediumGrey;
border-radius: 2px;
background-color: $lightGrey;
font-family: 'Open Sans', sans-serif;
color: $baseFontColor;
outline: 0;
&.CodeMirror-focused {
@include linear-gradient($paleYellow, tint($paleYellow, 90%));
outline: 0;
}
.actions {
@include clearfix();
margin-top: 15px;
border-top: 1px solid $lightGrey;
padding-top: 15px;
.CodeMirror-scroll {
height: auto;
min-height: ($baseline*1.5);
max-height: ($baseline*10);
}
.save-button {
float: left;
@include blue-button;
margin-right: 10px;
padding-top: 8px;
padding-bottom: 8px;
}
// editor color changes just for JSON
.CodeMirror-lines {
.cancel-button {
float: left;
@include white-button;
margin-top: 4px;
}
.cm-string {
color: #cb9c40;
}
.new-button {
float: right;
pre {
margin-bottom: ($baseline/4);
}
}
}
}
}
.content-supplementary {
width: flex-grid(3, 12);
}
}
\ No newline at end of file
cms/templates/settings.html
......@@ -23,7 +23,8 @@ from contentstore import utils
<script type="text/javascript">
$(document).ready(function(){
// hilighting labels when fields are focused in
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("is-focused");
}).blur(function() {
......
cms/templates/settings_advanced.html
......@@ -17,93 +17,103 @@ from contentstore import utils
<script type="text/javascript" src="${static.url('js/views/settings/advanced_view.js')}"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).ready(function () {
// proactively populate advanced b/c it has the filtered list and doesn't really follow the model pattern
var advancedModel = new CMS.Models.Settings.Advanced(${advanced_dict | n}, {parse: true});
advancedModel.blacklistKeys = ${advanced_blacklist | n};
advancedModel.url = "${reverse('course_advanced_settings_updates', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}";
// hilighting labels when fields are focused in
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("is-focused");
}).blur(function() {
$("label").removeClass("is-focused");
});
var editor = new CMS.Views.Settings.Advanced({
el: $('.settings-advanced'),
model: advancedModel
});
// proactively populate advanced b/c it has the filtered list and doesn't really follow the model pattern
var advancedModel = new CMS.Models.Settings.Advanced(${advanced_dict | n}, {parse: true});
advancedModel.blacklistKeys = ${advanced_blacklist | n};
advancedModel.url = "${reverse('course_advanced_settings_updates', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}";
editor.render();
var editor = new CMS.Views.Settings.Advanced({
el: $('.settings-advanced'),
model: advancedModel
});
});
editor.render();
});
</script>
</%block>
<%block name="content">
<div class="wrapper-content wrapper">
<section class="content">
<header class="page">
<span class="title-sub">Settings</span>
<h1 class="title-1">Advanced</h1>
</header>
<article class="content-primary" role="main">
<section class="settings-advanced">
<div class="message message-status confirm is-shown">
Your policy changes have been saved.
</div>
<div class="message message-status error is-shown">
There was an error saving your information. Please see below.
</div>
<section class="settings-advanced-policies">
<header>
<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">
</ul>
<!-- advanced policy actions -->
<div class="actions actions-advanced-policies">
<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 -->
</section>
</article>
<!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-warning">
<div class="notification warning">
<div class="copy">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<p><strong>Note: </strong>Your changes will not take effect until you <strong>save your
progress</strong>.</p>
</div>
<div class="actions">
<ul>
<li><a href="#" class="save-button">Save</a></li>
<li><a href="#" class="cancel-button">Cancel</a></li>
</ul>
</div>
</div>
</div>
</section>
<section class="content">
<header class="page">
<span class="title-sub">Settings</span>
<h1 class="title-1">Advanced</h1>
</header>
<article class="content-primary" role="main">
<form id="settings_advanced" class="settings-advanced" method="post" action="">
<section class="group-settings advanced-policies">
<header>
<h2 class="title-2">Manual Policy Definition</h2>
<span class="tip">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>
<ul class="list-input course-advanced-policy-list enum">
</ul>
<div class="actions">
<a href="#" class="button new-button new-advanced-policy-item add-policy-data">
<span class="plus-icon white"></span>New Manual Policy
</a>
</div>
</section>
</form>
</article>
<aside class="content-supplementary" role="complimentary">
<div class="bit">
<h3 class="title-3">How will these settings be used</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
</div>
<div class="bit">
% if context_course:
<% ctx_loc = context_course.location %>
<%! from django.core.urlresolvers import reverse %>
<h3 class="title-3">Other Course Settings</h3>
<nav class="nav-related">
<ul>
<li class="nav-item"><a href="${reverse('contentstore.views.get_course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Details &amp; Schedule</a></li>
<li class="nav-item"><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
</ul>
</nav>
% endif
</div>
</aside>
</section>
</div>
<!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-warning">
<div class="notification warning">
<div class="copy">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<p><strong>Note: </strong>Your changes will not take effect until you <strong>save your
progress</strong>.</p>
</div>
<div class="actions">
<ul>
<li><a href="#" class="save-button">Save</a></li>
<li><a href="#" class="cancel-button">Cancel</a></li>
</ul>
</div>
</div>
</div>
</%block>
\ No newline at end of file
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