Skip to content
Snippets Groups Projects
Commit 7e42512b authored by cahrens's avatar cahrens
Browse files

Merge branch 'ux/marco/studio-componentsettings' into feature/christina/metadata-ui

parents bfdbcc2f 3ebd5de7
No related merge requests found
Hide whitespace changes
Inline Side-by-side
cms/static/sass/elements/_forms.scss
+ 0
− 1
View file @ 7e42512b
......@@ -124,7 +124,6 @@ code {
.CodeMirror {
font-size: 13px;
border: 1px solid $darkGrey;
background: #fff;
}
......
cms/static/sass/views/_settings.scss
+ 1
− 1
View file @ 7e42512b
......@@ -21,7 +21,7 @@ body.course.settings {
font-size: 14px;
}
.message-status {
.message-status {
display: none;
@include border-top-radius(2px);
@include box-sizing(border-box);
......
cms/static/sass/views/_unit.scss
+ 446
− 167
View file @ 7e42512b
......@@ -13,6 +13,10 @@ body.course.unit {
}
//end problem selector reqs
// Unit Page Main Column
// ====================
.main-column {
clear: both;
float: left;
......@@ -31,6 +35,9 @@ body.course.unit {
.unit-body {
// Unit Page Name
// ====================
.unit-name-input {
padding: 20px 40px;
......@@ -73,6 +80,10 @@ body.course.unit {
letter-spacing: 1px;
text-transform: uppercase;
}
// Component List Meta
// ====================
// TODO: clean up organization of this page, to many levels/duplication
.components {
......@@ -81,8 +92,6 @@ body.course.unit {
z-index: 10;
margin: 20px 40px;
.title {
margin: 0 0 15px 0;
color: $mediumGrey;
......@@ -91,6 +100,9 @@ body.course.unit {
}
}
// New Components
// ====================
&.new-component-item {
margin: 20px 0px;
border-top: 1px solid $mediumGrey;
......@@ -355,6 +367,9 @@ body.course.unit {
}
}
// Component Drag and Drop, Non-Edit Module Rendering, Styling
// ====================
.component {
border: 1px solid $lightBluishGrey2;
border-radius: 3px;
......@@ -410,33 +425,22 @@ body.course.unit {
}
}
// Component Editing
// ====================
.wrapper-component-editor {
z-index: 9999;
position: relative;
background: $lightBluishGrey2;
background: $white;
}
.component-editor {
@include edit-box;
@include box-shadow(none);
display: none;
padding: 20px;
padding: 0;
border-radius: 2px 2px 0 0;
.metadata_edit {
margin-bottom: 20px;
font-size: 13px;
li {
margin-bottom: 10px;
}
label {
display: inline-block;
margin-right: 10px;
}
}
h3 {
margin-bottom: 10px;
font-size: 18px;
......@@ -449,232 +453,507 @@ body.course.unit {
font-weight: 700;
}
.save-button {
margin-top: 10px;
// Module Actions
.module-actions {
@include box-shadow(inset 0 1px 1px $shadow);
padding: 0px 0 10px 10px;
background-color: $gray-l4;
.save-button {
margin: 15px 8px 0 0;
}
}
}
}
}
.unit-settings {
.window-contents {
padding: 10px 20px;
}
// Edit Header (Component Name, Mode-Editor, Mode-Settings)
.unit-actions {
border-bottom: none;
padding-bottom: 0;
.component-edit-header {
@include box-sizing(border-box);
padding: 15px 0 15px 20px;
top: 0;
right: 0;
border-bottom: 1px solid $gray-l2;
background-color: $blue;
color: $white;
box-shadow: 0 1px 2px rgba(182, 182, 182, 0.75) inset;
//Component Name
.component-name {
@extend .t-copy-sub1;
color: $white;
width: 50%;
em {
font-weight: 600;
color: $white;
}
}
.published-alert {
display: none;
padding: 10px;
border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
font-size: 14px;
line-height: 1.4;
//Nav-Edit Modes
.nav-edit-modes {
list-style: none;
right: 0;
top: 0;
position: absolute;
padding: 10px;
.mode {
display: inline-block;
div {
margin-top: 15px;
.inactive-mode {
display: none;
}
}
input[type="radio"] {
margin-right: 7px;
}
.active-mode {
@include blue-button;
}
.status {
font-size: 12px;
.is-set {
@include linear-gradient($blue, $blue);
box-shadow: inset 0 0 3px $shadow;
background-color: $blue;
strong {
font-weight: 700;
cursor: default;
&:hover {
box-shadow: inset 0 0 3px $shadow;
background-color: $blue;
}
}
}
}
}
.preview-button, .view-button {
@include white-button;
margin-bottom: 10px;
}
// Editor Wrapper
.wrapper-comp-editor {
//TO-DO
}
.publish-button {
@include orange-button;
}
// Settings Wrapper
.wrapper-comp-settings {
.delete-button {
@include blue-button;
}
//settings-list
.list-input.settings-list {
margin: 0;
padding: 0;
list-style: none;
.delete-draft {
display: inline-block;
overflow: auto;
max-height: 400px;
//chrome scrollbar visibility correction
&::-webkit-scrollbar {
-webkit-appearance: none;
width: 11px;
height: 11px;
}
.delete-button,
.preview-button,
.publish-button,
.view-button {
font-size: 11px;
margin-top: 10px;
padding: 6px 15px 8px;
&::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid $gray-l2;
background-color: rgba(0, 0, 0, .5);
}
}
.unit-history {
&.collapsed {
h4 {
border-bottom: none;
border-radius: 3px;
}
//component-setting-entry
.field.comp-setting-entry {
//margin: 0 0 $baseline 0; WILL BE REMOVED PRIOR TO PUSH
background-color: $white;
padding: 20px;
border-bottom: 1px solid $gray-l2;
opacity: .6;
.window-contents {
display: none;
&:last-child {
//margin-bottom: 0;
}
}
ol {
border: 1px solid #ced2db;
//no required component settings currently
&.required {
label {
//font-weight: 600;
}
label:after {
//margin-left: ($baseline/4);
//content: "*";
}
}
li {
display: block;
padding: 6px 8px 8px 10px;
background: #edf1f5;
font-size: 12px;
&:hover {
//TO-DO review existing patterns for hover on field
@include transition(opacity 0.25s ease-in-out);
opacity: 1;
}
&:hover {
background: #fffcf1;
&.is-set {
opacity: 1;
background-color: $white;
.item-actions {
display: block;
}
//setting-label
.setting-label {
//color: $blue-l1;
}
&.checked {
background: #d1dae3;
//setting-input
.setting-input {
color: $blue-l1;
}
.item-actions {
display: none;
//setting-clear
.setting-clear {
//...
}
}
input[type="radio"] {
margin-right: 7px;
}
.wrapper-comp-setting{
display: inline-block;
width: 360px;
top: 0;
vertical-align: top;
}
}
}
.unit-location {
.url {
width: 100%;
margin-bottom: 10px;
@include box-shadow(none);
}
label.setting-label {
@extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
//margin: 0 0 ($baseline/4) 0; WILL BE REMOVED PRIOR TO PUSH
font-weight: 400;
.draft-tag,
.hidden-tag,
.private-tag,
.has-new-draft-tag {
font-size: 8px;
}
display: inline-block;
position: relative;
left: 0;
min-width: 100px;
width: 35%;
.window-contents > ol {
@include tree-view;
&.is-focused {
color: $blue;
}
}
.section-item {
display: inline-block;
width: 100%;
font-size: 11px;
padding: 2px 8px 4px;
input, select {
@include placeholder($gray-l4);
@include font-size(16);
@include size(100%,100%);
padding: ($baseline/2);
min-width: 100px;
width: 45%;
//&.long {
//
//}
//&.short {
//}
//&.error {
// border-color: $red;
//}
//&:focus {
// + .tip {
// color: $gray;
// }
border-radius: 3px;
border: 1px solid $gray-l2;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@include box-sizing(border-box);
}
ol {
.section-item {
padding-left: 20px;
select {
//border: 1px solid $gray-l2;
background: none repeat scroll #F2F2F2;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
&:focus {
@include box-shadow(0 0 1px $shadow);
@include transition(opacity 0.25s ease-in-out);
background-color: #FFFCF1;
}
.new-unit-item {
margin-left: 20px;
&:active {
background-color: #FFFCF1;
}
}
ol ol {
.section-item {
padding-left: 34px;
//input[type=others]
.action.setting-clear {
@include font-size(11);
color: $gray;
width: 25px;
height: 25px;
vertical-align: middle;
padding: 5px;
border-radius: 50%;
margin: 0 10px;
box-shadow: none;
text-shadow: none;
border: 1px solid $gray-l4;
&:hover {
@include box-shadow(0 1px 1px $shadow);
@include transition(opacity 0.25s ease-in-out);
background-color: $blue-s3;
border: 1px solid $blue-s3;
color: $white;
}
.new-unit-item {
margin: 0 0 10px 41px;
&.inactive {
visibility: hidden;
}
}
tip.setting-help {
@include font-size(12);
display: inline-block;
font-color: $gray-l6;
//max-width: 50%;
vertical-align: top;
}
}
}
}
.edit-state-draft {
.visibility,
// Editing Units from Courseware
// ====================
.edit-draft-message,
.view-button {
display: none;
body.unit {
.component {
padding-top: 30px;
.component-actions {
@include box-sizing(border-box);
position: absolute;
width: 100%;
padding: 15px;
top: 0;
left: 0;
border-bottom: 1px solid $lightBluishGrey2;
background: $lightGrey;
}
.published-alert {
display: block;
&.editing {
padding-top: 0;
}
}
}
.edit-state-public {
.delete-draft,
.component-actions,
.new-component-item,
.editing-draft-alert,
.publish-draft-message,
.preview-button {
display: none;
}
// Unit Page Sidebar
// ====================
.published-alert {
display: block;
.unit-settings {
.window-contents {
padding: 10px 20px;
}
.unit-actions {
border-bottom: none;
padding-bottom: 0;
}
.published-alert {
display: none;
padding: 10px;
border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
font-size: 14px;
line-height: 1.4;
div {
margin-top: 15px;
}
}
input[type="radio"] {
margin-right: 7px;
}
.status {
font-size: 12px;
.drag-handle {
display: none !important;
strong {
font-weight: 700;
}
}
.edit-state-private {
.delete-draft,
.publish-draft,
.editing-draft-alert,
.create-draft,
.view-button {
.preview-button, .view-button {
@include white-button;
margin-bottom: 10px;
}
.publish-button {
@include orange-button;
}
.delete-button {
@include blue-button;
}
.delete-draft {
display: inline-block;
}
.delete-button,
.preview-button,
.publish-button,
.view-button {
font-size: 11px;
margin-top: 10px;
padding: 6px 15px 8px;
}
}
.unit-history {
&.collapsed {
h4 {
border-bottom: none;
border-radius: 3px;
}
.window-contents {
display: none;
}
}
ol {
border: 1px solid #ced2db;
li {
display: block;
padding: 6px 8px 8px 10px;
background: #edf1f5;
font-size: 12px;
&:hover {
background: #fffcf1;
.item-actions {
display: block;
}
}
&.checked {
background: #d1dae3;
}
.item-actions {
display: none;
}
input[type="radio"] {
margin-right: 7px;
}
}
}
}
// editing units from courseware
body.unit {
.unit-location {
.url {
@include box-shadow(none);
width: 100%;
margin-bottom: 10px;
}
.component {
padding-top: 30px;
.draft-tag,
.hidden-tag,
.private-tag,
.has-new-draft-tag {
font-size: 8px;
}
.component-actions {
.window-contents > ol {
@include tree-view;
.section-item {
@include box-sizing(border-box);
position: absolute;
display: inline-block;
width: 100%;
padding: 15px;
top: 0;
left: 0;
border-bottom: 1px solid $lightBluishGrey2;
background: $lightGrey;
font-size: 11px;
padding: 2px 8px 4px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&.editing {
padding-top: 0;
ol {
.section-item {
padding-left: 20px;
}
.new-unit-item {
margin-left: 20px;
}
}
ol ol {
.section-item {
padding-left: 34px;
}
.new-unit-item {
margin: 0 0 10px 41px;
}
}
}
}
.edit-state-draft {
.visibility,
.edit-draft-message,
.view-button {
display: none;
}
.published-alert {
display: block;
}
}
.edit-state-public {
.delete-draft,
.component-actions,
.new-component-item,
.editing-draft-alert,
.publish-draft-message,
.preview-button {
display: none;
}
.published-alert {
display: block;
}
.drag-handle {
display: none !important;
}
}
.edit-state-private {
.delete-draft,
.publish-draft,
.editing-draft-alert,
.create-draft,
.view-button {
display: none;
}
}
//OLD Meta-data Styling
//TO-DO port over old styling
.metadata_edit {
margin-bottom: 20px;
font-size: 13px;
li {
margin-bottom: 10px;
}
label {
display: inline-block;
margin-right: 10px;
}
}
\ No newline at end of file
cms/templates/component.html
+ 178
− 8
View file @ 7e42512b
<div class="wrapper wrapper-component-editor">
<div class="component-editor">
<div class="module-editor">
${editor}
</div>
<div class="row module-actions">
<a href="#" class="save-button">Save</a>
<a href="#" class="cancel-button">Cancel</a>
</div>
</div>
<div class="component-edit-header">
<span class="component-name"><em>Editing:</em> Name of Component</span>
<!--should this be a menubar/menu/tabbar instead of list? -->
<ul class="nav-edit-modes">
<li id="editor-mode" class="mode" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
<a href="#" class="active-mode is-set">Editor</a>
</li>
<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
<a href="#" class="inactive-mode">Compiler </a>
</li>
<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
<a href="#" class="active-mode">Settings </a>
</li>
</ul>
</div> <!-- Editor Header -->
<div class="component-edit-modes">
<div class="module-editor wrapper-comp-editor" id="editor-tab">
<!--${editor}-->
<!-- no longer are settings imported from metadata-edit.hmtl, ideally? -->
</div> <!-- Editor Wrapper-->
<div class="wrapper-comp-settings" id="settings-tab">
<ul class="list-input settings-list">
<!--% for type in sorted(something.keys()):-->
<!--is-set class applied when user sets value-->
<li class="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-accept_file_upload">Accept File Upload</label>
<select class="input setting-input" id="setting-accept_file_upload" name="Accept File Upload">
<!--% for all in available options -->
<option value="True">True</option>
<option value="False" selected>False</option>
</select>
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="tip setting-help">If disabled, students cannot upload images to be graded with this problem.</span>
</li>
<li class="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-skip_spelling_checks">Basic Quality Filter</label>
<select class="input setting-input" id="setting-skip_spelling_checks" name="Basic Quality Filter">
<!--% for all in available options -->
<option value="True" selected>True</option>
<option value="False">False</option>
</select>
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="tip setting-help">If enabled, submissions with poor spelling, short length, or poor grammar won't be peer reviewed.</span>
</li>
<li class="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-discussion_category">Discussion Area</label>
<input class="input setting-input" type="text" id="setting-discussion_category" value="Defined by Course Template"/>
<!--button clickable if is-set -->
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="tip setting-help">This value specifies the discussion are where this component lives, organized in the left pane of the discussion forum for your course. </span>
</li>
<li class="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-display_name">Display Name</label>
<input class="input setting-input" type="text" id="setting-display_name" placeholder="Unnamed Component"/>
<!--button clickable if is-set -->
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="tip setting-help">This value defines the name of this component, and is shown to students as a tooltip. </span>
</li>
<li class="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-is_graded">Graded</label>
<select class="input setting-input" id="setting-is_graded" name="Graded">
<!--% for all in available options -->
<option value="True">True</option>
<option value="False" selected>False</option>
</select>
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="tip setting-help">If disabled, this problem will not be graded.</span>
</li>
<li class="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-weight">Problem Weight</label>
<input class="input setting-input" type="number" id="setting-weight" placeholder="Not set"/>
<!--button clickable if is-set -->
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="tip setting-help">This value ....needs helpstring....</span>
</li>
<li class="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-rerandomize">Randomization</label>
<select class="input setting-input" id="setting-rerandomize" name="Randomization">
<!--% for all in available options -->
<option value="always" selected>Always</option>
<!--in case value already defaulted -->
<option value="onreset">On Reset</option>
<option value="never">Never</option>
<option value="per_student">Per Student</option>
</select>
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="tip setting-help">Choose from a few different ways to incorporate randomization into this problem.</span>
</li>
<li class="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-showanswer">Show Answer</label>
<select class="input setting-input" id="setting-showanswer" name="Show Answer">
<!--% for all in available options -->
<option value="never">Never</option>
<option value="closed" selected>Closed</option>
<option value="attempted">Attempted</option>
<option value="answered" Answered>Closed</option>
<option value="always">Always</option>
</select>
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="tip setting-help">Choose from a few different options to define whether students interact with the problem's answer. (info icon here) You can define this for every problem in a course.</span>
</li>
<li class="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-sort_key">Sort Order Key</label>
<input class="input setting-input" type="text" id="setting-sort_key" placeholder="Not set"/>
<!--button clickable if is-set -->
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="tip setting-help">You can specify the order of discussion areas in the discussion dropdown menu. Their order is alphabetical, but uses the sort key value instead of their name.</span>
</li>
<li class="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-discussion_target">Subcategory (RENAME?)</label>
<input class="input setting-input" type="text" id="setting-discussion_target" value="Week 1 - Defined by Course Template"/>
<!--button clickable if is-set -->
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="tip setting-help">Specify a subcategory name for this discussion. This name appears in the left pane of the discussion forum for your course.</span>
</li>
</ul>
</div> <!-- Settings Wrapper-->
</div>
<div class="row module-actions">
<a href="#" class="save-button">Save</a>
<a href="#" class="cancel-button">Cancel</a>
</div> <!-- Module Actions-->
</div>
</div>
<div class="component-actions">
......
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