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

Merge branch 'feature/cas/speed-editor' of github.com:MITx/mitx into feature/cas/speed-editor

Browse Source
This commit is contained in:
cahrens
2013-01-09 09:40:34 -05:00
parent b97955965a 2a1e102fca
commit b704645f99
2 changed files with 193 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,6 +56,15 @@
z-index: 10;
margin: 20px 40px;
.title {
margin: 0 0 15px 0;
color: $mediumGrey;
.value {
}
}
&.new-component-item {
padding: 20px;
border: none;
@@ -116,7 +125,7 @@
a {
position: relative;
border: 1px solid $darkGreen;
background: $green;
background: tint($green,20%);
color: #fff;
@include transition(background-color .15s);
@@ -129,23 +138,71 @@
.new-component-template {
margin-bottom: 20px;
li:first-child {
li:last-child {
a {
border-radius: 0 0 3px 3px;
border-bottom: 1px solid $darkGreen;
}
}
li:nth-child(2) {
a {
border-radius: 3px 3px 0 0;
}
}
li:last-child {
a {
border-radius: 0 0 3px 3px;
}
}
a {
@include clearfix();
display: block;
padding: 7px 20px;
border-bottom: none;
font-weight: 300;
.name {
float: left;
.ss-icon {
@include transition(opacity .15s);
position: relative;
top: 1px;
font-size: 13px;
margin-right: 5px;
opacity: 0.5;
}
}
.editor-indicator {
@include transition(opacity .15s);
float: right;
position: relative;
top: 3px;
font-size: 12px;
opacity: 0.1;
}
&:hover {
.ss-icon {
opacity: 1.0;
}
.editor-indicator {
opacity: 1.0;
}
}
}
// 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;
}
}
}

140
cms/templates/unit.html
View File

@@ -12,6 +12,106 @@
state: '${unit_state}'
})
});
(function() {
$('.new-component-template').each(function(){
$emptyEditor = $(this).find('.empty');
$(this).prepend($emptyEditor);
});
})();
function setEditorTab(e) {
e.preventDefault();
$('.editor-tabs .current').removeClass('current');
$(this).addClass('current');
switch($(this).attr('data-tab')) {
case 'simple':
currentEditor = simpleEditor;
$(simpleEditor.getWrapperElement()).show();
$(xmlEditor.getWrapperElement()).hide();
$(simpleEditor).focus();
onSimpleEditorUpdate();
break;
case 'xml':
currentEditor = xmlEditor;
$(simpleEditor.getWrapperElement()).hide();
$(xmlEditor.getWrapperElement()).show();
$(xmlEditor).focus();
xmlEditor.refresh();
break;
case 'visual':
currentEditor = visualEditor;
convertHTMLToVisual();
$('table.mceToolbar').show();
$(htmlEditor.getWrapperElement()).hide();
break;
case 'html':
currentEditor = htmlEditor;
$('table.mceToolbar').hide();
$(htmlEditor.getWrapperElement()).show();
$(htmlEditor).focus();
convertVisualToHTML();
htmlEditor.refresh();
break;
}
}
</script>
<script type="text/template" id="simple-editor-cheatsheet">
<article class="simple-editor-cheatsheet">
<div class="cheatsheet-wrapper">
<div class="row">
<h6>Multiple Choice</h6>
<div class="col sample">
<img src="/static/img/choice-example.png" />
</div>
<div class="col">
<pre><code>( ) red
( ) green
(x) blue</code></pre>
</div>
</div>
<div class="row">
<h6>Multiple Check</h6>
<div class="col sample">
<img src="/static/img/multi-example.png" />
</div>
<div class="col">
<pre><code>[ ] earth
[ ] wind
[x] water</code></pre>
</div>
</div>
<div class="row">
<h6>String Response</h6>
<div class="col sample">
<img src="/static/img/string-example.png" />
</div>
<div class="col">
<pre><code>= dog</code></pre>
</div>
</div>
<div class="row">
<h6>Numerical Response</h6>
<div class="col sample">
<img src="/static/img/number-example.png" />
</div>
<div class="col">
<pre><code>= 3.14 +- 2%</code></pre>
</div>
</div>
<div class="row">
<h6>Option Response</h6>
<div class="col sample">
<img src="/static/img/select-example.png" />
</div>
<div class="col">
<pre><code>[[wrong, (right)]]</code></pre>
</div>
</div>
</div>
</article>
</script>
<script type="text/template" id="component-actions">
@@ -57,20 +157,36 @@
</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:
<li>
<a href="#" data-location="${location}">
<span class="name">${name}
% if has_markdown:
MD
% endif
% if is_empty:
<i>rasa</i>
% endif
</span>
</a>
</li>
% 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>
<a href="#" class="cancel-button">Cancel</a>