Skip to content

Commit

Permalink
MDL-42660 TinyMCE: Fix padding etc to make TinyMCE work better on sma…
Browse files Browse the repository at this point in the history 
…ll screens
  • Loading branch information
@jsnfwlr
jsnfwlr authored and Damyon Wiese committed Nov 7, 2013
1 parent 1dd53c7 commit f897dbc
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 27 deletions.
4 changes: 2 additions & 2 deletions lib/editor/tinymce/settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@
$settings->add(new admin_setting_heading('tinymcegeneralheader', new lang_string('settings'), ''));
$default = "wrap,formatselect,wrap,bold,italic,wrap,bullist,numlist,wrap,link,unlink,wrap,image
undo,redo,wrap,underline,strikethrough,sub,sup,wrap,justifyleft,justifycenter,justifyright,wrap,outdent,indent,wrap,forecolor,backcolor,wrap,ltr,rtl,wrap,nonbreaking,charmap,table
undo,redo,wrap,underline,strikethrough,sub,sup,wrap,justifyleft,justifycenter,justifyright,wrap,outdent,indent,wrap,forecolor,backcolor,wrap,ltr,rtl,wrap
fontselect,fontsizeselect,wrap,code,search,replace,wrap,cleanup,removeformat,pastetext,pasteword,wrap,fullscreen";
fontselect,fontsizeselect,wrap,code,search,replace,wrap,nonbreaking,charmap,table,wrap,cleanup,removeformat,pastetext,pasteword,wrap,fullscreen";
$settings->add(new admin_setting_configtextarea('editor_tinymce/customtoolbar',
get_string('customtoolbar', 'editor_tinymce'), get_string('customtoolbar_desc', 'editor_tinymce', 'http://www.tinymce.com/wiki.php/TinyMCE3x:Buttons/controls'), $default, PARAM_RAW, 100, 8));
$settings->add(new admin_setting_configtextarea('editor_tinymce/fontselectlist',
Expand Down
2 changes: 1 addition & 1 deletion lib/editor/tinymce/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
.moodleSkin .mceLayout .mceToolbar .mceWrap {
clear: left;
width: 100%;
height: 8px;
height: 4px;
}
.moodleSkin .mceLayout .mceToolbar .mceNoWrap {
clear: none;
Expand Down
Binary file modified lib/editor/tinymce/tiny_mce/3.5.8/themes/advanced/skins/moodle/img/button_bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 32 additions & 24 deletions lib/editor/tinymce/tiny_mce/3.5.8/themes/advanced/skins/moodle/ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,13 @@
/* New Theme */
.moodleSkin table {background:transparent; border-spacing: 0; }
.moodleSkin iframe {display:block;}
.moodleSkin .mceToolbar {min-height:30px; margin: 9px;}
.moodleSkin .mceToolbar {min-height:30px; margin: 4px;}
.moodleSkin .mceToolbar td + td { background: #fff; border: 1px solid #CCCCCC; border-right: none; border-bottom: 1px solid #b3b3b3; }
.moodleSkin .mceToolbar td + td:empty { display: none;}
.moodleSkin .mceToolbar a.mceButton { display:block; height: 30px; width: 40px; margin: 0; padding: 0; }
.moodleSkin .mceToolbar a span.mceIcon { height: 30px; width: 40px; margin: 0; }
.moodleSkin .mceToolbar a span.mceIcon img { padding: 7px 13px; }
.dir-rtl .moodleSkin .mceToolbar select,
.moodleSkin .mceToolbar a.mceButton { display:block; height: 30px; width: 30px; margin: 0; padding: 0; }
.moodleSkin .mceToolbar a span.mceIcon { height: 30px; width: 30px; margin: 0; }
.moodleSkin .mceToolbar a span.mceIcon img { padding: 7px 7px; }
.moodleSkin .mceToolbar .mceGroupStart + td,
.moodleSkin .mceToolbar .mceToolbarStart + td,
.moodleSkin .mceToolbar .mceGroupStart + td a,
Expand All @@ -21,24 +22,30 @@
.moodleSkin .mceToolbar .mceToolbarStart + td.mceGroupEnd,
.moodleSkin .mceToolbar .mceToolbarStart + td.mceGroupEnd a { border-radius: 4px; }
.moodleSkin .mceToolbar .mceLast { border: none; }
.moodleSkin .mceToolbar .mceGroupStart { border: none; width: 9px; background: transparent;}
.moodleSkin .mceToolbar .mceGroupEnd { border-right: 1px solid #CCCCCC; border-radius: 0 4px 4px 0; border-left: 1px solid #CCCCCC; margin-right: 9px; }
.moodleSkin .mceToolbar .mceGroupStart { border: none; width: 4px; background: transparent;}
.moodleSkin .mceToolbar .mceGroupEnd { border-right: 1px solid #CCCCCC; border-radius: 0 4px 4px 0; border-left: 1px solid #CCCCCC; margin-right: 4px; }
.moodleSkin .mceToolbar .mceGroupEnd a { border-radius: 0 4px 4px 0; }
.moodleSkin .mceToolbar td div .mceGroupEnd { border: none;}
.moodleSkin .mceToolbar .mceListBox { height: 30px; }
.moodleSkin .mceToolbar .mceListBox td { border: none; border-radius: 0; }
.moodleSkin .mceToolbar .mceListBox td a { border: none; border-radius: 0; }
.moodleSkin .mceToolbar .mceToolbarEndPlaceholder { display: none; }
.moodleSkin .mceToolbar .mceToolbarEnd { background: transparent; border: 0; }
.moodleSkin.mceListBoxMenu { margin-left: -4px; margin-top: 2px; }
.moodleSkin.mceListBoxMenu { margin-left: -4px; margin-top: 0px; }


.moodleSkin .mceToolbar .mceGroupStart + td .mceLast a { border-radius: 0;}


.dir-rtl .moodleSkin table {background:transparent; border-spacing: 0; }
.dir-rtl .moodleSkin iframe {display:block;}
.dir-rtl .moodleSkin .mceToolbar {min-height:30px; margin: 9px;}
.dir-rtl .moodleSkin .mceToolbar {min-height:30px; margin: 4px;}
.dir-rtl .moodleSkin .mceToolbar td + td { background: #fff; border: 1px solid #CCCCCC; border-left: none; border-bottom: 1px solid #b3b3b3; }
.dir-rtl .moodleSkin .mceToolbar td + td:empty { display: none;}
.dir-rtl .moodleSkin .mceToolbar a.mceButton { display:block; height: 30px; width: 40px; margin: 0; padding: 0; }
.dir-rtl .moodleSkin .mceToolbar a span.mceIcon { height: 30px; width: 40px; margin: 0; }
.dir-rtl .moodleSkin .mceToolbar a span.mceIcon img { padding: 7px 13px; }
.dir-rtl .moodleSkin .mceToolbar select,
.dir-rtl .moodleSkin .mceToolbar a.mceButton { display:block; height: 30px; width: 30px; margin: 0; padding: 0; }
.dir-rtl .moodleSkin .mceToolbar a span.mceIcon { height: 30px; width: 30px; margin: 0; }
.dir-rtl .moodleSkin .mceToolbar a span.mceIcon img { padding: 7px 7px; }
.dir-rtl .moodleSkin .mceToolbar .mceGroupStart + td,
.dir-rtl .moodleSkin .mceToolbar .mceToolbarStart + td,
.dir-rtl .moodleSkin .mceToolbar .mceGroupStart + td a,
Expand All @@ -48,8 +55,8 @@
.dir-rtl .moodleSkin .mceToolbar .mceToolbarStart + td.mceGroupEnd,
.dir-rtl .moodleSkin .mceToolbar .mceToolbarStart + td.mceGroupEnd a { border-radius: 4px; }
.dir-rtl .moodleSkin .mceToolbar .mceLast { border: none; }
.dir-rtl .moodleSkin .mceToolbar .mceGroupStart { border: none; width: 9px; background: transparent;}
.dir-rtl .moodleSkin .mceToolbar .mceGroupEnd { border-left: 1px solid #CCCCCC; border-radius: 4px 0 0 4px; border-right: 1px solid #CCCCCC; margin-left: 9px; }
.dir-rtl .moodleSkin .mceToolbar .mceGroupStart { border: none; width: 4px; background: transparent;}
.dir-rtl .moodleSkin .mceToolbar .mceGroupEnd { border-left: 1px solid #CCCCCC; border-radius: 4px 0 0 4px; border-right: 1px solid #CCCCCC; margin-left: 4px; }
.dir-rtl .moodleSkin .mceToolbar .mceGroupEnd a { border-radius: 4px 0 0 4px; }
.dir-rtl .moodleSkin .mceToolbar td div .mceGroupEnd { border: none; }
.dir-rtl .moodleSkin .mceToolbar .mceListBox td { border: none; border-radius: 0; }
Expand Down Expand Up @@ -89,13 +96,13 @@
.moodleSkin .mceButtonDisabled .mceButtonLabel {color:#888}

/* Separator */
.moodleSkin .mceSeparator {display:block; width:0px; height:22px; margin: 0 2px 0 1px; border-left: 1px solid #BBB }
.moodleSkin .mceSeparator {display:none;}

/* ListBox */
.moodleSkin .mceListBox {padding: 0 3px}
.moodleSkin .mceListBox, .moodleSkin .mceListBox a {display:block}
.moodleSkin .mceListBox .mceText {padding-left:4px; text-align:left; width:70px; background:#eaf2fb; font-family:Tahoma,Verdana,Arial,Helvetica; font-size:11px; height:20px; line-height:20px; overflow:hidden}
.moodleSkin .mceListBox .mceOpen {width:14px; height:22px; background:url(img/button_bg.png) -66px 0}
.moodleSkin .mceListBox .mceText {padding-left:4px; text-align:left; width:70px; background:#eaf2fb; font-family:Tahoma,Verdana,Arial,Helvetica; font-size:11px; height:30px; line-height:30px; overflow:hidden}
.moodleSkin .mceListBox .mceOpen {width:14px; height:30px; background:url(img/button_bg.png) -66px 0}
.moodleSkin table.mceListBoxEnabled:hover .mceText, .moodleSkin .mceListBoxHover .mceText, .moodleSkin .mceListBoxSelected .mceText {background:#FFF}
.moodleSkin table.mceListBoxEnabled:hover .mceOpen, .moodleSkin .mceListBoxHover .mceOpen, .moodleSkin .mceListBoxSelected .mceOpen {background-position:-66px -22px}
.moodleSkin .mceListBoxDisabled .mceText {color:gray}
Expand All @@ -106,19 +113,20 @@
/* SplitButton */
.moodleSkin .mceSplitButton a {display:block; direction:ltr; height: 22px;}
.moodleSkin .mceSplitButton, .moodleSkin .mceSplitButton span {display:block; height:30px; direction:ltr; }
.moodleSkin .mceSplitButton { width: 50px; }
.moodleSkin .mceSplitButton:hover {background-image: radial-gradient(ellipse at center, #ffffff 60%,#dfdfdf 100%); cursor: pointer;}
.moodleSkin .mceSplitButton:active {background-image: radial-gradient(ellipse at center, #ffffff 40%,#dfdfdf 100%);}
.moodleSkin .mceSplitButton .mceFirst { padding: 4px 0 0 9px; }
.moodleSkin .mceSplitButton .mceLast { background: transparent;}
.moodleSkin .mceSplitButton {width:48px;}
.moodleSkin .mceSplitButton .mceFirst:hover {background-image:radial-gradient(ellipse at center, #ffffff 60%,#dfdfdf 100%); cursor:pointer;}
.moodleSkin .mceSplitButton .mceFirst:active {background-image:radial-gradient(ellipse at center, #ffffff 40%,#dfdfdf 100%);}
.moodleSkin .mceSplitButton .mceFirst {width:30px; padding:4px 0 0 6px;}
.moodleSkin .mceSplitButton .mceLast {background: transparent; width: 15px;}
.moodleSkin .mceSplitButton a.mceAction {width:20px}
.moodleSkin .mceSplitButton a.mceOpen {width:10px; background:url(img/button_bg.png) 44px 0}
.moodleSkin .mceSplitButton a.mceOpen {width:12px; background:url(img/button_bg.png) -66px 0px; border-left: 1px dashed #DDD; border-radius: 0; height: 30px;}
.moodleSkin .mceSplitButton span.mceOpen {display:none}
.moodleSkin table.mceSplitButtonEnabled:hover a.mceOpen, .moodleSkin .mceSplitButtonHover a.mceOpen, .moodleSkin .mceSplitButtonSelected a.mceOpen {background-position:-44px -44px}
.moodleSkin table.mceSplitButtonEnabled:hover a.mceOpen, .moodleSkin .mceSplitButtonHover a.mceOpen, .moodleSkin .mceSplitButtonSelected a.mceOpen {background-position:-66px -22px;}
.moodleSkin .mceSplitButtonDisabled .mceAction {opacity:0.3;}
.moodleSkin .mceSplitButtonActive {background-position:0 -44px}

/* ColorSplitButton */
.moodleSkin div.mceColorSplitMenu { margin-left: -1px; }
.moodleSkin div.mceColorSplitMenu table {background:#FFF; border: 1px solid #BBB;}
.moodleSkin .mceColorSplitMenu td {padding:2px}
.moodleSkin .mceColorSplitMenu a {display:block; width:18px; height:18px; overflow:hidden; border:1px solid #BBB}
Expand All @@ -127,7 +135,7 @@
.moodleSkin .mceColorSplitMenu a.mceMoreColors:hover {border:1px solid #0A246A; background-color:#B6BDD2}
.moodleSkin a.mceMoreColors:hover {border:1px solid #0A246A}
/* Font selector preview stuff */
.moodleSkin .mce_forecolor span.mceAction, .moodleSkin .mce_backcolor span.mceAction {height:21px;overflow:hidden; position: relative; z-index: 1 }
.moodleSkin .mce_forecolor span.mceAction, .moodleSkin .mce_backcolor span.mceAction {height:21px;overflow:hidden; position: relative; z-index: 1; }
.moodleSkin .mceColorPreview {width:16px; height:16px; overflow:hidden; margin-left: 2px; position: relative; top: -18px;}

/* Menu */
Expand Down

0 comments on commit f897dbc

Please sign in to comment.