From 70457176f1173603e7a4c5caa680ddb1417b2edf Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 17 Jan 2013 21:28:14 -0500 Subject: [PATCH 1/9] studio - stubbed in basic LMS styling to HTML displaygst --- cms/static/css/tiny-mce.css | 112 ++++++++++++------ cms/static/sass/_unit.scss | 78 ++++++++++++ .../lib/xmodule/xmodule/css/html/display.scss | 4 + common/lib/xmodule/xmodule/css/html/edit.scss | 1 + common/lib/xmodule/xmodule/html_module.py | 3 +- 5 files changed, 160 insertions(+), 38 deletions(-) create mode 100644 common/lib/xmodule/xmodule/css/html/display.scss diff --git a/cms/static/css/tiny-mce.css b/cms/static/css/tiny-mce.css index 7f32e59c8f..2d0154f41c 100644 --- a/cms/static/css/tiny-mce.css +++ b/cms/static/css/tiny-mce.css @@ -1,50 +1,88 @@ body { - 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; + 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; } -a { - color: #1d9dd9; - text-decoration: none; -} - -p { - font-size: 16px; - line-height: 1.6; +h1 { + color: #3c3c3c; + font-weight: normal; + font-size: 2em; + line-height: 1.4em; + letter-spacing: 1px; } h2 { - color: #646464; - font-size: 19px; - font-weight: 300; - letter-spacing: 1px; - margin-bottom: 15px; - text-transform: uppercase; + 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 { - font-size: 19px; - font-weight: 400; + font-size: 1.2em; + font-weight: 600; +} + +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; +} + +ol li, ul li { + margin-bottom: 0.708em; +} + +ol { + list-style: decimal outside none; +} + +ul { + list-style: disc outside none; +} + +a, a:link, a:visited, a:hover, a:active { + color: #1d9dd9; +} + +img { + max-width: 100%; } code { - margin: 0 2px; - padding: 0px 5px; - border-radius: 3px; - border: 1px solid #eaeaea; - white-space: nowrap; - font-family: Monaco, monospace; - font-size: 14px; - background-color: #f8f8f8; + font-family: monospace, serif; + background: none; } \ No newline at end of file diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index 5edce2419c..893f8547c9 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -554,3 +554,81 @@ body.unit { } } } + +// HTML component display: +.xmodule_HtmlModule { + line-height: 1.4em; + + h1 { + color: $baseFontColor; + font: normal 2em/1.4em $sans-serif; + letter-spacing: 1px; + } + + 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 { + font-size: 1.2em; + font-weight: 600; + } + + 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%; + } + + code { + color: $baseFontColor; + font-family: monospace, serif; + background: none; + } +} \ No newline at end of file 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..b2d10c8e7b --- /dev/null +++ b/common/lib/xmodule/xmodule/css/html/display.scss @@ -0,0 +1,4 @@ +// HTML component display: +.xmodule_HtmlModule { + +} \ 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 From e3a2749ff8a3ad857681a784f97e9766d7d57be6 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 22 Jan 2013 15:20:25 -0500 Subject: [PATCH 2/9] studio html editor - added in styles for TinyMCE table elements --- cms/static/css/tiny-mce.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/cms/static/css/tiny-mce.css b/cms/static/css/tiny-mce.css index 63d2bada94..35526f5192 100644 --- a/cms/static/css/tiny-mce.css +++ b/cms/static/css/tiny-mce.css @@ -86,4 +86,23 @@ img { code { font-family: monospace, serif; background: none; +} + +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 From b554eb5afe24ba6cdedce3f6f34e1b244bfd702e Mon Sep 17 00:00:00 2001 From: cahrens Date: Tue, 22 Jan 2013 15:28:47 -0500 Subject: [PATCH 3/9] Cleanup of format dropdown, toolbar buttons. --- .../xmodule/xmodule/js/src/html/edit.coffee | 25 ++++++++++++++++-- common/static/images/code.gif | Bin 0 -> 1224 bytes 2 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 common/static/images/code.gif diff --git a/common/lib/xmodule/xmodule/js/src/html/edit.coffee b/common/lib/xmodule/xmodule/js/src/html/edit.coffee index dfb197e204..62038de255 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,h1,h2,h3,pre", 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,6 +48,18 @@ class @HTMLEditingDescriptor @showingVisualEditor = true @element.on('click', '.editor-tabs .tab', @onSwitchEditor) + @setupTinyMCE: (ed) -> + ed.addButton('wrapAsCode', { + title : 'Code Block', + image : '/static/images/code.gif', + onclick : () -> + ed.formatter.toggle('code') + }) + + ed.onNodeChange.add((editor, command, e) -> + command.setActive('wrapAsCode', e.nodeName == 'CODE') + ) + onSwitchEditor: (e)=> e.preventDefault(); diff --git a/common/static/images/code.gif b/common/static/images/code.gif new file mode 100644 index 0000000000000000000000000000000000000000..918e6ddca0698626d7481f47a36515f379b38c43 GIT binary patch literal 1224 zcmZ?wbhEHb6lD-)Sj5htq@;BB?p($f#LuE|BC;)BYXoCToOwX zfwYZ%ML}Y6c4~=2Qfhi;o~_dR-TRdkGE;1o!cBb*d<&dYGcrA@ic*8C{6dnevXd=S zlxV%Qmue&kg&dz0$52&wylyQNJ0T*r*nQ$ zs)DJWfo`&anSp|tp`M|!iMhGCj)IYap@F`Ek-njkuA#Y=v5}R5fdUjL0c|TvNwW%a zaf8|g1^l#~=$>Fbx5m+O@q>*W`v>l<2HT7t|lGSUUA&@HaaD@m--%_~-hnc$LI zoLrPyP?DLSrvNfBF)6>a#8wIDQivCF3*g4)73+b$qnDhYt6z~=pl_&W0P+${p|3A~ zrMbCq)x{-2sR;LCHMlsWvLIDID784hv?w_hs9YIjRe_arQEFmIeo;t%ehw@Y12XbU z@{2R_3lyA#O%;3-lQZ)`e6V_7Un|eN;*!L?e zX-RQWVL^UgZccVqW=48iYD#iaVnTdeY)o`iWJGvaXh?8SV1U1$uaCEvr-!?ntBbRf zql3Mjt&O#nrG>efsfn=>FiYv_>S$|eYN)HJswgWdD#**p%1BE|N{EYziUS{o_%0&Nf4RGb^56E`PF-$^ED Date: Tue, 22 Jan 2013 15:47:09 -0500 Subject: [PATCH 4/9] change class on right element! --- common/lib/xmodule/xmodule/js/src/html/edit.coffee | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/common/lib/xmodule/xmodule/js/src/html/edit.coffee b/common/lib/xmodule/xmodule/js/src/html/edit.coffee index 62038de255..6318f002f1 100644 --- a/common/lib/xmodule/xmodule/js/src/html/edit.coffee +++ b/common/lib/xmodule/xmodule/js/src/html/edit.coffee @@ -64,9 +64,9 @@ class @HTMLEditingDescriptor 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() From aec7692d27d98cb0db0e5221631c889a74c3c0c8 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 22 Jan 2013 15:51:12 -0500 Subject: [PATCH 5/9] studio html editor - revised header styles for editing/displaying HTML components (including separating studio editing chrome from style rules) --- cms/static/css/tiny-mce.css | 23 ++++++++++- cms/static/sass/_base.scss | 2 +- cms/templates/edit-static-page.html | 2 +- cms/templates/edit_subsection.html | 2 +- cms/templates/unit.html | 4 +- .../lib/xmodule/xmodule/css/html/display.scss | 38 ++++++++++++++++++- 6 files changed, 63 insertions(+), 8 deletions(-) diff --git a/cms/static/css/tiny-mce.css b/cms/static/css/tiny-mce.css index 35526f5192..5ded7b84ac 100644 --- a/cms/static/css/tiny-mce.css +++ b/cms/static/css/tiny-mce.css @@ -21,6 +21,7 @@ h1 { font-size: 2em; line-height: 1.4em; letter-spacing: 1px; + margin: 0 0 1.416em 0; } h2 { @@ -34,16 +35,32 @@ h2 { -webkit-font-smoothing: antialiased; } +h3, h4, h5, h6 { + margin: 0 0 10px 0; + font-weight: 600; +} + h3 { font-size: 1.2em; - font-weight: 600; +} + +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; + color: #3c3c3c; } em, i { @@ -61,6 +78,7 @@ p + p, ul + p, ol + p { ol, ul { margin: 1em 0; padding: 0 0 0 1em; + color: #3c3c3c; } ol li, ul li { @@ -86,6 +104,7 @@ img { code { font-family: monospace, serif; background: none; + color: #3c3c3c; } table { 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 @@