diff --git a/cms/static/css/tiny-mce.css b/cms/static/css/tiny-mce.css index 63d2bada94..8c69c4af75 100644 --- a/cms/static/css/tiny-mce.css +++ b/cms/static/css/tiny-mce.css @@ -1,89 +1,140 @@ +@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format("woff")}@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:local("Open Sans Light"),local("OpenSans-Light"),url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format("woff")}@font-face{font-family:'Open Sans';font-style:italic;font-weight:700;src:local("Open Sans Bold Italic"),local("OpenSans-BoldItalic"),url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxhbnBKKEOwRKgsHDreGcocg.woff) format("woff")}@font-face{font-family:'Open Sans';font-style:italic;font-weight:300;src:local("Open Sans Light Italic"),local("OpenSansLight-Italic"),url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format("woff")}@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;src:local("Open Sans Italic"),local("OpenSans-Italic"),url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff) format("woff")}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local("Open Sans"),local("OpenSans"),url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format("woff")} + .mceContentBody { - padding: 10px; - background-color: #fff; - font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif; - font-size: 16px; - line-height: 1.6; - color: #3c3c3c; - scrollbar-3dlight-color: #F0F0EE; - scrollbar-arrow-color: #676662; - scrollbar-base-color: #F0F0EE; - scrollbar-darkshadow-color: #DDDDDD; - scrollbar-face-color: #E0E0DD; - scrollbar-highlight-color: #F0F0EE; - scrollbar-shadow-color: #F0F0EE; - scrollbar-track-color: #F5F5F5; + padding: 10px; + background-color: #fff; + font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-size: 16px; + line-height: 1.6; + color: #3c3c3c; + scrollbar-3dlight-color: #F0F0EE; + scrollbar-arrow-color: #676662; + scrollbar-base-color: #F0F0EE; + scrollbar-darkshadow-color: #DDDDDD; + scrollbar-face-color: #E0E0DD; + scrollbar-highlight-color: #F0F0EE; + scrollbar-shadow-color: #F0F0EE; + scrollbar-track-color: #F5F5F5; } h1 { - color: #3c3c3c; - font-weight: normal; - font-size: 2em; - line-height: 1.4em; - letter-spacing: 1px; + color: #3c3c3c; + font-weight: normal; + font-size: 2em; + line-height: 1.4em; + letter-spacing: 1px; + margin: 0 0 1.416em 0; } h2 { - color: #646464; - font-weight: normal; - font-size: 1.2em; - line-height: 1.2em; - letter-spacing: 1px; - margin-bottom: 15px; - text-transform: uppercase; - -webkit-font-smoothing: antialiased; + color: #646464; + font-weight: normal; + font-size: 1.2em; + line-height: 1.2em; + letter-spacing: 1px; + margin-bottom: 15px; + text-transform: uppercase; + -webkit-font-smoothing: antialiased; +} + +h3, h4, h5, h6 { + margin: 0 0 10px 0; + font-weight: 600; } h3 { - font-size: 1.2em; - font-weight: 600; + font-size: 1.2em; +} + +h4 { + font-size: 1em; +} + +h5 { + font-size: .83em; +} + +h6 { + font-size: 0.75em; } p { - margin-bottom: 1.416em; - font-size: 1em; - line-height: 1.6em !important; - color: $baseFontColor; + margin-bottom: 1.416em; + font-size: 1em; + line-height: 1.6em !important; + color: #3c3c3c; } em, i { - font-style: italic; + font-style: italic; } strong, b { - font-style: bold; + font-style: bold; } p + p, ul + p, ol + p { - margin-top: 20px; + margin-top: 20px; } ol, ul { - margin: 1em 0; - padding: 0 0 0 1em; + margin: 1em 0; + padding: 0 0 0 1em; + color: #3c3c3c; + } ol li, ul li { - margin-bottom: 0.708em; + margin-bottom: 0.708em; } ol { - list-style: decimal outside none; + list-style: decimal outside none; } ul { - list-style: disc outside none; + list-style: disc outside none; } a, a:link, a:visited, a:hover, a:active { - color: #1d9dd9; -} + color: #1d9dd9; +} img { - max-width: 100%; + max-width: 100%; +} + +pre { + margin: 1em 0; + color: #3c3c3c; + font-family: monospace, serif; + font-size: 1em; + white-space: pre-wrap; + word-wrap: break-word; } code { - font-family: monospace, serif; - background: none; -} \ No newline at end of file + font-family: monospace, serif; + background: none; + color: #3c3c3c; + padding: 0; +} + +table { + width: 100%; + border-collapse: collapse; + font-size: 16px; +} + +th { + background: #eee; + font-weight: bold; +} + +table td, th { + margin: 20px 0; + padding: 10px; + border: 1px solid #ccc !important; + text-align: left; + font-size: 14px; +} diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index c79458dbe0..6e5c547b87 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -199,7 +199,7 @@ code { padding: 20px; } - h4 { + .header { padding: 6px 14px; border-bottom: 1px solid $mediumGrey; border-radius: 2px 2px 0 0; diff --git a/cms/templates/edit-static-page.html b/cms/templates/edit-static-page.html index 04740a74af..02fe2308fa 100644 --- a/cms/templates/edit-static-page.html +++ b/cms/templates/edit-static-page.html @@ -20,7 +20,7 @@
-

Page Settings

+

Page Settings

diff --git a/cms/templates/edit_subsection.html b/cms/templates/edit_subsection.html index c334724121..c3aed8a94f 100644 --- a/cms/templates/edit_subsection.html +++ b/cms/templates/edit_subsection.html @@ -48,7 +48,7 @@
-

Subsection Settings

+

Subsection Settings

diff --git a/cms/templates/unit.html b/cms/templates/unit.html index ef94d51576..f3a779604e 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -98,7 +98,7 @@
-

Unit Settings

+

Unit Settings

@@ -126,7 +126,7 @@
-

Unit Location

+

Unit Location

    diff --git a/common/lib/xmodule/xmodule/css/html/display.scss b/common/lib/xmodule/xmodule/css/html/display.scss new file mode 100644 index 0000000000..18794dd0b7 --- /dev/null +++ b/common/lib/xmodule/xmodule/css/html/display.scss @@ -0,0 +1,123 @@ +// HTML component display: +* { + line-height: 1.4em; +} + +h1 { + color: $baseFontColor; + font: normal 2em/1.4em $sans-serif; + letter-spacing: 1px; + margin: 0 0 1.416em 0; + } + +h2 { + color: #646464; + font: normal 1.2em/1.2em $sans-serif; + letter-spacing: 1px; + margin-bottom: 15px; + text-transform: uppercase; + -webkit-font-smoothing: antialiased; +} + +h3, h4, h5, h6 { + margin: 0 0 10px 0; + font-weight: 600; +} + +h3 { + font-size: 1.2em; +} + +h4 { + font-size: 1em; +} + +h5 { + font-size: .83em; +} + +h6 { + font-size: 0.75em; +} + +p { + margin-bottom: 1.416em; + font-size: 1em; + line-height: 1.6em !important; + color: $baseFontColor; +} + +em, i { + font-style: italic; +} + +strong, b { + font-style: bold; +} + +p + p, ul + p, ol + p { + margin-top: 20px; +} + +ol, ul { + margin: 1em 0; + padding: 0 0 0 1em; + color: $baseFontColor; + + li { + margin-bottom: 0.708em; + } +} + +ol { + list-style: decimal outside none; +} + +ul { + list-style: disc outside none; +} + +a { + &:link, &:visited, &:hover, &:active { + color: #1d9dd9; + } +} + +img { + max-width: 100%; +} + +pre { + margin: 1em 0; + color: $baseFontColor; + font-family: monospace, serif; + font-size: 1em; + white-space: pre-wrap; + word-wrap: break-word; +} + +code { + color: $baseFontColor; + font-family: monospace, serif; + background: none; + padding: 0; +} + +table { + width: 100%; + border-collapse: collapse; + font-size: 16px; +} + +th { + background: #eee; + font-weight: bold; +} + +table td, th { + margin: 20px 0; + padding: 10px; + border: 1px solid #ccc !important; + text-align: left; + font-size: 14px; +} \ No newline at end of file diff --git a/common/lib/xmodule/xmodule/css/html/edit.scss b/common/lib/xmodule/xmodule/css/html/edit.scss index 5897e3570b..bd9722df67 100644 --- a/common/lib/xmodule/xmodule/css/html/edit.scss +++ b/common/lib/xmodule/xmodule/css/html/edit.scss @@ -1,3 +1,4 @@ +// HTML component editor: .html-editor { @include clearfix(); diff --git a/common/lib/xmodule/xmodule/html_module.py b/common/lib/xmodule/xmodule/html_module.py index 33711c8161..612e78ce35 100644 --- a/common/lib/xmodule/xmodule/html_module.py +++ b/common/lib/xmodule/xmodule/html_module.py @@ -25,7 +25,8 @@ class HtmlModule(XModule): ] } js_module_name = "HTMLModule" - + css = {'scss': [resource_string(__name__, 'css/html/display.scss')]} + def get_html(self): return self.html diff --git a/common/lib/xmodule/xmodule/js/src/html/edit.coffee b/common/lib/xmodule/xmodule/js/src/html/edit.coffee index dfb197e204..35c4464c89 100644 --- a/common/lib/xmodule/xmodule/js/src/html/edit.coffee +++ b/common/lib/xmodule/xmodule/js/src/html/edit.coffee @@ -22,15 +22,24 @@ class @HTMLEditingDescriptor schema: "html5", # TODO: we should share this CSS with studio (and LMS) content_css : "/static/css/tiny-mce.css", + # Disable h4, h5, and h6 styles as we don't have CSS for them. + formats : { + h4: {}, + h5: {}, + h6: {} + }, + # Disable visual aid on borderless table. + visual:false, # We may want to add "styleselect" when we collect all styles used throughout the LMS - theme_advanced_buttons1 : "formatselect,bold,italic,underline,bullist,numlist,outdent,indent,blockquote,link,unlink", + theme_advanced_buttons1 : "formatselect,bold,italic,underline,|,bullist,numlist,outdent,indent,|,blockquote,wrapAsCode,|,link,unlink", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "none", theme_advanced_resizing : true, - theme_advanced_blockformats : "p,code,h2,h3,blockquote", + theme_advanced_blockformats : "p,pre,h1,h2,h3", width: '100%', height: '400px', + setup : HTMLEditingDescriptor.setupTinyMCE, # 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 @@ -39,13 +48,25 @@ class @HTMLEditingDescriptor @showingVisualEditor = true @element.on('click', '.editor-tabs .tab', @onSwitchEditor) + @setupTinyMCE: (ed) -> + ed.addButton('wrapAsCode', { + title : 'Code Block', + image : '/static/images/ico-tinymce-code.png', + onclick : () -> + ed.formatter.toggle('code') + }) + + ed.onNodeChange.add((editor, command, e) -> + command.setActive('wrapAsCode', e.nodeName == 'CODE') + ) + onSwitchEditor: (e)=> e.preventDefault(); if not $(e.currentTarget).hasClass('current') - $('.editor-tabs .current').removeClass('current') + $('.editor-tabs .current', @element).removeClass('current') $(e.currentTarget).addClass('current') - $('table.mceToolbar').toggleClass(HTMLEditingDescriptor.isInactiveClass) + $('table.mceToolbar', @element).toggleClass(HTMLEditingDescriptor.isInactiveClass) $(@advanced_editor.getWrapperElement()).toggleClass(HTMLEditingDescriptor.isInactiveClass) visualEditor = @getVisualEditor() diff --git a/common/static/images/ico-tinymce-code.png b/common/static/images/ico-tinymce-code.png new file mode 100644 index 0000000000..cc0b8e61f2 Binary files /dev/null and b/common/static/images/ico-tinymce-code.png differ diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 8d1b78a0eb..4d27798649 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -15,6 +15,8 @@ $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; $body-font-size: em(14); $body-line-height: golden-ratio(.875em, 1); $base-font-color: rgb(60,60,60); +$baseFontColor: rgb(60,60,60); +$base-font-color: rgb(60,60,60); $lighter-base-font-color: rgb(100,100,100); $blue: rgb(29,157,217);