Skip to content

E
edx-platform
Commit 7e42512b by cahrens
Options

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

parents bfdbcc2f 3ebd5de7
Showing with 626 additions and 177 deletions
cms/static/sass/elements/_forms.scss
...@@ -124,7 +124,6 @@ code { ...@@ -124,7 +124,6 @@ code {
.CodeMirror { .CodeMirror {
font-size: 13px; font-size: 13px;
border: 1px solid $darkGrey;
background: #fff; background: #fff;
} }
......
cms/static/sass/views/_settings.scss
...@@ -21,7 +21,7 @@ body.course.settings { ...@@ -21,7 +21,7 @@ body.course.settings {
font-size: 14px; font-size: 14px;
} }
.message-status { .message-status {
display: none; display: none;
@include border-top-radius(2px); @include border-top-radius(2px);
@include box-sizing(border-box); @include box-sizing(border-box);
......
cms/static/sass/views/_unit.scss
...@@ -13,6 +13,10 @@ body.course.unit { ...@@ -13,6 +13,10 @@ body.course.unit {
} }
//end problem selector reqs //end problem selector reqs
// Unit Page Main Column
// ====================
.main-column { .main-column {
clear: both; clear: both;
float: left; float: left;
...@@ -31,6 +35,9 @@ body.course.unit { ...@@ -31,6 +35,9 @@ body.course.unit {
.unit-body { .unit-body {
// Unit Page Name
// ====================
.unit-name-input { .unit-name-input {
padding: 20px 40px; padding: 20px 40px;
...@@ -73,6 +80,10 @@ body.course.unit { ...@@ -73,6 +80,10 @@ body.course.unit {
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
} }
// Component List Meta
// ====================
// TODO: clean up organization of this page, to many levels/duplication
.components { .components {
...@@ -81,8 +92,6 @@ body.course.unit { ...@@ -81,8 +92,6 @@ body.course.unit {
z-index: 10; z-index: 10;
margin: 20px 40px; margin: 20px 40px;
.title { .title {
margin: 0 0 15px 0; margin: 0 0 15px 0;
color: $mediumGrey; color: $mediumGrey;
...@@ -91,6 +100,9 @@ body.course.unit { ...@@ -91,6 +100,9 @@ body.course.unit {
} }
} }
// New Components
// ====================
&.new-component-item { &.new-component-item {
margin: 20px 0px; margin: 20px 0px;
border-top: 1px solid $mediumGrey; border-top: 1px solid $mediumGrey;
...@@ -355,6 +367,9 @@ body.course.unit { ...@@ -355,6 +367,9 @@ body.course.unit {
} }
} }
// Component Drag and Drop, Non-Edit Module Rendering, Styling
// ====================
.component { .component {
border: 1px solid $lightBluishGrey2; border: 1px solid $lightBluishGrey2;
border-radius: 3px; border-radius: 3px;
...@@ -410,33 +425,22 @@ body.course.unit { ...@@ -410,33 +425,22 @@ body.course.unit {
} }
} }
// Component Editing
// ====================
.wrapper-component-editor { .wrapper-component-editor {
z-index: 9999; z-index: 9999;
position: relative; position: relative;
background: $lightBluishGrey2; background: $white;
} }
.component-editor { .component-editor {
@include edit-box; @include edit-box;
@include box-shadow(none); @include box-shadow(none);
display: none; display: none;
padding: 20px; padding: 0;
border-radius: 2px 2px 0 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 { h3 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 18px; font-size: 18px;
...@@ -449,232 +453,507 @@ body.course.unit { ...@@ -449,232 +453,507 @@ body.course.unit {
font-weight: 700; font-weight: 700;
} }
.save-button { // Module Actions
margin-top: 10px; .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; margin: 15px 8px 0 0;
}
} }
} }
} }
}
.unit-settings { // Edit Header (Component Name, Mode-Editor, Mode-Settings)
.window-contents {
padding: 10px 20px;
}
.unit-actions { .component-edit-header {
border-bottom: none; @include box-sizing(border-box);
padding-bottom: 0; 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 { //Nav-Edit Modes
display: none; .nav-edit-modes {
padding: 10px; list-style: none;
border: 1px solid #edbd3c; right: 0;
border-radius: 3px; top: 0;
background: #fbf6e1; position: absolute;
font-size: 14px; padding: 10px;
line-height: 1.4;
.mode {
display: inline-block;
div { .inactive-mode {
margin-top: 15px; display: none;
} }
}
input[type="radio"] { .active-mode {
margin-right: 7px; @include blue-button;
} }
.status { .is-set {
font-size: 12px; @include linear-gradient($blue, $blue);
box-shadow: inset 0 0 3px $shadow;
background-color: $blue;
strong { cursor: default;
font-weight: 700;
&:hover {
box-shadow: inset 0 0 3px $shadow;
background-color: $blue;
}
} }
} }
}
}
.preview-button, .view-button { // Editor Wrapper
@include white-button; .wrapper-comp-editor {
margin-bottom: 10px; //TO-DO
} }
.publish-button { // Settings Wrapper
@include orange-button; .wrapper-comp-settings {
}
.delete-button { //settings-list
@include blue-button; .list-input.settings-list {
} margin: 0;
padding: 0;
list-style: none;
.delete-draft { overflow: auto;
display: inline-block; max-height: 400px;
//chrome scrollbar visibility correction
&::-webkit-scrollbar {
-webkit-appearance: none;
width: 11px;
height: 11px;
} }
.delete-button, &::-webkit-scrollbar-thumb {
.preview-button, border-radius: 8px;
.publish-button, border: 2px solid $gray-l2;
.view-button { background-color: rgba(0, 0, 0, .5);
font-size: 11px;
margin-top: 10px;
padding: 6px 15px 8px;
} }
}
.unit-history { //component-setting-entry
&.collapsed { .field.comp-setting-entry {
h4 { //margin: 0 0 $baseline 0; WILL BE REMOVED PRIOR TO PUSH
border-bottom: none; background-color: $white;
border-radius: 3px; padding: 20px;
} border-bottom: 1px solid $gray-l2;
opacity: .6;
.window-contents { &:last-child {
display: none; //margin-bottom: 0;
} }
}
ol { //no required component settings currently
border: 1px solid #ced2db; &.required {
label {
//font-weight: 600;
}
label:after {
//margin-left: ($baseline/4);
//content: "*";
}
}
li { &:hover {
display: block; //TO-DO review existing patterns for hover on field
padding: 6px 8px 8px 10px; @include transition(opacity 0.25s ease-in-out);
background: #edf1f5; opacity: 1;
font-size: 12px; }
&:hover { &.is-set {
background: #fffcf1; opacity: 1;
background-color: $white;
.item-actions { //setting-label
display: block; .setting-label {
} //color: $blue-l1;
} }
&.checked { //setting-input
background: #d1dae3; .setting-input {
color: $blue-l1;
} }
.item-actions { //setting-clear
display: none; .setting-clear {
//...
} }
}
input[type="radio"] { .wrapper-comp-setting{
margin-right: 7px; display: inline-block;
} width: 360px;
top: 0;
vertical-align: top;
} }
}
}
.unit-location { label.setting-label {
.url { @extend .t-copy-sub1;
width: 100%; @include transition(color, 0.15s, ease-in-out);
margin-bottom: 10px; //margin: 0 0 ($baseline/4) 0; WILL BE REMOVED PRIOR TO PUSH
@include box-shadow(none); font-weight: 400;
}
.draft-tag, display: inline-block;
.hidden-tag, position: relative;
.private-tag, left: 0;
.has-new-draft-tag { min-width: 100px;
font-size: 8px; width: 35%;
}
.window-contents > ol { &.is-focused {
@include tree-view; color: $blue;
}
}
.section-item { input, select {
display: inline-block; @include placeholder($gray-l4);
width: 100%; @include font-size(16);
font-size: 11px; @include size(100%,100%);
padding: 2px 8px 4px; 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; text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@include box-sizing(border-box);
} }
ol { select {
.section-item { //border: 1px solid $gray-l2;
padding-left: 20px; 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 { &:active {
margin-left: 20px; background-color: #FFFCF1;
} }
} }
ol ol { //input[type=others]
.section-item {
padding-left: 34px; .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 { &.inactive {
margin: 0 0 10px 41px; 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 { // Editing Units from Courseware
.visibility, // ====================
.edit-draft-message, body.unit {
.view-button {
display: none; .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 { &.editing {
display: block; padding-top: 0;
} }
} }
}
.edit-state-public { // Unit Page Sidebar
.delete-draft, // ====================
.component-actions,
.new-component-item,
.editing-draft-alert,
.publish-draft-message,
.preview-button {
display: none;
}
.published-alert { .unit-settings {
display: block; .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 { strong {
display: none !important; font-weight: 700;
} }
} }
.edit-state-private { .preview-button, .view-button {
.delete-draft, @include white-button;
.publish-draft, margin-bottom: 10px;
.editing-draft-alert, }
.create-draft,
.view-button { .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; 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 .unit-location {
body.unit { .url {
@include box-shadow(none);
width: 100%;
margin-bottom: 10px;
}
.component { .draft-tag,
padding-top: 30px; .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); @include box-sizing(border-box);
position: absolute; display: inline-block;
width: 100%; width: 100%;
padding: 15px; font-size: 11px;
top: 0; padding: 2px 8px 4px;
left: 0; text-overflow: ellipsis;
border-bottom: 1px solid $lightBluishGrey2; white-space: nowrap;
background: $lightGrey; overflow: hidden;
} }
&.editing { ol {
padding-top: 0; .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
<div class="wrapper wrapper-component-editor"> <div class="wrapper wrapper-component-editor">
<div class="component-editor"> <div class="component-editor">
<div class="module-editor"> <div class="component-edit-header">
${editor} <span class="component-name"><em>Editing:</em> Name of Component</span>
</div> <!--should this be a menubar/menu/tabbar instead of list? -->
<div class="row module-actions"> <ul class="nav-edit-modes">
<a href="#" class="save-button">Save</a> <li id="editor-mode" class="mode" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
<a href="#" class="cancel-button">Cancel</a> <a href="#" class="active-mode is-set">Editor</a>
</div> </li>
</div> <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>
<div class="component-actions"> <div class="component-actions">
......
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