diff --git a/cms/templates/component.html b/cms/templates/component.html index 639d22ea12..dad407ff7b 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -3,8 +3,10 @@
${editor}
- Save - Cancel +
+ Save + Cancel +
diff --git a/cms/templates/widgets/html-edit.html b/cms/templates/widgets/html-edit.html index 2cca6ae55a..6d7f3386c6 100644 --- a/cms/templates/widgets/html-edit.html +++ b/cms/templates/widgets/html-edit.html @@ -1,13 +1,12 @@ <%include file="metadata-edit.html" /> -
-
-
- -
- -
${data}
-
+
+ + +
+ +
${data}
+
diff --git a/common/lib/xmodule/xmodule/css/editor/display.scss b/common/lib/xmodule/xmodule/css/editor/display.scss index 600b4ad21d..d00031db41 100644 --- a/common/lib/xmodule/xmodule/css/editor/display.scss +++ b/common/lib/xmodule/xmodule/css/editor/display.scss @@ -1,49 +1,58 @@ -.editor-bar { +.editor { 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; - // TODO: I added this -- Brian to fix roperly - height: 34px; - - a { - display: block; - float: left; - padding: 3px 10px 7px; - margin-left: 7px; - border-radius: 2px; - - &:hover { - background: rgba(255, 255, 255, .5); - } + + .row { + position: relative; } - .editor-tabs { - position: absolute; - top: 10px; - right: 10px; + .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; + // TODO: I added this -- Brian to fix roperly + height: 34px; - li { + a { + display: block; float: left; + padding: 3px 10px 7px; + margin-left: 7px; + border-radius: 2px; + + &:hover { + background: rgba(255, 255, 255, .5); + } } - .tab { - 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); + .editor-tabs { + position: absolute; + top: 10px; + right: 10px; - &.current { - background: #fff; - border-bottom-color: #fff; + li { + float: left; + } + + .tab { + display: block; + 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; + } } } } diff --git a/common/lib/xmodule/xmodule/css/html/edit.scss b/common/lib/xmodule/xmodule/css/html/edit.scss index e69de29bb2..1c8c70f50d 100644 --- a/common/lib/xmodule/xmodule/css/html/edit.scss +++ b/common/lib/xmodule/xmodule/css/html/edit.scss @@ -0,0 +1,20 @@ +.html-editor { + @include clearfix(); + + .CodeMirror { + display: none; + position: absolute; + top: 46px; + width: 100%; + height: 378px; + background: #fff; + color: #3c3c3c; + @include box-sizing(border-box); + } + + .editor-tabs { + top: 11px; + right: 30px; + z-index: 99; + } +} \ No newline at end of file diff --git a/common/lib/xmodule/xmodule/js/src/html/edit.coffee b/common/lib/xmodule/xmodule/js/src/html/edit.coffee index 45ec9d25cd..ddd09e2e0c 100644 --- a/common/lib/xmodule/xmodule/js/src/html/edit.coffee +++ b/common/lib/xmodule/xmodule/js/src/html/edit.coffee @@ -8,11 +8,11 @@ class @HTMLEditingDescriptor mode: "text/html" lineNumbers: true lineWrapping: true}) - $(@advanced_editor.getWrapperElement()).hide() @tiny_mce_textarea = $(".tiny-mce", @element).tinymce({ script_url : '/static/js/vendor/tiny_mce/tiny_mce.js', theme : "advanced", + skin: 'studio', schema: "html5", # TODO: we should share this CSS with studio (and LMS) content_css : "/static/css/tiny-mce.css", @@ -27,7 +27,7 @@ class @HTMLEditingDescriptor height: '400px', # Cannot get access to tinyMCE Editor instance (for focusing) until after it is rendered. # The tinyMCE callback passes in the editor as a paramter. - init_instance_callback: @focusVisualEditor + init_instance_callback: @initializeVisualEditor }) @showingVisualEditor = true @@ -41,17 +41,18 @@ class @HTMLEditingDescriptor $(e.currentTarget).addClass('current') visualEditor = @getVisualEditor() + $('table.mceToolbar').toggleClass('is-inactive') + $(@advanced_editor.getWrapperElement()).toggleClass('is-inactive') + if $(e.currentTarget).attr('data-tab') is 'visual' - $(@advanced_editor.getWrapperElement()).hide() @showVisualEditor(visualEditor) else - visualEditor.hide() - @tiny_mce_textarea.hide() + # @tiny_mce_textarea.hide() @showAdvancedEditor(visualEditor) # Show the Advanced (codemirror) Editor. Pulled out as a helper method for unit testing. showAdvancedEditor: (visualEditor) -> - $(@advanced_editor.getWrapperElement()).show() + # $(@advanced_editor.getWrapperElement()).show() if visualEditor.isDirty() @advanced_editor.setValue(visualEditor.getContent({no_events: 1})) @advanced_editor.setCursor(0) @@ -61,16 +62,16 @@ class @HTMLEditingDescriptor # Show the Visual (tinyMCE) Editor. Pulled out as a helper method for unit testing. showVisualEditor: (visualEditor) -> - visualEditor.show() + # visualEditor.show() visualEditor.setContent(@advanced_editor.getValue()) # In order for isDirty() to return true ONLY if edits have been made after setting the text, # both the startContent must be sync'ed up and the dirty flag set to false. visualEditor.startContent = visualEditor.getContent({format: "raw", no_events: 1}); visualEditor.isNotDirty = true - @focusVisualEditor(visualEditor) + visualEditor.focus() @showingVisualEditor = true - focusVisualEditor: (visualEditor) -> + initializeVisualEditor: (visualEditor) -> visualEditor.focus() getVisualEditor: -> diff --git a/common/lib/xmodule/xmodule/self_assessment_module.py b/common/lib/xmodule/xmodule/self_assessment_module.py index eb8a275d35..b5cf04c2f7 100644 --- a/common/lib/xmodule/xmodule/self_assessment_module.py +++ b/common/lib/xmodule/xmodule/self_assessment_module.py @@ -524,6 +524,7 @@ class SelfAssessmentDescriptor(XmlDescriptor, EditingDescriptor): js = {'coffee': [resource_string(__name__, 'js/src/html/edit.coffee')]} js_module_name = "HTMLEditingDescriptor" + css = {'scss': [resource_string(__name__, 'css/html/edit.scss')]} @classmethod def definition_from_xml(cls, xml_object, system):