Mobile theme WIP: Implement new look for mail compose dialog

This commit is contained in:
Hadi Nategh 2016-01-13 17:48:50 +00:00
parent cbfb3816a9
commit d62c9038dc
4 changed files with 225 additions and 16 deletions

View File

@ -251,7 +251,10 @@ app.classes.mail = AppJS.extend(
jQuery('#mail-compose').on ('load',function() {
if (textAreaWidget && textAreaWidget.ckeditor)
{
textAreaWidget.ckeditor.on('instanceReady', function(){that.compose_fieldExpander();});
textAreaWidget.ckeditor.on('instanceReady', function(){
that.compose_fieldExpander();
if (egwIsMobile()) jQuery(jQuery('iframe.cke_wysiwyg_frame')[0].contentWindow.document.body).css({margin:'0'})
});
}
else
{

View File

@ -0,0 +1,112 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE overlay PUBLIC "-//Stylite AG//eTemplate 2//EN" "http://www.egroupware.org/etemplate2.dtd">
<!-- $Id$ -->
<overlay>
<template id="mail.compose" template="" lang="" group="0" version="1.9.001">
<vbox class="mailCompose mailComposeHeaderSection" width="100%">
<toolbar id="composeToolbar" width="et2_fullWidth" view_range="3" flat_list="false"/>
<hbox class="mail-compose_toolbar_assist" width="100%">
<vfs-select class="$cont[vfsNotAvailable] compose_egw_icons" id="selectFromVFSForCompose" onchange="app.mail.vfsUploadForCompose" button_caption=""/>
<file class="mail-compose_fileselector" statustext="Select file to attach to message" multiple='true' progress='attachments' onFinish="app.mail.uploadForCompose" onStart="app.mail.composeUploadStart" id="uploadForCompose" drop_target ="mail-compose"/>
<checkbox statustext="check to save as infolog on send" id="to_infolog" options="on,off"/>
<checkbox statustext="check to save as trackerentry on send" id="to_tracker" options="on,off"/>
<checkbox statustext="check to save as calendar event on send" id="to_calendar" options="on,off"/>
<checkbox statustext="check to recieve a notification when the message is read (note: not all clients support this and/or the reciever may not authorize the notification)" id="disposition" options="on,off"/>
<menulist>
<menupopup id="priority"/>
</menulist>
</hbox>
<grid width="100%" resize_ratio="0">
<columns>
<column widtd="10%"/>
<column width="80%"/>
<column width="10%"/>
</columns>
<rows>
<row class="mailComposeHeaders" >
<description value="From"/>
<menupopup id="mailaccount" onchange="app.mail.submitOnChange" class="et2_fullWidth"/>
<vbox>
<description id="replyto_expander" value="Reply to" class="et2_button_text" onclick="app.mail.compose_fieldExpander"/>
<description id="folder_expander" value="Folder" class="et2_button_text" onclick="app.mail.compose_fieldExpander"/>
<textbox class="mail-index_quotaDisplayNone" readonly="true" id="composeID"/>
<textbox class="mail-index_quotaDisplayNone" readonly="true" id="serverID"/>
<textbox class="mail-index_quotaDisplayNone" readonly="true" id="processedmail_id"/>
<textbox class="mail-index_quotaDisplayNone" readonly="true" id="mode"/>
<textbox class="mail-index_quotaDisplayNone" id="lastDrafted"/>
<textbox class="mail-index_quotaDisplayNone" readonly="true" id="references"/>
<textbox class="mail-index_quotaDisplayNone" readonly="true" id="in-reply-to"/>
<textbox class="mail-index_quotaDisplayNone" readonly="true" id="thread-topic"/>
<textbox class="mail-index_quotaDisplayNone" readonly="true" id="thread-index"/>
<textbox class="mail-index_quotaDisplayNone" readonly="true" id="list-id"/>
</vbox>
</row>
<row class="mailComposeHeaders mailComposeJQueryReplyto">
<description value="Reply to"/>
<taglist-email id="replyto" width="100%" maxSelection="1" onclick="app.mail.address_click"/>
<description/>
</row>
<row class="mailComposeHeaders mailComposeJQueryFolder">
<description value="Folder"/>
<taglist id="folder" autocomplete_url="mail.mail_compose.ajax_searchFolder" autocomplete_params="" allowFreeEntries="false" onclick="app.mail.address_click"/>
<description/>
</row>
<row class="mailComposeHeaders" >
<description value="To"/>
<taglist-email id="to" width="100%" onclick="app.mail.address_click" include_lists="true" onchange="app.mail.recipients_onchange"/>
<vbox>
<description id="cc_expander" value="Cc" class="et2_button_text" onclick="app.mail.compose_fieldExpander"/>
<description id="bcc_expander" value="Bcc" class="et2_button_text" onclick="app.mail.compose_fieldExpander"/>
</vbox>
</row>
<row class="mailComposeHeaders mailComposeJQueryCc">
<description value="Cc"/>
<taglist-email id="cc" width="100%" onclick="app.mail.address_click" include_lists="true" onchange="app.mail.recipients_onchange"/>
<description/>
</row>
<row class="mailComposeHeaders mailComposeJQueryBcc">
<description value="Bcc"/>
<taglist-email id="bcc" width="100%" onclick="app.mail.address_click" include_lists="true" onchange="app.mail.recipients_onchange"/>
<description/>
</row>
<row class="mailComposeHeaders subjectContainer">
<textbox span="2" align="left" width="100%" id="subject" blur="Subject" height="25" onchange="app.mail.subject2title"/>
<checkbox statustext="Change editor type" label="HTML" id="mimeType" onchange="app.mail.submitOnChange" options=",, ,disable" tabindex="7"/>
</row>
</rows>
</grid>
</vbox>
<vbox class="mailComposeBodySection" width="99%">
<hbox disabled="@is_plain" class="mailComposeBody mailComposeHtmlContainer">
<htmlarea span="all" name="mail_htmltext" id="mail_htmltext" imageUpload="link_to" expand_toolbar="true" height="478px" width="100%" resize_ratio="0"/>
</hbox>
<hbox disabled="@is_html" class="mailComposeBody mailComposeTextContainer">
<textbox multiline="true" rows="40" cols="120" width="100%" span="all" no_lang="1" name="mail_plaintext" id="mail_plaintext" resize_ratio="0"/>
</hbox>
<vbox class="et2_file mailUploadSection" disabled="@no_griddata">
<hbox>
<select id="filemode" label="Send files as" onchange="app.mail.check_sharing_filemode"/>
<date id="expiration" label="Expiration" blur="EPL only" data_format="Y-m-d"/>
<passwd id="password" blur="password protect" statustext="Only makes sense, if you transport password through a different channel / outside of this mail to recipients!"/>
</hbox>
<grid id="attachments" width="100%" maxheight="165" class="egwGridView_grid" resize_ratio="0">
<columns>
<column disabled="!@showtempname" width="10%"/>
<column width="85%"/>
<column width="8%"/>
<column width="" />
</columns>
<rows>
<row class="row attachmentRow">
<description id="${row}[tmp_name]"/>
<description class="useEllipsis et2_link" id="${row}[name]" no_lang="1" onclick="app.mail.displayUploadedFile"/>
<vfs-size align="right" id="${row}[size]" />
<button id="delete[$row_cont[tmp_name]]" value="Delete" image="delete"/>
</row>
</rows>
</grid>
</vbox>
</vbox>
</template>
</overlay>

View File

@ -2599,19 +2599,65 @@ div.mailComposeHeaderSection > table {
#mail-display.et2_container {
min-height: initial;
}
/*Make Font size readable in mobile theme*/
#mail-compose .mailComposeHeaders span,
#mail-compose .mailComposeHeadersSection span,
div.mailDisplayHeaders > span:first-child,
div.mailComposeHeaders > span:first-child,
div.mailComposeBody,
div.mailPreviewHeaders > * {
font-size: small !important;
}
.mailDisplayHeaders,
.mailDisplayAttachments > * {
font-size: large !important;
}
/*compose dialog*/
body #popupMainDiv {
padding: 8px 8px 0 0;
background: none;
}
body #mail-compose .cke_chrome {
border: none;
box-shadow: none;
}
body #mail-compose span#cke_1_top {
display: none;
}
body #mail-compose .mailComposeHeaderSection > table {
padding: 0;
}
body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders.subjectContainer td:first-child::after {
content: '';
}
body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders {
border-bottom: 1px solid silver;
}
body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span {
font-size: 10pt;
}
body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders .subjectContainer:first-child::after {
content: ':';
}
body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders:first-child {
border-top: 1px solid silver;
}
body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span#mail-compose_cc_expander,
body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span#mail-compose_cc_expander,
body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span#mail-compose_bcc_expander,
body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span#mail-compose_bcc_expander,
body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span#mail-compose_folder_expander,
body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span#mail-compose_folder_expander,
body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span#mail-compose_replyto_expander,
body #mail-compose .mailComposeHeaderSection > table tr.mailComposeHeaders span#mail-compose_replyto_expander {
background: transparent;
border: none;
color: #26537c;
text-decoration: underline;
font-size: 10pt;
width: 65px;
}
body #mail-compose .mailComposeHeaderSection > table div.et2_taglist > *,
body #mail-compose .mailComposeHeaderSection > table #mail-compose_subject,
body #mail-compose .mailComposeHeaderSection > table #mail-compose_mailaccount {
border: none;
box-shadow: none;
font-size: 10pt;
}
body #mail-compose .mailComposeHeaderSection > table #mail-compose_subject:focus {
outline-color: transparent;
}
#mail-index table.egwGridView_outer tbody span.et2_date_ro.et2_label {
font-size: 9px;
}

View File

@ -1750,15 +1750,63 @@ div.mailComposeHeaderSection > table {
min-height: initial;
}
/*Make Font size readable in mobile theme*/
#mail-compose .mailComposeHeaders span, #mail-compose .mailComposeHeadersSection span,
div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailComposeBody, div.mailPreviewHeaders > *{
font-size: small !important;
}
.mailDisplayHeaders, .mailDisplayAttachments > * {
font-size: large !important;
}
/*compose dialog*/
body {
#popupMainDiv {
padding: 8px 8px 0 0;
background: none;
}
#mail-compose {
.cke_chrome {
border:none;
box-shadow: none;
}
span#cke_1_top {
display: none;
}
.mailComposeHeaderSection > table {
padding: 0;
tr.mailComposeHeaders.subjectContainer td:first-child::after {
content: '';
}
tr.mailComposeHeaders {
span {
.mob-fontsize-n;
}
border-bottom: 1px solid silver;
.subjectContainer:first-child::after{
content: ':';
}
&:first-child {
border-top: 1px solid silver;
}
span#mail-compose_cc_expander, span#mail-compose_cc_expander,
span#mail-compose_bcc_expander, span#mail-compose_bcc_expander,
span#mail-compose_folder_expander, span#mail-compose_folder_expander,
span#mail-compose_replyto_expander, span#mail-compose_replyto_expander
{
background: transparent;
border: none;
color: #26537c;
text-decoration: underline;
.mob-fontsize-n;
width: 65px;
}
}
div.et2_taglist > *, #mail-compose_subject, #mail-compose_mailaccount {
border:none;
box-shadow: none;
.mob-fontsize-n;
}
#mail-compose_subject:focus {
outline-color: transparent;
}
}
}
}
#mail-index {
table.egwGridView_outer tbody {