extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-29 01:59:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Work in progress of improving mail compose UI

Browse Source
This commit is contained in:
Hadi Nategh 2014-06-02 16:57:30 +00:00
parent 915940e51a
commit cf28231770
5 changed files with 152 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
mail/js/app.js
View File

@ -143,8 +143,17 @@ app.classes.mail = AppJS.extend(
break; break;
case 'mail.compose': case 'mail.compose':
var app_registry = egw.link_get_registry('mail'); var app_registry = egw.link_get_registry('mail');
var that = this;
this.mail_isMainWindow = false; this.mail_isMainWindow = false;
this.hide_cc_compose(); this.compose_fieldExpander_hide();
/* Control focus actions on subject to handle expanders properly.*/
jQuery("#mail-compose_subject").on({
focus:function(){
that.compose_fieldExpander_hide();
that.compose_fieldExpander();
}
});
if (typeof app_registry['edit'] != 'undefined' && typeof app_registry['edit_popup'] != 'undefined' ) if (typeof app_registry['edit'] != 'undefined' && typeof app_registry['edit_popup'] != 'undefined' )
{ {
@ -153,7 +162,7 @@ app.classes.mail = AppJS.extend(
} }
window.resizeTo((w_h[0]?w_h[0]:870),(w_h[1]?w_h[1]:(screen.availHeight<800?screen.availHeight:800))); window.resizeTo((w_h[0]?w_h[0]:870),(w_h[1]?w_h[1]:(screen.availHeight<800?screen.availHeight:800)));
this.compose_cc_expander(); this.compose_fieldExpander();
break; break;
} }
}, },
@ -494,7 +503,7 @@ app.classes.mail = AppJS.extend(
} }
if (content['cc'] || content['bcc']) if (content['cc'] || content['bcc'])
{ {
this.compose_cc_expander(); this.compose_fieldExpander();
} }
return success; return success;
}, },
@ -3089,62 +3098,97 @@ app.classes.mail = AppJS.extend(
}, },
/** /**
* Hide Cc and Bcc rows from the compose popup * Hide Folder, Cc and Bcc rows from the compose popup
* *
*/ */
hide_cc_compose: function () compose_fieldExpander_hide: function ()
{ {
jQuery(".mailComposeJQueryCc").hide(); var widgets = {cc:{},bcc:{},folder:{}};
jQuery(".mailComposeJQueryBcc").hide(); for(var widget in widgets)
{
widgets[widget] = this.et2.getWidgetById(widget+'_expander');
if (typeof widgets[widget] != 'undefined')
{
widgets[widget].set_disabled(false);
}
}
jQuery(".mailComposeJQueryCc,.mailComposeJQueryBcc,.mailComposeJQueryFolder").hide();
}, },
/** /**
* Display Cc or Bcc fields in compose popup * Display Folder,Cc or Bcc fields in compose popup
* *
* @param {jQuery event} event * @param {jQuery event} event
* @param {widget object} widget clicked label (Cc or Bcc) from compose popup * @param {widget object} widget clicked label (Folder, Cc or Bcc) from compose popup
* *
*/ */
compose_cc_expander: function(event,widget) compose_fieldExpander: function(event,widget)
{ {
var Cc = this.et2.getWidgetById('cc_expander'); var expWidgets = {cc:{},bcc:{},folder:{}};
var Bcc = this.et2.getWidgetById('bcc_expander'); for (var name in expWidgets)
{
expWidgets[name] = this.et2.getWidgetById(name+'_expander');
}
if (typeof widget != "undefined" && widget.id == "cc_expander") if (typeof widget !='undefined')
{ {
switch (widget.id)
{
case 'cc_expander':
jQuery(".mailComposeJQueryCc").show(); jQuery(".mailComposeJQueryCc").show();
if (typeof Cc !='undefined') if (typeof expWidgets.cc !='undefined')
{ {
Cc.set_disabled(true); expWidgets.cc.set_disabled(true);
} }
break;
} case 'bcc_expander':
else if (typeof widget != "undefined" && widget.id == "bcc_expander")
{
jQuery(".mailComposeJQueryBcc").show(); jQuery(".mailComposeJQueryBcc").show();
if (typeof Bcc !='undefined') if (typeof expWidgets.bcc !='undefined')
{ {
Bcc.set_disabled(true); expWidgets.bcc.set_disabled(true);
}
break;
case 'folder_expander':
jQuery(".mailComposeJQueryFolder").show();
if (typeof expWidgets.folder !='undefined')
{
expWidgets.folder.set_disabled(true);
}
} }
} }
else if (typeof widget == "undefined") else if (typeof widget == "undefined")
{ {
var CcField = this.et2.getWidgetById('cc'); var widgets = {cc:{},bcc:{},folder:{}};
var BccField = this.et2.getWidgetById('bcc');
if (CcField.get_value().length) for(var widget in widgets)
{ {
widgets[widget] = this.et2.getWidgetById(widget);
if (widgets[widget].get_value().length)
{
switch (widget)
{
case 'cc':
jQuery(".mailComposeJQueryCc").show(); jQuery(".mailComposeJQueryCc").show();
if (typeof Cc !='undefined') if (typeof expWidgets.cc != 'undefiend')
{ {
Cc.set_disabled(true); expWidgets.cc.set_disabled(true)
} }
} break;
if (BccField.get_value().length) case 'bcc':
{
jQuery(".mailComposeJQueryBcc").show(); jQuery(".mailComposeJQueryBcc").show();
if (typeof Bcc !='undefined') if (typeof expWidgets.bcc != 'undefiend')
{ {
Bcc.set_disabled(true); expWidgets.bcc.set_disabled(true)
}
break;
case 'folder':
jQuery(".mailComposeJQueryFolder").show();
if (typeof expWidgets.folder != 'undefiend')
{
expWidgets.folder.set_disabled(true)
}
}
} }
} }
} }

12
mail/templates/default/app.css
View File

@ -126,20 +126,20 @@ tr.forwarded span.status_img {
.subjectBold .subjectBold
{ {
FONT-SIZE: 12px; font-size: 12px;
font-weight : bold; font-weight : bold;
font-family : Arial; font-family : Arial;
} }
.subject .subject
{ {
FONT-SIZE: 12px; font-size: 12px;
font-family : Arial; font-family : Arial;
} }
TR.sieveRowActive TR.sieveRowActive
{ {
FONT-SIZE: 11px; font-size: 11px;
height : 20px; height : 20px;
padding: 0; padding: 0;
background : White; background : White;
@ -147,14 +147,14 @@ TR.sieveRowActive
A.sieveRowActive A.sieveRowActive
{ {
FONT-SIZE: 11px; font-size: 11px;
height : 14px; height : 14px;
padding: 0; padding: 0;
} }
TR.sieveRowInActive TR.sieveRowInActive
{ {
FONT-SIZE: 11px; font-size: 11px;
height : 20px; height : 20px;
padding: 0; padding: 0;
background : White; background : White;
@ -163,7 +163,7 @@ TR.sieveRowInActive
A.sieveRowInActive A.sieveRowInActive
{ {
FONT-SIZE: 11px; font-size: 11px;
height : 14px; height : 14px;
padding: 0; padding: 0;
color: Silver; color: Silver;

20
mail/templates/default/compose.xet
View File

@ -59,28 +59,36 @@
<textbox class="mail-index_quotaDisplayNone" readonly="true" id="lastdrafted"/> <textbox class="mail-index_quotaDisplayNone" readonly="true" id="lastdrafted"/>
</hbox> </hbox>
<taglist-email id="replyto" empty_label="Reply to" width="100%" maxSelection="1" onclick="app.mail.address_click"/> <taglist-email id="replyto" empty_label="Reply to" width="100%" maxSelection="1" onclick="app.mail.address_click"/>
<hbox>
<description id="folder_expander" value="Folder" onclick="app.mail.compose_fieldExpander"/>
</hbox>
</row>
<row class="mailComposeHeaders mailComposeJQueryFolder">
<description value="Folder"/>
<taglist id="folder" empty_label="Folder" span="2" autocomplete_url='mail.mail_compose.ajax_searchFolder' autocomplete_params='' allowFreeEntries="false" onclick="app.mail.address_click"/>
<description/> <description/>
</row> </row>
<row class="mailComposeHeaders" > <row class="mailComposeHeaders" >
<description value="To"/> <description value="To"/>
<taglist-email id="to" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/> <taglist-email id="to" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/>
<hbox> <hbox>
<description id="cc_expander" value="Cc" onclick="app.mail.compose_cc_expander"/> <description id="cc_expander" value="Cc" onclick="app.mail.compose_fieldExpander"/>
<description id="bcc_expander" value="Bcc" onclick="app.mail.compose_cc_expander"/> <description id="bcc_expander" value="Bcc" onclick="app.mail.compose_fieldExpander"/>
</hbox> </hbox>
</row> </row>
<row class="mailComposeHeaders mailComposeJQueryCc"> <row class="mailComposeHeaders mailComposeJQueryCc">
<description value="Cc"/> <description value="Cc"/>
<taglist-email id="cc" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/> <taglist-email id="cc" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/>
<taglist id="folder" empty_label="Folder" autocomplete_url='mail.mail_compose.ajax_searchFolder' autocomplete_params='' allowFreeEntries="false" onclick="app.mail.address_click"/> <description/>
</row> </row>
<row class="mailComposeHeaders mailComposeJQueryBcc"> <row class="mailComposeHeaders mailComposeJQueryBcc">
<description value="Bcc"/> <description value="Bcc"/>
<taglist-email id="bcc" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/> <taglist-email id="bcc" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/>
<description/>
</row> </row>
<row class="mailComposeHeaders"> <row class="mailComposeHeaders">
<description value="Subject"/> <description value="Subject"/>
<textbox align="left" width="100%" id="subject" span="2"/> <textbox align="left" width="100%" id="subject" span="2" height="25"/>
<checkbox statustext="Change editor type" label="HTML" id="mimeType" onchange="app.mail.submitOnChange" options=",, ,disable" tabindex="7"/> <checkbox statustext="Change editor type" label="HTML" id="mimeType" onchange="app.mail.submitOnChange" options=",, ,disable" tabindex="7"/>
</row> </row>
<row> <row>
@ -105,10 +113,10 @@
</menulist> </menulist>
<description value=" "/> <description value=" "/>
</groupbox> </groupbox>
<groupbox class="et2_file mailUploadSection"> <groupbox class="et2_file mailUploadSection" disabled="@no_griddata">
<caption label="Files"/> <caption label="Files"/>
<box class="mailUploadProgress" id="mailUploadProgress" width="99%"/> <box class="mailUploadProgress" id="mailUploadProgress" width="99%"/>
<grid disabled="@no_griddata" id="attachments" width="100%" maxheight="165" overflow="auto"> <grid id="attachments" width="100%" maxheight="165" overflow="auto">
<columns> <columns>
<column disabled="!@showtempname"/> <column disabled="!@showtempname"/>
<column width="50%" /> <column width="50%" />

46
mail/templates/pixelegg/app.css
View File

@ -131,34 +131,34 @@ tr.forwarded span.status_img {
background-image: url(images/kmmsgforwarded.png) !important; background-image: url(images/kmmsgforwarded.png) !important;
} }
.subjectBold { .subjectBold {
FONT-SIZE: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
font-family: Arial; font-family: Arial;
} }
.subject { .subject {
FONT-SIZE: 12px; font-size: 12px;
font-family: Arial; font-family: Arial;
} }
TR.sieveRowActive { TR.sieveRowActive {
FONT-SIZE: 11px; font-size: 11px;
height: 20px; height: 20px;
padding: 0; padding: 0;
background: White; background: White;
} }
A.sieveRowActive { A.sieveRowActive {
FONT-SIZE: 11px; font-size: 11px;
height: 14px; height: 14px;
padding: 0; padding: 0;
} }
TR.sieveRowInActive { TR.sieveRowInActive {
FONT-SIZE: 11px; font-size: 11px;
height: 20px; height: 20px;
padding: 0; padding: 0;
background: White; background: White;
color: Silver; color: Silver;
} }
A.sieveRowInActive { A.sieveRowInActive {
FONT-SIZE: 11px; font-size: 11px;
height: 14px; height: 14px;
padding: 0; padding: 0;
color: Silver; color: Silver;
@ -1333,6 +1333,40 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
background-color: #189800; background-color: #189800;
color: #ffffff; color: #ffffff;
} }
#mail-compose .mailComposeHeaders span#mail-compose_folder_expander,
#mail-compose .mailComposeHeadersSection span#mail-compose_folder_expander {
/*.border_normal;*/
/*.box_shadow_standard_light;*/
/*.rounded (3px);*/
color: #000000;
-webkit-appearance: none;
-webkit-transition-property: background-color;
-moz-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
background-color: #b4b4b4;
float: left;
width: 47px;
margin: 3px;
font-size: 8px;
margin-left: 12px;
}
#mail-compose .mailComposeHeaders span#mail-compose_folder_expander:hover,
#mail-compose .mailComposeHeadersSection span#mail-compose_folder_expander:hover {
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
background-color: #189800;
color: #ffffff;
}
#mail-compose .mailComposeHeaders input#mail-compose_subject, #mail-compose .mailComposeHeaders input#mail-compose_subject,
#mail-compose .mailComposeHeadersSection input#mail-compose_subject { #mail-compose .mailComposeHeadersSection input#mail-compose_subject {
max-width: 716px; max-width: 716px;

9
mail/templates/pixelegg/app.less
View File

@ -597,6 +597,15 @@ div#mail-index{
margin: 3px; margin: 3px;
font-size: 8px; font-size: 8px;
margin-left: 12px; margin-left: 12px;
&:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;color: @gray_0;}
}
span#mail-compose_folder_expander{
.Complete_Button_normal;
float: left;
width: 47px;
margin: 3px;
font-size: 8px;
margin-left: 12px;
&:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;color: @gray_0;} &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;color: @gray_0;}
} }
/*Betreff*/ /*Betreff*/