diff --git a/cms/static/coffee/src/views/unit.coffee b/cms/static/coffee/src/views/unit.coffee index 6c06c85400..6b072b208a 100644 --- a/cms/static/coffee/src/views/unit.coffee +++ b/cms/static/coffee/src/views/unit.coffee @@ -84,8 +84,6 @@ class CMS.Views.UnitEdit extends Backbone.View event.preventDefault() @$componentItem = $('
  • ').addClass('editing') - $modalCover.show() - $modalCover.bind('click', @closeEditor) type = $(event.currentTarget).data('type') switch type @@ -97,23 +95,27 @@ class CMS.Views.UnitEdit extends Backbone.View $preview = $($('#problem-preview').html()) initProblemEditors(@$editor, $preview) - @$editor.find('.save-button').bind('click', => + @$editor.find('.save-button, .cancel-button').bind('click', => @$componentItem.removeClass('editing') @closeEditor() ) - $componentActions = $($('#component-actions').html()); + $componentActions = $($('#component-actions').html()) @$componentItem.append(@$editor) @$componentItem.append($preview) - @$componentItem.append($componentActions); + @$componentItem.append($componentActions) + @$componentItem.hide() @$newComponentItem.before(@$componentItem) + @$componentItem.slideDown(200) + $modalCover.fadeIn(200) + $modalCover.bind('click', @closeEditor) closeEditor: (event) => - console.log('close') - $modalCover.hide() + @$editor.slideUp(150) + $modalCover.fadeOut(150) $modalCover.unbind('click', @closeEditor) - @$editor.remove() + @$editor.slideUp(150) @$componentItem.removeClass('editing') saveNewComponent: (event) => diff --git a/cms/static/img/choice-example.png b/cms/static/img/choice-example.png new file mode 100644 index 0000000000..ee136577a9 Binary files /dev/null and b/cms/static/img/choice-example.png differ diff --git a/cms/static/img/multi-example.png b/cms/static/img/multi-example.png new file mode 100644 index 0000000000..abe729a94b Binary files /dev/null and b/cms/static/img/multi-example.png differ diff --git a/cms/static/img/number-example.png b/cms/static/img/number-example.png new file mode 100644 index 0000000000..7cd050cb5e Binary files /dev/null and b/cms/static/img/number-example.png differ diff --git a/cms/static/img/problem-settings-icon.png b/cms/static/img/problem-settings-icon.png new file mode 100644 index 0000000000..f99082a1e7 Binary files /dev/null and b/cms/static/img/problem-settings-icon.png differ diff --git a/cms/static/img/select-example.png b/cms/static/img/select-example.png new file mode 100644 index 0000000000..ef80e629de Binary files /dev/null and b/cms/static/img/select-example.png differ diff --git a/cms/static/img/string-example.png b/cms/static/img/string-example.png new file mode 100644 index 0000000000..6f628b20d4 Binary files /dev/null and b/cms/static/img/string-example.png differ diff --git a/cms/static/js/speed-editor.js b/cms/static/js/speed-editor.js index 7d6a37a6b2..fbb73be530 100644 --- a/cms/static/js/speed-editor.js +++ b/cms/static/js/speed-editor.js @@ -1,6 +1,8 @@ var $body; var $preview; var $tooltip; +var $cheatsheet; +var $currentEditor; var simpleEditor; var xmlEditor; var currentEditor; @@ -8,7 +10,18 @@ var controlDown; var commandDown; +(function() { + $body = $('body'); + $body.on('click', '.editor-bar a', onEditorButton); + $body.on('click', '.editor-tabs .tab', setEditorTab); + $body.on('click', '.cheatsheet-toggle', toggleCheatsheet); + $body.on('click', '.problem-settings-button', toggleProblemSettings); + $(document).bind('keyup', onKeyboard); +})(); + + function initProblemEditors($editor, $prev) { + $currentEditor = $editor; simpleEditor = CodeMirror.fromTextArea($editor.find('.edit-box')[0], { lineWrapping: true, extraKeys: { @@ -40,10 +53,35 @@ function initProblemEditors($editor, $prev) { $(simpleEditor.getWrapperElement()).bind('click', setFocus); $preview = $prev.find('.problem'); +} - $body.on('click', '.editor-bar a', onEditorButton); - $body.on('click', '.editor-tabs a', setEditorTab); - $(document).bind('keyup', onKeyboard); +function toggleProblemSettings(e) { + e.preventDefault(); + + $(this).toggleClass('is-open'); + + if($(this).hasClass('is-open')) { + $(this).find('.button-label').html('Hide Advanced Settings'); + $('.problem-settings').slideDown(150); + } else { + $(this).find('.button-label').html('Show Advanced Settings'); + $('.problem-settings').slideUp(150); + } +} + +function toggleCheatsheet(e) { + e.preventDefault(); + + console.log('bam'); + + if(!$currentEditor.find('.simple-editor-cheatsheet')[0]) { + $cheatsheet = $($('#simple-editor-cheatsheet').html()); + $currentEditor.append($cheatsheet); + } + + setTimeout(function() { + $cheatsheet.toggleClass('shown'); + }, 10); } function setEditorTab(e) { diff --git a/cms/static/sass/_graphics.scss b/cms/static/sass/_graphics.scss index 22f0870d6a..097da8e5ba 100644 --- a/cms/static/sass/_graphics.scss +++ b/cms/static/sass/_graphics.scss @@ -309,6 +309,14 @@ background-position: -220px 0; } +.settings-icon { + display: inline-block; + width: 20px; + height: 20px; + vertical-align: middle; + background: url(../img/problem-settings-icon.png) no-repeat; +} + diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index c95b3548e2..0cd09022ec 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -228,7 +228,12 @@ .editor { background: $blue; padding: 20px; - border-radius: 3px 3px 0 0; + + h5 { + color: #fff; + margin-bottom: 20px; + font-weight: 700; + } label { display: inline-block; @@ -272,6 +277,22 @@ border-color: #3c3c3c; } + .problem-settings-button { + @include blue-button; + @include box-sizing(border-box); + width: 100%; + padding: 12px 0 14px; + text-align: center; + + &.is-open { + border-radius: 0 0 3px 3px; + } + + .settings-icon { + margin-right: 10px; + } + } + .editor-bar { position: relative; @include linear-gradient(top, #d4dee8, #c9d5e2); @@ -302,7 +323,7 @@ float: left; } - a { + .tab { height: 24px; padding: 7px 20px 3px; border: 1px solid #a5aaaf; @@ -318,9 +339,32 @@ border-bottom-color: #fff; } } + + .cheatsheet-toggle { + width: 21px; + height: 21px; + padding: 0; + margin: 3px 5px 0 16px; + border-radius: 22px; + border: 1px solid #a5aaaf; + background: #e5ecf3; + font-size: 13px; + font-weight: 700; + color: #565d64; + text-align: center; + } } } + .problem-settings { + display: none; + padding: 20px 30px; + background: rgba(0, 0, 0, .1); + border: 1px solid #437fbf; + border-bottom: none; + border-radius: 3px 3px 0 0; + } + .CodeMirror { font-size: 13px; border: 1px solid #3c3c3c; @@ -576,3 +620,61 @@ display: none; } } + +.simple-editor-cheatsheet { + position: absolute; + top: 0; + left: 100%; + width: 0; + border-radius: 0 3px 3px 0; + @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 15px); + background-color: #fff; + overflow: hidden; + @include transition(width .3s); + + &.shown { + width: 300px; + } + + .cheatsheet-wrapper { + width: 240px; + padding: 20px 30px; + } + + h6 { + margin-bottom: 7px; + font-size: 15px; + font-weight: 700; + } + + .row { + @include clearfix; + padding-bottom: 5px !important; + margin-bottom: 10px !important; + border-bottom: 1px solid #ddd !important; + + &:last-child { + border-bottom: none !important; + margin-bottom: 0 !important; + } + } + + .col { + float: left; + + &.sample { + width: 60px; + margin-right: 30px; + } + } + + pre { + font-size: 12px; + line-height: 18px; + } + + code { + padding: 0; + background: none; + } +} \ No newline at end of file diff --git a/cms/templates/unit.html b/cms/templates/unit.html index b126a3e1f4..db3c94f69d 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -16,6 +16,62 @@ + +