MDL-43954 editor_atto: Fix styling for IE8 in clean and standard

safatshahin · Mar 26, 2014 · 4c37c1f · 4c37c1f
1 parent 39e2a67
commit 4c37c1f
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 43 deletions.
diff --git a/lib/editor/atto/styles.css b/lib/editor/atto/styles.css
@@ -1,5 +1,6 @@
 .editor_atto_content_wrap {
     background-color: white;
+    color: #333;
 }
 .editor_atto_content {
     padding: 4px;
@@ -31,7 +32,7 @@ div.editor_atto_toolbar {
 div.editor_atto_toolbar button {
     padding: 3px 9px;
     background: none;
-    border: 0px;
+    border: 0;
     margin: 0;
     border-radius: 0;
     cursor: pointer;
@@ -57,24 +58,33 @@ div.editor_atto_toolbar button[disabled] {
     background-color: #dfdfdf;
 }
 
-div.editor_atto_toolbar button img {
+div.editor_atto_toolbar button img.icon {
     padding: 1px;
     margin: 1px 0;
+    /* The following is dedicated to the beloved IE8, clashing with Bootstrap. God bless you IE. */
+    vertical-align: text-bottom;
+    width: auto;
+    height: auto;
 }
 
 div.editor_atto_toolbar div.atto_group {
     display: inline-block;
     border: 1px solid #CCC;
     border-bottom: 1px solid #B3B3B3;
     border-radius: 4px;
-    margin: 9px 0px 0px 9px;
+    margin: 9px 0 0 9px;
     background: #FFF;
 }
 
 .editor_atto_content img {
     resize: both; overflow: auto;
 }
 
+.atto_hasmenu {
+    /* IE8 places the images on top of each other if that is not set. */
+    white-space: nowrap;
+}
+
 .atto_menuentry img {
     width: 16px;
     height: 16px;
@@ -83,6 +93,7 @@ div.editor_atto_toolbar div.atto_group {
 .atto_menu {
     background: white;
     padding: 1px;
+    white-space: inherit;
 }
 
 .atto_menu a {
@@ -129,7 +140,7 @@ body.dir-rtl div.editor_atto_toolbar img.icon {
 }
 
 body.dir-rtl div.editor_atto_toolbar div.atto_group {
-    margin: 9px 9px 0px 0px;
+    margin: 9px 9px 0 0;
 }
 
 .atto_control {
@@ -152,12 +163,12 @@ div.editor_atto_content:hover .atto_control {
 }
 .editor_atto_controlmenu li {
     list-style-type: none;
-    padding: 0px;
-    margin: 0px;
+    padding: 0;
+    margin: 0;
 }
 .editor_atto_controlmenu ul {
-    padding: 0px;
-    margin: 0px;
+    padding: 0;
+    margin: 0;
 }
 .editor_atto_controlmenu .moodle-dialogue-hd,
 .editor_atto_controlmenu .moodle-dialogue-ft {

diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js
@@ -466,7 +466,6 @@ M.editor_atto = M.editor_atto || {
                                             'aria-live="off" ' +
                                             'class="' + CSS.CONTENT + '" />');
 
-        var cssfont = '';
         var toolbar = Y.Node.create('<div class="' + CSS.TOOLBAR + '" id="' + params.elementid + '_toolbar" role="toolbar" aria-live="off"/>');
 
         // Editable content wrapper.
@@ -487,13 +486,7 @@ M.editor_atto = M.editor_atto || {
         wrapper.appendChild(toolbar);
         wrapper.appendChild(content);
 
-        // Bleh - why are we sent a url and not the css to apply directly?
-        var css = Y.io(params.content_css, { sync: true });
-        var pos = css.responseText.indexOf('font:');
-        if (pos) {
-            cssfont = css.responseText.substring(pos + 'font:'.length, css.responseText.length - 1);
-            atto.setStyle('font', cssfont);
-        }
+        // Style the editor.
         atto.setStyle('minHeight', (1.2 * (textarea.getAttribute('rows'))) + 'em');
 
         // Copy text to editable div.
@@ -504,9 +497,6 @@ M.editor_atto = M.editor_atto || {
 
         // Add the toolbar and editable zone to the page.
         textarea.get('parentNode').insert(wrapper, textarea);
-        atto.setStyle('color', textarea.getStyle('color'));
-        atto.setStyle('lineHeight', textarea.getStyle('lineHeight'));
-        atto.setStyle('fontSize', textarea.getStyle('fontSize'));
 
         // Disable odd inline CSS styles.
         try {
@@ -523,6 +513,7 @@ M.editor_atto = M.editor_atto || {
                 }
             }
         }
+
         // Hide the old textarea.
         textarea.hide();
         atto.on('keydown', this.save_selection, this, params.elementid);