Skip to content

E
edx-platform
Commit 44fb9561 by Tom Giannattasio
Options

added a ton of speed editor goodness

parent 4e876b05
Showing with 345 additions and 49 deletions
cms/static/coffee/src/views/unit.coffee
class CMS.Views.UnitEdit extends Backbone.View class CMS.Views.UnitEdit extends Backbone.View
events: events:
'click .new-component .new-component-type a': 'showComponentTemplates' # 'click .new-component .new-component-type a': 'showComponentTemplates'
'click .new-component .new-component-type a': 'addNewComponent'
'click .new-component .cancel-button': 'closeNewComponent' 'click .new-component .cancel-button': 'closeNewComponent'
'click .new-component-templates .new-component-template a': 'saveNewComponent' 'click .new-component-templates .new-component-template a': 'saveNewComponent'
'click .new-component-templates .cancel-button': 'closeNewComponent' 'click .new-component-templates .cancel-button': 'closeNewComponent'
...@@ -79,6 +80,42 @@ class CMS.Views.UnitEdit extends Backbone.View ...@@ -79,6 +80,42 @@ class CMS.Views.UnitEdit extends Backbone.View
@$newComponentItem.find('.rendered-component').remove() @$newComponentItem.find('.rendered-component').remove()
@$newComponentItem.css('height', @$newComponentButton.outerHeight()) @$newComponentItem.css('height', @$newComponentButton.outerHeight())
addNewComponent: (event) =>
event.preventDefault()
@$componentItem = $('<li>').addClass('editing')
$modalCover.show()
$modalCover.bind('click', @closeEditor)
type = $(event.currentTarget).data('type')
switch type
when 'video'
@$editor = $($('#video-editor').html())
$preview = $($('#video-preview').html())
when 'problem'
@$editor = $($('#problem-editor').html())
$preview = $($('#problem-preview').html())
initProblemEditors(@$editor, $preview)
@$editor.find('.save-button').bind('click', =>
@$componentItem.removeClass('editing')
@closeEditor()
)
$componentActions = $($('#component-actions').html());
@$componentItem.append(@$editor)
@$componentItem.append($preview)
@$componentItem.append($componentActions);
@$newComponentItem.before(@$componentItem)
closeEditor: (event) =>
console.log('close')
$modalCover.hide()
$modalCover.unbind('click', @closeEditor)
@$editor.remove()
@$componentItem.removeClass('editing')
saveNewComponent: (event) => saveNewComponent: (event) =>
event.preventDefault() event.preventDefault()
......
cms/static/sass/_base.scss
...@@ -337,4 +337,30 @@ body.show-wip { ...@@ -337,4 +337,30 @@ body.show-wip {
content: ''; content: '';
@extend .spinner-icon; @extend .spinner-icon;
} }
}
.tooltip {
display: block;
position: absolute;
z-index: 9999999;
padding: 4px 8px;
background: rgba(0, 0, 0, .9);
border-radius: 3px;
pointer-events: none;
font-size: 11px;
color: #fff;
text-align: center;
&:before {
content: '▾';
position: absolute;
bottom: -10px;
left: 50%;
width: 20px;
height: 10px;
margin-left: -10px;
font-size: 16px;
line-height: 0;
color: rgba(0, 0, 0, .9);
}
} }
\ No newline at end of file
cms/static/sass/_graphics.scss
...@@ -277,3 +277,41 @@ ...@@ -277,3 +277,41 @@
vertical-align: middle; vertical-align: middle;
background: url(../img/spinner-in-field.gif) no-repeat; background: url(../img/spinner-in-field.gif) no-repeat;
} }
.problem-editor-icon {
display: inline-block;
width: 26px;
height: 21px;
vertical-align: middle;
background: url(../img/problem-editor-icons.png) no-repeat;
}
.problem-editor-icon.multiple-choice {
background-position: 0 0;
}
.problem-editor-icon.checks {
background-position: -56px 0;
}
.problem-editor-icon.string {
width: 28px;
background-position: -111px 0;
}
.problem-editor-icon.number {
width: 24px;
background-position: -168px 0;
}
.problem-editor-icon.dropdown {
width: 17px;
background-position: -220px 0;
}
cms/static/sass/_unit.scss
...@@ -73,7 +73,11 @@ ...@@ -73,7 +73,11 @@
} }
&.editing { &.editing {
border-color: #6696d7; border-color: #3c3c3c;
box-shadow: 0 0 30px rgba(0, 0, 0, .5);
position: relative;
z-index: 99999;
@include transition(all);
.drag-handle, .drag-handle,
.component-actions { .component-actions {
...@@ -135,30 +139,16 @@ ...@@ -135,30 +139,16 @@
} }
&.new-component-item { &.new-component-item {
padding: 0; border: none;
border: 1px solid #8891a1;
border-radius: 3px; border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); background: $lightGrey;
background-color: #d1dae3; @include clearfix;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
@include transition(background-color .15s, border-color .15s);
&.adding {
background-color: $blue;
border-color: #437fbf;
}
.new-component-button {
display: block;
padding: 20px;
text-align: center;
color: #6d788b;
}
h5 { h5 {
margin-bottom: 8px; margin-bottom: 22px;
color: #fff; color: $blue;
font-weight: 700; font-weight: 700;
text-align: center;
} }
.rendered-component { .rendered-component {
...@@ -168,25 +158,32 @@ ...@@ -168,25 +158,32 @@
} }
.new-component-type, .new-component-template { .new-component-type, .new-component-template {
text-align: center;
@include clearfix; @include clearfix;
li {
display: inline;
}
a { a {
position: relative; position: relative;
float: left; display: inline-block;
width: 100px; width: 100px;
height: 100px; height: 100px;
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 8px; border-radius: 8px;
border: 1px solid #437fbf;
background-color: $blue;
font-size: 13px; font-size: 13px;
line-height: 14px; line-height: 14px;
color: #fff; color: #fff;
text-align: center; text-align: center;
@include box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset); @include box-shadow(0 1px 1px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .4) inset);
@include transition(background-color .15s); @include transition(background-color .15s);
&:hover { &:hover {
background-color: rgba(255, 255, 255, .2); @include box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset, 0 0 20px rgba(255, 255, 255, .3) inset);
} }
.name { .name {
...@@ -208,9 +205,6 @@ ...@@ -208,9 +205,6 @@
.new-component, .new-component,
.new-component-templates { .new-component-templates {
display: none;
position: absolute;
width: 100%;
padding: 20px; padding: 20px;
@include clearfix; @include clearfix;
...@@ -219,6 +213,10 @@ ...@@ -219,6 +213,10 @@
border-color: #30649c; border-color: #30649c;
} }
} }
.new-component-templates {
display: none;
}
} }
} }
} }
...@@ -227,6 +225,111 @@ ...@@ -227,6 +225,111 @@
padding: 10px 20px; padding: 10px 20px;
} }
.editor {
background: $blue;
padding: 20px;
border-radius: 3px 3px 0 0;
label {
display: inline-block;
width: 130px;
color: #fff;
}
input {
border-color: #3c3c3c;
}
.row {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
.video-id-field,
.transcript-field {
width: 300px;
}
.browse-button {
@include blue-button;
border-color: #3c3c3c;
font-size: 12px;
}
.save-button {
@include orange-button;
margin: 10px 8px 0 0;
border-color: #3c3c3c;
}
.cancel-button {
@include white-button;
border-color: #3c3c3c;
}
.editor-bar {
position: relative;
@include linear-gradient(top, #d4dee8, #c9d5e2);
padding: 5px;
border: 1px solid #3c3c3c;
border-radius: 3px 3px 0 0;
border-bottom-color: #a5aaaf;
@include clearfix;
a {
display: block;
float: left;
padding: 3px 10px 7px;
margin-left: 7px;
border-radius: 2px;
&:hover {
background: rgba(255, 255, 255, .5);
}
}
.editor-tabs {
position: absolute;
top: 10px;
right: 10px;
li {
float: left;
}
a {
height: 24px;
padding: 7px 20px 3px;
border: 1px solid #a5aaaf;
border-radius: 3px 3px 0 0;
@include linear-gradient(top, rgba(0, 0, 0, 0) 87%, rgba(0, 0, 0, .06));
background-color: #e5ecf3;
font-size: 13px;
color: #3c3c3c;
box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
&.current {
background: #fff;
border-bottom-color: #fff;
}
}
}
}
.CodeMirror {
font-size: 13px;
border: 1px solid #3c3c3c;
border-top: none;
background: #fff;
color: #3c3c3c;
}
}
.component-editor { .component-editor {
@include edit-box; @include edit-box;
display: none; display: none;
......
cms/templates/unit.html
...@@ -13,6 +13,115 @@ ...@@ -13,6 +13,115 @@
}) })
}); });
</script> </script>
<script src="/static/js/speed-editor.js"></script>
<script type="text/template" id="component-actions">
<div class="component-actions">
<a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
<a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>
</div>
<a href="#" class="drag-handle"></a>
</script>
<script type="text/template" id="problem-editor">
<div class="problem-editor editor">
<div class="row">
<div class="editor-bar">
<ul class="format-buttons">
<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 class="problem-editor-icon checks"></span></a></li>
<li><a href="#" class="string-button" data-tooltip="String Response"><span class="problem-editor-icon string"></span></a></li>
<li><a href="#" class="number-button" data-tooltip="Numerical Response"><span class="problem-editor-icon number"></span></a></li>
<li><a href="#" class="dropdown-button" data-tooltip="Dropdown"><span class="problem-editor-icon dropdown"></span></a></li>
</ul>
<ul class="editor-tabs">
<li><a href="#" class="simple-tab current">Simple</a></li>
<li><a href="#" class="xml-tab">XML</a></li>
</ul>
</div>
<textarea class="edit-box"></textarea>
<textarea class="xml-box"></textarea>
</div>
<div class="row">
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
</div>
</div>
</script>
<script type="text/template" id="problem-preview">
<section class="xmodule_display xmodule_CapaModule" data-type="Problem">
<section id="problem_i4x-Giannattasio-313-problem-9e62f3fb1fa14ba6a671b3de73c02eab" class="problems-wrapper" data-problem-id="i4x://Giannattasio/313/problem/9e62f3fb1fa14ba6a671b3de73c02eab" data-url="/preview/modx/0/i4x://Giannattasio/313/problem/9e62f3fb1fa14ba6a671b3de73c02eab">
<section class="problem"></section>
<section class="action">
<input type="hidden" name="problem_id" value="Option Response">
<input class="check Check" type="button" value="Check">
<input class="show" type="button" value="Show Answer">
</section>
</section>
</section>
</script>
<script type="text/template" id="video-editor">
<div class="video-editor editor">
<div class="row">
<label>YouTube ID(s):</label>
<input type="text" value="0.75:JMD_ifUUfsU,1.0:OEoXaMPEzfM,1.25:AKqURZnYqpk,1.50:DYpADpL7jAY" class="video-id-field">
<a href="#" class="browse-button">Browse…</a>
</div>
<div class="row">
<label>Transcript:</label>
<input type="text" class="transcript-field">
<a href="#" class="browse-button">Browse…</a>
</div>
<div class="row">
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
</div>
</div>
</script>
<script type="text/template" id="video-preview">
<div class="video-preview">
<section class="xmodule_display xmodule_VideoModule" data-type="Video">
<div id="video_i4x-Giannattasio-313-video-39532ac1a90742bbbd70148122a8fcfa" class="video video-load-complete" data-streams="0.75:JMD_ifUUfsU,1.0:OEoXaMPEzfM,1.25:AKqURZnYqpk,1.50:DYpADpL7jAY" data-caption-data-dir="0458bf5495cf4072adde09918f6a9941" data-show-captions="true">
<div class="tc-wrapper">
<article class="video-wrapper">
<section class="video-player">
<iframe frameborder="0" allowfullscreen="" id="i4x-Giannattasio-313-video-39532ac1a90742bbbd70148122a8fcfa" title="YouTube video player" height="390" width="640" src="http://www.youtube.com/embed/OEoXaMPEzfM?controls=0&amp;wmode=transparent&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;modestbranding=1&amp;origin=http%3A%2F%2Flocalhost%3A8001"></iframe>
</section>
<section class="video-controls"><div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 2.586206896551724%; "></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 2.586206896551724%; "></a></div>
<div>
<ul class="vcr">
<li><a class="video_control play" href="#">Play</a></li>
<li>
<div class="vidtime">0:02 / 1:56</div>
</li>
</ul>
<div class="secondary-controls"><div class="speeds">
<a href="#">
<h3>Speed</h3>
<p class="active">1.0x</p>
</a>
<ol class="video_speeds"><li data-speed="1.50"><a href="#">1.50x</a></li><li data-speed="1.25"><a href="#">1.25x</a></li><li data-speed="1.0" class="active"><a href="#">1.0x</a></li><li data-speed="0.75"><a href="#">0.75x</a></li></ol>
</div><div class="volume">
<a href="#"></a>
<div class="volume-slider-container">
<div class="volume-slider ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="height: 100%; "></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="bottom: 100%; "></a></div>
</div>
</div>
<a href="#" class="add-fullscreen" oldtitle="Fill browser">Fill Browser</a>
<a href="#" class="quality_control" title="HD">HD</a><a href="#" class="hide-subtitles" oldtitle="Turn off captions">Captions</a></div>
</div></section>
</article><ol class="subtitles" style="max-height: 342px; "></ol>
</div>
</div>
</section>
</div>
</script>
</%block> </%block>
<%block name="content"> <%block name="content">
<div class="main-wrapper edit-state-${unit_state}" data-id="${unit_location}"> <div class="main-wrapper edit-state-${unit_state}" data-id="${unit_location}">
...@@ -32,12 +141,9 @@ ...@@ -32,12 +141,9 @@
% for id in components: % for id in components:
<li class="component" data-id="${id}"/> <li class="component" data-id="${id}"/>
% endfor % endfor
<li class="new-component-item"> <li class="new-component-item adding">
<a href="#" class="new-component-button">
<span class="plus-icon"></span>New Component
</a>
<div class="new-component"> <div class="new-component">
<h5>Select Component Type</h5> <h5>Add New Component</h5>
<ul class="new-component-type"> <ul class="new-component-type">
% for type in sorted(component_templates.keys()): % for type in sorted(component_templates.keys()):
<li> <li>
...@@ -48,22 +154,7 @@ ...@@ -48,22 +154,7 @@
</li> </li>
% endfor % endfor
</ul> </ul>
<a href="#" class="cancel-button">Cancel</a> </div>
</div>
% for type, templates in sorted(component_templates.items()):
<div class="new-component-templates new-component-${type}">
<ul class="new-component-template">
% for name, location in templates:
<li>
<a href="#" data-location="${location}">
<span class="name">${name}</span>
</a>
</li>
% endfor
</ul>
<a href="#" class="cancel-button">Cancel</a>
</div>
% endfor
</li> </li>
</ol> </ol>
</article> </article>
......
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