Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Studio: syncing up font-based styling between TinyMCE editing view and Studio HTML xmodule preview

Browse Source 
Separating and documenting tinyMCE font imports from customized vendor code and customized render styling css files (because font must load first in iframe).

Add the TinyMCE font file to the CMS pipeline.
This commit is contained in:
Brian Talbot
2014-04-01 16:54:19 -04:00
committed by cahrens
parent b04a0d9986
commit 473ed4cc89
4 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
cms/envs/common.py
View File

@@ -316,6 +316,7 @@ PIPELINE_CSS = {
},
'style-vendor-tinymce-content': {
'source_filenames': [
'css/tinymce-studio-content-fonts.css',
'js/vendor/tinymce/js/tinymce/skins/studio-tmce4/content.min.css',
'css/tinymce-studio-content.css'
],

2
common/static/css/tinymce-studio-content-fonts.css Normal file
View File

@@ -0,0 +1,2 @@
/* NOTE: This file, which loads all necessary fonts for rendering Studio UI, is 1 of 3 CSS files compiled in our production pipeline */
@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);

7
common/static/css/tinymce-studio-content.css
View File

@@ -1,10 +1,9 @@
@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
/* NOTE: This file, which customizes mid-editing styling to match xmodule preview rendering, is 3 of 3 CSS files compiled in our production pipeline */
.mce-content-body {
padding: 10px;
background-color: #fff;
font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-size: 16px;
line-height: 1.6;
color: #3c3c3c;
scrollbar-3dlight-color: #F0F0EE;
@@ -28,7 +27,7 @@
.mce-content-body h2 {
color: #646464;
font-weight: normal;
font-weight: 300;
font-size: 1.2em;
line-height: 1.2em;
letter-spacing: 1px;

1
common/static/js/vendor/tinymce/js/tinymce/skins/studio-tmce4/content.min.css vendored
View File

@@ -1 +1,2 @@
/* NOTE: This file, which based off of TinyMCE's vendor content styling (but customized to help with scoping), is 2 of 3 CSS files compiled in our production pipeline */
.mce-content-body{background-color:#fff;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;scrollbar-3dlight-color:#f0f0ee;scrollbar-arrow-color:#676662;scrollbar-base-color:#f0f0ee;scrollbar-darkshadow-color:#ddd;scrollbar-face-color:#e0e0dd;scrollbar-highlight-color:#f0f0ee;scrollbar-shadow-color:#f0f0ee;scrollbar-track-color:#f5f5f5}.mce-content-body td,.mce-content-body th{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:11px}.mce-content-body .mce-object{border:1px dotted #3a3a3a;background:#d5d5d5 url(img/object.gif) no-repeat center}.mce-content-body .mce-pagebreak{cursor:default;display:block;width:100%;height:5px;border:1px dashed #666;margin-top:15px}.mce-content-body .mce-item-anchor{cursor:default;display:inline-block;-webkit-user-select:all;-webkit-user-modify:read-only;-moz-user-select:all;-moz-user-modify:read-only;user-select:all;user-modify:read-only;width:9px!important;height:9px!important;border:1px dotted #3a3a3a;background:#d5d5d5 url(img/anchor.gif) no-repeat center}.mce-content-body .mce-nbsp{background:#AAA}.mce-content-body hr{cursor:default}.mce-content-body .mce-match-marker{background:#AAA;color:#fff}.mce-content-body .mce-match-marker-selected{background:#39f;color:#fff}.mce-content-body .mce-spellchecker-word{background:url(img/wline.gif) repeat-x bottom left;cursor:default}.mce-content-body .mce-item-table,.mce-content-body .mce-item-table caption,.mce-content-body .mce-item-table td,.mce-content-body .mce-item-table th{border:1px dashed #BBB}.mce-content-body td.mce-item-selected,.mce-content-body th.mce-item-selected{background-color:#39f!important}.mce-content-body .mce-edit-focus{outline:1px dotted #333}