From b21f8bd3ef368563f2debf4e0debfb319ce763ea Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Tue, 27 May 2014 20:08:36 +0200 Subject: Implemented image selector dialog for TinyMCE, css fixes in classic skin for TinyMCE4 --- skins/classic/common.css | 127 +++++++++++++++++++++++++++++++++++--- skins/classic/images/filedrop.png | Bin 0 -> 605 bytes skins/classic/mail.css | 7 --- skins/larry/mail.css | 1 + skins/larry/styles.css | 93 ++++++++++++++++++++++++++++ skins/larry/ui.js | 2 +- 6 files changed, 214 insertions(+), 16 deletions(-) create mode 100644 skins/classic/images/filedrop.png (limited to 'skins') diff --git a/skins/classic/common.css b/skins/classic/common.css index bad2114c8..3ebe82dab 100644 --- a/skins/classic/common.css +++ b/skins/classic/common.css @@ -597,14 +597,6 @@ img.uploading height: 16px; } -.mce-btn-small button { - height: 22px; -} - -.mce-btn-small i { - line-height: 16px !important; - vertical-align: text-top !important; -} /***** common table settings ******/ @@ -1122,3 +1114,122 @@ fieldset.tabbed .quota_text_high { color: white; } .quota_text_mid { color: #666; } .quota_text_low { color: #666; } + + +/********** TinyMCE styles **********/ +.mce-btn-small button +{ + height: 22px; +} + +.mce-btn-small i +{ + line-height: 16px !important; + vertical-align: text-top !important; +} + +.mce-combobox button +{ + padding: 6px 8px !important; +} + +.mce-tinymce, +.mce-panel.mce-toolbar-grp +{ + border: 0 !important; +} + +#image-selector-list +{ + position: absolute; + top: 0; + left: 0; + right: 152px; + height: 100%; + overflow-x: hidden; + overflow-y: auto; +} + +#image-selector-form +{ + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 150px; + border: 0; + border: 1px solid #FFF; + border-left: 1px solid #DDD; + background: url(images/filedrop.png) center bottom no-repeat; + text-align: center; + padding-top: 10px; +} + +#image-upload-button +{ + width: 80%; + height: 30px; +} + +#image-upload-button span +{ + position: absolute; + width: 100%; + text-align: center; + line-height: 30px; +} + +#image-selector-list li +{ + line-height: 80px; + padding: 2px 0 2px 3px; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; +} + +#image-selector-list li:hover +{ + background-color: #F0F0F0; +} + +#image-selector-list ul li img +{ + vertical-align: middle; + max-height: 80px; +} + +#image-selector-list ul li span.name +{ + vertical-align: middle; + font-weight: bold; + padding-left: 10px; + line-height: 80px; + vertical-align: middle; +} + +#image-selector-list ul li span.img +{ + width: 80px; + text-align: center; + display: inline-block; + overflow: hidden; + line-height: 80px; + vertical-align: middle; +} + +#image-selector-form.droptarget.hover +{ + background-color: #F0F0EE; + box-shadow: 0 0 5px 0 #999; + -moz-box-shadow: 0 0 5px 0 #999; + -o-box-shadow: 0 0 5px 0 #999; +} + +div.mce-abs-end div.hint +{ + line-height: 50px; + padding-left: 10px; + color: #999; + text-shadow: 0 1px 1px #FFF; +} diff --git a/skins/classic/images/filedrop.png b/skins/classic/images/filedrop.png new file mode 100644 index 000000000..d4d455bdf Binary files /dev/null and b/skins/classic/images/filedrop.png differ diff --git a/skins/classic/mail.css b/skins/classic/mail.css index a640c0817..f6459627f 100644 --- a/skins/classic/mail.css +++ b/skins/classic/mail.css @@ -1520,13 +1520,6 @@ div.hide-headers outline: none; } -.mce-container.mce-panel -{ - border: none; - border-bottom: 1px solid #ccc; - background-image: none; -} - #compose-headers { width: 100%; diff --git a/skins/larry/mail.css b/skins/larry/mail.css index 3f8a3905e..ca29c79b4 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -1550,6 +1550,7 @@ div.message-partheaders .headers-table td.header { #composebodycontainer .mce-tinymce { border: 0 !important; + margin-top: 1px; } #composebodycontainer .mce-panel { diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 4cdf0f0f3..5bade1c0c 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -2599,3 +2599,96 @@ fieldset.tab { padding: 0; margin-left: 0; } + +/*** image selector in HTML editor ***/ +#image-selector-list { + position: absolute; + top: 0; + left: 0; + right: 152px; + height: 100%; + overflow-x: hidden; + overflow-y: auto; +} + +#image-selector-form { + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 150px; + border: 0; + border: 1px solid #FFF; + border-left: 1px solid #DDD; + background: url(images/filedrop.png) center bottom no-repeat; + text-align: center; + padding-top: 10px; +} + +#image-upload-button { + width: 80%; + height: 30px; +} + +#image-upload-button span { + position: absolute; + width: 100%; + text-align: center; + line-height: 30px; +} + +#image-selector-list li { + line-height: 80px; + padding: 2px 0 2px 3px; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; +} + +#image-selector-list li:hover { + background-color: #F0F0F0; +} + +#image-selector-list ul li img { + vertical-align: middle; + max-height: 80px; +} + +#image-selector-list ul li span.name { + vertical-align: middle; + font-weight: bold; + padding-left: 10px; +} + +#image-selector-list ul li span.img { + height: 80px; + width: 80px; + text-align: center; + display: inline-block; + overflow: hidden; + line-height: 80px; +} + +#image-selector-form.droptarget.hover, +#image-selector-form.droptarget.active { + border: 1px solid #019bc6; + box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5); + -moz-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5); + -webkit-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5); + -o-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5); +} + +#image-selector-form.droptarget.hover { + background-color: #d9ecf4; + box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); + -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); + -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); + -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); +} + +div.mce-abs-end div.hint { + line-height: 50px; + padding-left: 10px; + color: #999; + text-shadow: 0 1px 1px #FFF; +} diff --git a/skins/larry/ui.js b/skins/larry/ui.js index c85c37257..5ae3962d0 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -527,7 +527,7 @@ function rcube_mail_ui() h = body.parent().height() - 8; body.width(w).height(h); - $('#composebodycontainer > div').width(w+8).css('margin-top', '1px'); + $('#composebodycontainer > div').width(w+8); $('#composebody_ifr').height(h + 4 - $('div.mce-toolbar').height()); $('#googie_edit_layer').height(h - 8); // $('#composebodycontainer')[(btns ? 'addClass' : 'removeClass')]('buttons'); -- cgit v1.2.3