Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #1494 from MITx/feature/marco/addcomponent

Browse Source 
Feature/marco/addcomponent
This commit is contained in:
Christina Roberts
2013-02-15 10:13:24 -08:00
parent 86865a6823 c4586edb2e
commit dceb8fee5e
24 changed files with 374 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cms/djangoapps/contentstore/tests/test_contentstore.py
View File

@@ -401,11 +401,11 @@ class ContentStoreTest(ModuleStoreTestCase):
def test_capa_module(self):
"""Test that a problem treats markdown specially."""
CourseFactory.create(org='MITx', course='999', display_name='Robot Super Course')
course = CourseFactory.create(org='MITx', course='999', display_name='Robot Super Course')
problem_data = {
'parent_location': 'i4x://MITx/999/course/Robot_Super_Course',
'template': 'i4x://edx/templates/problem/Empty'
'template': 'i4x://edx/templates/problem/Blank_Common_Problem'
}
resp = self.client.post(reverse('clone_item'), problem_data)
@@ -429,7 +429,7 @@ class TemplateTestCase(ModuleStoreTestCase):
# insert a bogus template in the store
bogus_template_location = Location('i4x', 'edx', 'templates', 'html', 'bogus')
source_template_location = Location('i4x', 'edx', 'templates', 'html', 'Empty')
source_template_location = Location('i4x', 'edx', 'templates', 'html', 'Blank_HTML_Page')
ms.clone_item(source_template_location, bogus_template_location)

2
cms/djangoapps/contentstore/views.py
View File

@@ -273,7 +273,7 @@ def edit_unit(request, location):
template.display_name,
template.location.url(),
'markdown' in template.metadata,
template.location.name == 'Empty'
'empty' in template.metadata
))
components = [

BIN
cms/static/img/html-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 581 B

BIN
cms/static/img/large-discussion-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 737 B

BIN
cms/static/img/large-freeform-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 412 B

BIN
cms/static/img/large-problem-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 797 B

BIN
cms/static/img/large-video-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 994 B

After

Width:  |  Height:  |  Size: 234 B

114
cms/static/sass/_reset.scss
View File

@@ -54,4 +54,118 @@ del {
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Reset styles to remove ui-lightness jquery ui theme
from the tabs component (used in the add component problem tab menu)
*/
.ui-tabs {
padding: 0;
white-space: normal;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, ui-corner-top, .ui-corner-br, .ui-corner-right {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.ui-widget-content {
border: 0;
background: none;
}
.ui-widget {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
.ui-widget-header {
border:none;
background: none;
}
.ui-tabs .ui-tabs-nav {
padding: 0;
}
.ui-tabs .ui-tabs-nav li {
margin: 0;
padding: 0;
border: none;
top: 0;
margin: 0;
float: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.ui-tabs-nav {
li {
top: 0;
margin: 0;
}
a {
float: none;
font-weight: normal;
}
}
.ui-tabs .ui-tabs-panel {
padding: 0;
}
/* reapplying the tab styles from unit.scss after
removing jquery ui ui-lightness styling
*/
.problem-type-tabs {
border:none;
list-style-type: none;
width: 100%;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
//background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
li:first-child {
margin-left: 20px;
}
li {
opacity: .8;
&:ui-state-active {
background-color: rgba(255, 255, 255, .3);
opacity: 1;
font-weight: 400;
}
a:focus {
outline: none;
border: 0px;
}
}
/*
li {
float:left;
display:inline-block;
text-align:center;
width: auto;
//@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
//background-color: tint($lightBluishGrey, 20%);
//@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
opacity:.8;
&:hover {
opacity:1;
}
&.current {
border: 0px;
//@include active;
opacity:1;
}
}
*/
}

153
cms/static/sass/_unit.scss
View File

@@ -3,6 +3,12 @@
margin: 40px;
}
//Problem Selector tab menu requirements
.js .tabs .tab {
display: none;
}
//end problem selector reqs
.main-column {
clear: both;
float: left;
@@ -58,6 +64,7 @@
margin: 20px 40px;
.title {
margin: 0 0 15px 0;
color: $mediumGrey;
@@ -67,22 +74,25 @@
}
&.new-component-item {
padding: 20px;
border: none;
border-radius: 3px;
background: $lightGrey;
margin: 20px 0px;
border-top: 1px solid $mediumGrey;
box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset;
background-color: $lightGrey;
margin-bottom: 0px;
padding-bottom: 20px;
.new-component-button {
display: block;
padding: 20px;
text-align: center;
color: #6d788b;
color: #edf1f5;
}
h5 {
margin-bottom: 8px;
margin: 20px 0px;
color: #fff;
font-weight: 700;
font-weight: 600;
font-size: 18px;
}
.rendered-component {
@@ -92,18 +102,21 @@
}
.new-component-type {
a,
li {
display: inline-block;
}
a {
border: 1px solid $mediumGrey;
width: 100px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
color: #fff;
margin-right: 15px;
margin-bottom: 20px;
border-radius: 8px;
font-size: 13px;
font-size: 15px;
line-height: 14px;
text-align: center;
@include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
@@ -115,25 +128,40 @@
width: 100%;
padding: 10px;
@include box-sizing(border-box);
color: #fff;
}
}
}
.new-component-templates {
display: none;
padding: 20px;
margin: 20px 40px 20px 40px;
border-radius: 3px;
border: 1px solid $mediumGrey;
background-color: #fff;
@include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
@include clearfix;
.cancel-button {
margin: 20px 0px 10px 10px;
@include white-button;
}
.problem-type-tabs {
display: none;
}
// specific menu types
&.new-component-problem {
padding-bottom:10px;
.ss-icon, .editor-indicator {
display: inline-block;
}
.problem-type-tabs {
display: inline-block;
}
}
}
@@ -146,7 +174,6 @@
border: 1px solid $darkGreen;
background: tint($green,20%);
color: #fff;
@include transition(background-color .15s);
&:hover {
background: $brightGreen;
@@ -154,19 +181,81 @@
}
}
.new-component-template {
margin-bottom: 20px;
.problem-type-tabs {
list-style-type: none;
border-radius: 0;
width: 100%;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
li:last-child {
li:first-child {
margin-left: 20px;
}
li {
float:left;
display:inline-block;
text-align:center;
width: auto;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: tint($lightBluishGrey, 10%);
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
opacity:.8;
&:hover {
opacity:1;
background-color: tint($lightBluishGrey, 20%);
}
&.ui-state-active {
border: 0px;
@include active;
opacity:1;
}
}
a{
display: block;
padding: 15px 25px;
font-size: 15px;
line-height: 16px;
text-align: center;
color: #3c3c3c;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
}
.new-component-template {
a {
background: #fff;
border: 0px;
color: #3c3c3c;
@include transition (none);
&:hover {
background: tint($green,30%);
color: #fff;
@include transition(background-color .15s);
}
}
li {
border:none;
border-bottom: 1px dashed $lightGrey;
color: #fff;
}
li:first-child {
a {
border-radius: 0 0 3px 3px;
border-bottom: 1px solid $darkGreen;
border-top: 0px;
}
}
li:nth-child(2) {
a {
border-radius: 3px 3px 0 0;
border-radius: 0px;
}
}
@@ -175,18 +264,20 @@
display: block;
padding: 7px 20px;
border-bottom: none;
font-weight: 300;
font-weight: 500;
.name {
float: left;
.ss-icon {
@include transition(opacity .15s);
position: relative;
display: inline-block;
top: 1px;
font-size: 13px;
margin-right: 5px;
opacity: 0.5;
width: 17;
height: 21px;
vertical-align: middle;
}
}
@@ -204,6 +295,7 @@
}
&:hover {
color: #fff;
.ss-icon {
opacity: 1.0;
@@ -217,14 +309,18 @@
// specific editor types
.empty {
@include box-shadow(0 1px 3px rgba(0,0,0,0.2));
margin-bottom: 10px;
a {
border-bottom: 1px solid $darkGreen;
border-radius: 3px;
font-weight: 500;
background: $green;
line-height: 1.4;
font-weight: 400;
background: #fff;
color: #3c3c3c;
&:hover {
background: tint($green,30%);
color: #fff;
}
}
}
}
@@ -233,7 +329,7 @@
text-align: center;
h5 {
color: $green;
color: $darkGreen;
}
}
@@ -507,6 +603,7 @@
.edit-state-draft {
.visibility,
.edit-draft-message,
.view-button {
display: none;

102
cms/templates/unit.html
View File

@@ -13,12 +13,20 @@
state: '${unit_state}'
})
});
$(document).ready(function() {
$('body').addClass('js');
// tabs
$('.tab-group').tabs();
});
$('.new-component-template').each(function(){
$emptyEditor = $(this).find('.empty');
$(this).prepend($emptyEditor);
});
});
</script>
</%block>
@@ -56,38 +64,66 @@
</div>
% for type, templates in sorted(component_templates.items()):
<div class="new-component-templates new-component-${type}">
<h3 class="title">Select <span class="type">${type}</span> component type:</h3>
<ul class="new-component-template">
% for name, location, has_markdown, is_empty in templates:
% if is_empty:
<li class="editor-md empty">
<a href="#" data-location="${location}">
<span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
<span class="editor-indicator">Simple <span class="sr">Editor</span></span>
</a>
</li>
% elif has_markdown:
<li class="editor-md">
<a href="#" data-location="${location}">
<span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
<span class="editor-indicator">Simple <span class="sr">Editor</span></span>
</a>
</li>
% else:
<li class="editor-manual">
<a href="#" data-location="${location}">
<span class="name"><i class="ss-icon ss-symbolicons-block">&#x1F527;</i> ${name}</span>
<span class="editor-indicator">Advanced <span class="sr">Editor</span></span>
</a>
</li>
% endif
%endfor
</ul>
% if type == "problem":
<div class="tab-group tabs">
<ul class="problem-type-tabs nav-tabs">
<li class="current">
<a class="link-tab" href="#tab1">Common Problem Types</a>
</li>
<li>
<a class="link-tab" href="#tab2">Advanced</a>
</li>
</ul>
% endif
<div class="tab current" id="tab1">
<ul class="new-component-template">
% for name, location, has_markdown, is_empty in templates:
% if has_markdown or type != "problem":
% if is_empty:
<li class="editor-md empty">
<a href="#" data-location="${location}">
<span class="name"> ${name}</span>
</a>
</li>
% else:
<li class="editor-md">
<a href="#" data-location="${location}">
<span class="name"> ${name}</span>
</a>
</li>
% endif
% endif
%endfor
</ul>
</div>
% if type == "problem":
<div class="tab" id="tab2">
<ul class="new-component-template">
% for name, location, has_markdown, is_empty in templates:
% if not has_markdown:
% if is_empty:
<li class="editor-manual empty">
<a href="#" data-location="${location}">
<span class="name">${name}</span>
</a>
</li>
% else:
<li class="editor-manual">
<a href="#" data-location="${location}">
<span class="name"> ${name}</span>
</a>
</li>
% endif
% endif
% endfor
</ul>
</div>
</div>
% endif
<a href="#" class="cancel-button">Cancel</a>
</div>
% endfor

18
cms/templates/widgets/problem-edit.html
View File

@@ -1,20 +1,20 @@
<%include file="metadata-edit.html" />
<section class="problem-editor editor">
<div class="row">
%if markdown != '' or data == '<problem>\n</problem>\n':
%if enable_markdown:
<div class="editor-bar">
<ul class="format-buttons">
<li><a href="#" class="header-button" data-tooltip="Heading 1"><span
class="problem-editor-icon heading1"></span></a></li>
<li><a href="#" class="multiple-choice-button" data-tooltip="Multiple Choice"><span
class="problem-editor-icon multiple-choice"></span></a></li>
<li><a href="#" class="checks-button" data-tooltip="Check Multiple"><span
<li><a href="#" class="checks-button" data-tooltip="Checkboxes"><span
class="problem-editor-icon checks"></span></a></li>
<li><a href="#" class="string-button" data-tooltip="String Response"><span
<li><a href="#" class="string-button" data-tooltip="Text Input"><span
class="problem-editor-icon string"></span></a></li>
<li><a href="#" class="number-button" data-tooltip="Numerical Response"><span
<li><a href="#" class="number-button" data-tooltip="Numerical Input"><span
class="problem-editor-icon number"></span></a></li>
<li><a href="#" class="dropdown-button" data-tooltip="Option Response"><span
<li><a href="#" class="dropdown-button" data-tooltip="Dropdown"><span
class="problem-editor-icon dropdown"></span></a></li>
<li><a href="#" class="explanation-button" data-tooltip="Explanation"><span
class="problem-editor-icon explanation"></span></a></li>
@@ -56,7 +56,7 @@
</div>
</div>
<div class="row">
<h6>Check Multiple</h6>
<h6>Checkboxes</h6>
<div class="col sample check-multiple">
<img src="/static/img/multi-example.png" />
</div>
@@ -67,7 +67,7 @@
</div>
</div>
<div class="row">
<h6>String Response</h6>
<h6>Text Input</h6>
<div class="col sample string-response">
<img src="/static/img/string-example.png" />
</div>
@@ -76,7 +76,7 @@
</div>
</div>
<div class="row">
<h6>Numerical Response</h6>
<h6>Numerical Input</h6>
<div class="col sample numerical-response">
<img src="/static/img/number-example.png" />
</div>
@@ -85,7 +85,7 @@
</div>
</div>
<div class="row">
<h6>Option Response</h6>
<h6>Dropdown</h6>
<div class="col sample option-reponse">
<img src="/static/img/select-example.png" />
</div>