Fix couple of glitches on mail splitter:

- Remove extra borders
- Fix preview frame not getting right top position
- Re-arrange toolbar widget in preview pane to always get fullwidth
This commit is contained in:
Hadi Nategh 2017-06-28 15:46:22 +02:00
parent 0cda97d7ac
commit 05b2f22a95
6 changed files with 49 additions and 54 deletions

View File

@ -905,7 +905,7 @@ app.classes.mail = AppJS.extend(
{ {
// Need to make sure that the iframe is fullyLoad before calculation // Need to make sure that the iframe is fullyLoad before calculation
window.setTimeout(function(){ window.setTimeout(function(){
var lastEl = $preview_iframe.prev().prev(); var lastEl = $preview_iframe.prev();
// Top offset of preview iframe calculated from top level // Top offset of preview iframe calculated from top level
var iframeTop = $preview_iframe.offset().top; var iframeTop = $preview_iframe.offset().top;
while (lastEl.css('display') === "none") while (lastEl.css('display') === "none")

View File

@ -506,11 +506,10 @@ div.mail-compose_fileselector {
} }
#mail-index_mailPreviewContainer { #mail-index_mailPreviewContainer {
position: absolute; position: absolute;
border: 1px solid silver;
top: 9em; top: 9em;
bottom: 0; bottom: 0;
left: 3px; left: 0px;
right: 0; right: 5px;
} }
#mail-index_previewAttachmentArea { #mail-index_previewAttachmentArea {
background-color:#f0f0f0; background-color:#f0f0f0;

View File

@ -4,8 +4,9 @@
<overlay> <overlay>
<template id="mail.index.splitter" height="100%" template="" lang="" group="0" version="1.9.001"> <template id="mail.index.splitter" height="100%" template="" lang="" group="0" version="1.9.001">
<split dock_side="bottomDock" id="mailSplitter"> <split dock_side="bottomDock" id="mailSplitter">
<nextmatch id="nm" onselect="app.mail.mail_preview" template="mail.index.rows" header_left="mail.index.add" header_right="mail.index.header_right"/> <nextmatch id="nm" onselect="app.mail.mail_preview" class="" template="mail.index.rows" header_left="mail.index.add" header_right="mail.index.header_right"/>
<vbox id="mailPreview" width="100%"> <vbox id="mailPreview" width="100%">
<toolbar id="toolbar"/>
<box id="blank" disabled="false"> <box id="blank" disabled="false">
<image src="mail"/> <image src="mail"/>
<description value="Select an item to read"/> <description value="Select an item to read"/>
@ -67,10 +68,9 @@
</grid> </grid>
<buttononly class="et2_button ui-button" label="Show all attachments" image="foldertree_nolines_plus" width="16px" height="16px" onclick="app.mail.showAllHeader"/> <buttononly class="et2_button ui-button" label="Show all attachments" image="foldertree_nolines_plus" width="16px" height="16px" onclick="app.mail.showAllHeader"/>
</hbox> </hbox>
<toolbar id="toolbar" class="mailPreviewIcons"/> <box id="mailPreviewContainer">
<box id="mailPreviewContainer"> <iframe frameborder="1" id="messageIFRAME" scrolling="auto"/>
<iframe frameborder="1" id="messageIFRAME" scrolling="auto"/> </box>
</box>
</vbox> </vbox>
</split> </split>
</template> </template>

View File

@ -520,11 +520,10 @@ div.mail-compose_fileselector {
} }
#mail-index_mailPreviewContainer { #mail-index_mailPreviewContainer {
position: absolute; position: absolute;
border: 1px solid silver;
top: 9em; top: 9em;
bottom: 0; bottom: 0;
left: 3px; left: 0px;
right: 0; right: 5px;
} }
#mail-index_previewAttachmentArea { #mail-index_previewAttachmentArea {
background-color: #f0f0f0; background-color: #f0f0f0;
@ -959,13 +958,18 @@ body {
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
} }
#mail-index div.splitter-bar, #mail-index div.splitter-bar {
background-color: rgba(179, 39, 39, 0);
border-right: 0;
border-top: 0;
border-bottom: 0;
}
#mail-index div.splitter-bar-horizontal { #mail-index div.splitter-bar-horizontal {
background-color: #ffc200; border-top: 1px solid #B4B4B4;
border-left: 0;
} }
#mail-index div#mail-index_mailPreview { #mail-index div#mail-index_mailPreview {
margin: 0; margin: 0;
background-color: #fafafa;
} }
#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersFrom { #mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersFrom {
width: 50%; width: 50%;
@ -1983,11 +1987,10 @@ input[type=button] {
} }
#mail-index_mailPreviewContainer { #mail-index_mailPreviewContainer {
position: absolute; position: absolute;
border: 1px solid .color_10_gray; border-top: 1px solid silver;
top: 113px;
bottom: 0; bottom: 0;
left: 3px; left: 0px;
right: 0; right: 5px;
} }
/*#######################################################*/ /*#######################################################*/
/*# ICON # ICON # ICON # ICON #ICON # ICON# ICON # ICON #*/ /*# ICON # ICON # ICON # ICON #ICON # ICON# ICON # ICON #*/
@ -2005,10 +2008,8 @@ input[type=button] {
height: auto; height: auto;
} }
#mail-index_toolbar { #mail-index_toolbar {
/*padding: 0px;*/
background: none; background: none;
/*margin: 5px 5px 0 0;*/ height: 35px;
/*border: none;*/
/* Elemente */ /* Elemente */
} }
#mail-index_toolbar #toolbar-actionlist { #mail-index_toolbar #toolbar-actionlist {

View File

@ -508,11 +508,10 @@ div.mail-compose_fileselector {
} }
#mail-index_mailPreviewContainer { #mail-index_mailPreviewContainer {
position: absolute; position: absolute;
border: 1px solid silver;
top: 9em; top: 9em;
bottom: 0; bottom: 0;
left: 3px; left: 0px;
right: 0; right: 5px;
} }
#mail-index_previewAttachmentArea { #mail-index_previewAttachmentArea {
background-color: #f0f0f0; background-color: #f0f0f0;
@ -947,13 +946,18 @@ body {
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
} }
#mail-index div.splitter-bar, #mail-index div.splitter-bar {
background-color: rgba(179, 39, 39, 0);
border-right: 0;
border-top: 0;
border-bottom: 0;
}
#mail-index div.splitter-bar-horizontal { #mail-index div.splitter-bar-horizontal {
background-color: #ffc200; border-top: 1px solid #B4B4B4;
border-left: 0;
} }
#mail-index div#mail-index_mailPreview { #mail-index div#mail-index_mailPreview {
margin: 0; margin: 0;
background-color: #fafafa;
} }
#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersFrom { #mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersFrom {
width: 50%; width: 50%;
@ -1971,11 +1975,10 @@ input[type=button] {
} }
#mail-index_mailPreviewContainer { #mail-index_mailPreviewContainer {
position: absolute; position: absolute;
border: 1px solid .color_10_gray; border-top: 1px solid silver;
top: 113px;
bottom: 0; bottom: 0;
left: 3px; left: 0px;
right: 0; right: 5px;
} }
/*#######################################################*/ /*#######################################################*/
/*# ICON # ICON # ICON # ICON #ICON # ICON# ICON # ICON #*/ /*# ICON # ICON # ICON # ICON #ICON # ICON# ICON # ICON #*/
@ -1993,10 +1996,8 @@ input[type=button] {
height: auto; height: auto;
} }
#mail-index_toolbar { #mail-index_toolbar {
/*padding: 0px;*/
background: none; background: none;
/*margin: 5px 5px 0 0;*/ height: 35px;
/*border: none;*/
/* Elemente */ /* Elemente */
} }
#mail-index_toolbar #toolbar-actionlist { #mail-index_toolbar #toolbar-actionlist {

View File

@ -92,18 +92,20 @@ body {
tr.mail div span {.box_shadow_none;} tr.mail div span {.box_shadow_none;}
} // Ende: Box mit Header und Liste } // Ende: Box mit Header und Liste
div.splitter-bar {
// Splitterbar background-color: rgba(179, 39, 39, 0);
div.splitter-bar, border-right: 0;
border-top: 0;
border-bottom: 0;
}
div.splitter-bar-horizontal { div.splitter-bar-horizontal {
background-color: @color_splitter_bar; border-top:1px solid #B4B4B4;
border-left:0;
} }
// Ansicht der Emails // Ansicht der Emails
div#mail-index_mailPreview { div#mail-index_mailPreview {
margin: 0; margin: 0;
.background_color_5_gray;
// From // From
div#mail-index_mailPreviewHeadersFrom { div#mail-index_mailPreviewHeadersFrom {
width: 50%; width: 50%;
@ -116,7 +118,7 @@ body {
// Date // Date
div#mail-index_mailPreviewHeadersDate { div#mail-index_mailPreviewHeadersDate {
position: absolute; position: absolute;
right: 0px; right: 0px;
margin: 3px 5px 0 0; margin: 3px 5px 0 0;
} }
@ -1060,11 +1062,10 @@ input[type=button] {
// Headerbereich grau hinterlegt // Headerbereich grau hinterlegt
#mail-index_mailPreviewContainer { #mail-index_mailPreviewContainer {
position: absolute; position: absolute;
border: 1px solid .color_10_gray; border-top: 1px solid silver;
top: 113px;
bottom: 0; bottom: 0;
left: 3px; left: 0px;
right: 0; right: 5px;
} }
/*#######################################################*/ /*#######################################################*/
@ -1087,19 +1088,12 @@ input[type=button] {
// Button Toolbar - always visible // Button Toolbar - always visible
#mail-index_toolbar { #mail-index_toolbar {
/*padding: 0px;*/
background: none; background: none;
/*margin: 5px 5px 0 0;*/ height:35px;
/*border: none;*/
// alle Buttons / drag + drop // alle Buttons / drag + drop
#toolbar-actionlist{ #toolbar-actionlist{
margin-top: 3px; margin-top: 3px;
} }
/* Elemente */ /* Elemente */
button { button {
height: 24px !important; height: 24px !important;