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 144 additions and 172 deletions
cms/static/client_templates/advanced_entry.html
<li class="input multi course-advanced-policy-list-item"> <li class="field-group course-advanced-policy-list-item">
<div class="row"> <div class="field text key" id="<%= (_.isEmpty(key) ? '__new_advanced_key__' : key) %>">
<div class="key" id="<%= (_.isEmpty(key) ? '__new_advanced_key__' : key) %>">
<label for="course-advanced-policy-key">Policy Key:</label> <label for="course-advanced-policy-key">Policy Key:</label>
<div class="field">
<input type="text" class="short" id="course-advanced-policy-key" value="<%= key %>" /> <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> <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"> <div class="field text value">
<label for="course-advanced-policy-value">Policy Value:</label> <label for="course-advanced-policy-value">Policy Value:</label>
<div class="field">
<textarea class="json text" id="course-advanced-policy-value"><%= value %></textarea> <textarea class="json text" id="course-advanced-policy-value"><%= value %></textarea>
</div> </div>
<div class="actions">
<a href="#" class="button delete-button standard remove-item remove-grading-data"><span class="delete-icon"></span>Delete</a>
</div> </div>
</div> <a href="#" class="delete-button standard remove-item advanced-policy-data">
<span class="delete-icon"></span>Delete</a>
</li> </li>
\ No newline at end of file
cms/static/sass/_settings.scss
...@@ -46,6 +46,11 @@ body.course.settings { ...@@ -46,6 +46,11 @@ body.course.settings {
} }
// UI hints/tips/messages // UI hints/tips/messages
.instructions {
@include font-size(14);
margin: 0 0 $baseline 0;
}
.tip { .tip {
@include transition(color, 0.15s, ease-in-out); @include transition(color, 0.15s, ease-in-out);
@include font-size(13); @include font-size(13);
...@@ -62,6 +67,43 @@ body.course.settings { ...@@ -62,6 +67,43 @@ body.course.settings {
color: $red; 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 // buttons
.remove-item { .remove-item {
@include white-button; @include white-button;
...@@ -576,108 +618,13 @@ body.course.settings { ...@@ -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(); @include clearfix();
position: relative;
}
.key, .value {
margin: 0;
border: none;
padding: 0;
// existing fields
&.existing {
input, textarea {
color: $mediumGrey;
}
}
}
.key {
float: left;
width: 30%;
margin-right: 5px;
.field { .field {
...@@ -706,55 +653,72 @@ body.course.settings { ...@@ -706,55 +653,72 @@ body.course.settings {
} }
} }
} }
.key, .value {
float: left;
margin: 0 0 ($baseline/2) 0;
}
.key {
width: flex-grid(3, 9);
margin-right: flex-gutter();
} }
.value { .value {
float: right; width: flex-grid(6, 9);
width: 65%; }
.field { .actions {
float: left;
width: flex-grid(9, 9);
textarea { .delete-button {
width: 100%; margin: 0;
height: 100px;
} }
} }
} }
.message-error { // specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
position: absolute; .CodeMirror {
bottom: 10px; @include font-size(16);
margin: 0 0 10px 0; @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;
} }
.course-advanced-policy-list-item { .CodeMirror-scroll {
position: relative; height: auto;
min-height: ($baseline*1.5);
max-height: ($baseline*10);
} }
.actions { // editor color changes just for JSON
@include clearfix(); .CodeMirror-lines {
margin-top: 15px;
border-top: 1px solid $lightGrey;
padding-top: 15px;
.save-button { .cm-string {
float: left; color: #cb9c40;
@include blue-button;
margin-right: 10px;
padding-top: 8px;
padding-bottom: 8px;
} }
.cancel-button { pre {
float: left; margin-bottom: ($baseline/4);
@include white-button;
margin-top: 4px;
} }
.new-button {
float: right;
} }
} }
} }
}
.content-supplementary {
width: flex-grid(3, 12);
}
} }
\ No newline at end of file
cms/templates/settings.html
...@@ -24,6 +24,7 @@ from contentstore import utils ...@@ -24,6 +24,7 @@ from contentstore import utils
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function(){
// hilighting labels when fields are focused in
$("form :input").focus(function() { $("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("is-focused"); $("label[for='" + this.id + "']").addClass("is-focused");
}).blur(function() { }).blur(function() {
......
cms/templates/settings_advanced.html
...@@ -17,7 +17,14 @@ from contentstore import utils ...@@ -17,7 +17,14 @@ from contentstore import utils
<script type="text/javascript" src="${static.url('js/views/settings/advanced_view.js')}"></script> <script type="text/javascript" src="${static.url('js/views/settings/advanced_view.js')}"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
// hilighting labels when fields are focused in
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("is-focused");
}).blur(function() {
$("label").removeClass("is-focused");
});
// proactively populate advanced b/c it has the filtered list and doesn't really follow the model pattern // 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}); var advancedModel = new CMS.Models.Settings.Advanced(${advanced_dict | n}, {parse: true});
...@@ -29,9 +36,9 @@ from contentstore import utils ...@@ -29,9 +36,9 @@ from contentstore import utils
model: advancedModel model: advancedModel
}); });
editor.render(); editor.render();
}); });
</script> </script>
</%block> </%block>
...@@ -41,53 +48,58 @@ from contentstore import utils ...@@ -41,53 +48,58 @@ from contentstore import utils
<section class="content"> <section class="content">
<header class="page"> <header class="page">
<span class="title-sub">Settings</span> <span class="title-sub">Settings</span>
<h1 class="title-1">Advanced</h1> <h1 class="title-1">Advanced</h1>
</header> </header>
<article class="content-primary" role="main"> <article class="content-primary" role="main">
<section class="settings-advanced"> <form id="settings_advanced" class="settings-advanced" method="post" action="">
<div class="message message-status confirm is-shown"> <section class="group-settings advanced-policies">
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> <header>
<h3>Manual Policy Definition</h3> <h2 class="title-2">Manual Policy Definition</h2>
<span class="detail">Manually Edit Course Policy Values (JSON Key and Pair values)</span> <span class="tip">Manually Edit Course Policy Values (JSON Key and Pair values)</span>
</header> </header>
<p class="instructions"><strong>Warning</strong>: Add only manual policy data that you are familiar <p class="instructions"><strong>Warning</strong>: Add only manual policy data that you are familiar
with.</p> with.</p>
<div class="row"> <ul class="list-input course-advanced-policy-list enum">
<div class="field enum">
<!-- basic empty & initial empty field (if user had no values yet) -->
<ul class="input-list course-advanced-policy-list">
</ul> </ul>
<!-- advanced policy actions --> <div class="actions">
<div class="actions actions-advanced-policies"> <a href="#" class="button new-button new-advanced-policy-item add-policy-data">
<a href="#" class="new-button new-advanced-policy-item add-policy-data">
<span class="plus-icon white"></span>New Manual Policy <span class="plus-icon white"></span>New Manual Policy
</a> </a>
</div> </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>
<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> </div>
</aside>
</section> </section>
<!-- .settings-advanced-policies --> </div>
</section>
</article>
<!-- notification: change has been made and a save is needed --> <!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-warning"> <div class="wrapper wrapper-notification wrapper-notification-warning">
<div class="notification warning"> <div class="notification warning">
<div class="copy"> <div class="copy">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
...@@ -103,7 +115,5 @@ from contentstore import utils ...@@ -103,7 +115,5 @@ from contentstore import utils
</ul> </ul>
</div> </div>
</div> </div>
</div>
</section>
</div> </div>
</%block> </%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