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
window.setTimeout(function(){
var lastEl = $preview_iframe.prev().prev();
var lastEl = $preview_iframe.prev();
// Top offset of preview iframe calculated from top level
var iframeTop = $preview_iframe.offset().top;
while (lastEl.css('display') === "none")

View File

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

View File

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

View File

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

View File

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

View File

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