extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-28 01:29:05 +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;
case 'mail.compose':
var app_registry = egw.link_get_registry('mail');
var that = this;
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' )
{
@ -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)));
this.compose_cc_expander();
this.compose_fieldExpander();
break;
}
},
@ -494,7 +503,7 @@ app.classes.mail = AppJS.extend(
}
if (content['cc'] || content['bcc'])
{
this.compose_cc_expander();
this.compose_fieldExpander();
}
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();
jQuery(".mailComposeJQueryBcc").hide();
var widgets = {cc:{},bcc:{},folder:{}};
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 {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 Bcc = this.et2.getWidgetById('bcc_expander');
var expWidgets = {cc:{},bcc:{},folder:{}};
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();
if (typeof Cc !='undefined')
if (typeof expWidgets.cc !='undefined')
{
Cc.set_disabled(true);
expWidgets.cc.set_disabled(true);
}
}
else if (typeof widget != "undefined" && widget.id == "bcc_expander")
{
break;
case 'bcc_expander':
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")
{
var CcField = this.et2.getWidgetById('cc');
var BccField = this.et2.getWidgetById('bcc');
if (CcField.get_value().length)
var widgets = {cc:{},bcc:{},folder:{}};
for(var widget in widgets)
{
widgets[widget] = this.et2.getWidgetById(widget);
if (widgets[widget].get_value().length)
{
switch (widget)
{
case 'cc':
jQuery(".mailComposeJQueryCc").show();
if (typeof Cc !='undefined')
if (typeof expWidgets.cc != 'undefiend')
{
Cc.set_disabled(true);
expWidgets.cc.set_disabled(true)
}
}
if (BccField.get_value().length)
{
break;
case 'bcc':
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
{
FONT-SIZE: 12px;
font-size: 12px;
font-weight : bold;
font-family : Arial;
}
.subject
{
FONT-SIZE: 12px;
font-size: 12px;
font-family : Arial;
}
TR.sieveRowActive
{
FONT-SIZE: 11px;
font-size: 11px;
height : 20px;
padding: 0;
background : White;
@ -147,14 +147,14 @@ TR.sieveRowActive
A.sieveRowActive
{
FONT-SIZE: 11px;
font-size: 11px;
height : 14px;
padding: 0;
}
TR.sieveRowInActive
{
FONT-SIZE: 11px;
font-size: 11px;
height : 20px;
padding: 0;
background : White;
@ -163,7 +163,7 @@ TR.sieveRowInActive
A.sieveRowInActive
{
FONT-SIZE: 11px;
font-size: 11px;
height : 14px;
padding: 0;
color: Silver;

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

@ -59,28 +59,36 @@
<textbox class="mail-index_quotaDisplayNone" readonly="true" id="lastdrafted"/>
</hbox>
<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/>
</row>
<row class="mailComposeHeaders" >
<description value="To"/>
<taglist-email id="to" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/>
<hbox>
<description id="cc_expander" value="Cc" onclick="app.mail.compose_cc_expander"/>
<description id="bcc_expander" value="Bcc" 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_fieldExpander"/>
</hbox>
</row>
<row class="mailComposeHeaders mailComposeJQueryCc">
<description value="Cc"/>
<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 class="mailComposeHeaders mailComposeJQueryBcc">
<description value="Bcc"/>
<taglist-email id="bcc" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/>
<description/>
</row>
<row class="mailComposeHeaders">
<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"/>
</row>
<row>
@ -105,10 +113,10 @@
</menulist>
<description value=" "/>
</groupbox>
<groupbox class="et2_file mailUploadSection">
<groupbox class="et2_file mailUploadSection" disabled="@no_griddata">
<caption label="Files"/>
<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>
<column disabled="!@showtempname"/>
<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;
}
.subjectBold {
FONT-SIZE: 12px;
font-size: 12px;
font-weight: bold;
font-family: Arial;
}
.subject {
FONT-SIZE: 12px;
font-size: 12px;
font-family: Arial;
}
TR.sieveRowActive {
FONT-SIZE: 11px;
font-size: 11px;
height: 20px;
padding: 0;
background: White;
}
A.sieveRowActive {
FONT-SIZE: 11px;
font-size: 11px;
height: 14px;
padding: 0;
}
TR.sieveRowInActive {
FONT-SIZE: 11px;
font-size: 11px;
height: 20px;
padding: 0;
background: White;
color: Silver;
}
A.sieveRowInActive {
FONT-SIZE: 11px;
font-size: 11px;
height: 14px;
padding: 0;
color: Silver;
@ -1333,6 +1333,40 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
background-color: #189800;
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 .mailComposeHeadersSection input#mail-compose_subject {
max-width: 716px;

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

@ -597,6 +597,15 @@ div#mail-index{
margin: 3px;
font-size: 8px;
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;}
}
/*Betreff*/