banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactored compose UI according to discussions on the mailing list

Browse Source
pull/44/head
Thomas Bruederli 12 years ago
parent 715a39416e
commit edfe79a46f
13 changed files with 134 additions and 111 deletions
Show Stats Download Patch File Download Diff File

3
program/localization/de_CH/labels.inc
Unescape Escape View File

@ -169,8 +169,9 @@ $labels['msgtext'] = 'Ganze Nachricht';
$labels['openinextwin'] = 'In neuem Fenster öffnen';
$labels['emlsave'] = 'Herunterladen (.eml)';
$labels['editasnew'] = 'Als neue Nachricht öffnen';
$labels['savemessage'] = 'Nachricht speichern';
$labels['send'] = 'Senden';
$labels['sendmessage'] = 'Nachricht jetzt senden';
$labels['savemessage'] = 'Nachricht speichern';
$labels['addattachment'] = 'Datei anfügen';
$labels['charset'] = 'Zeichensatz';
$labels['editortype'] = 'Editor-Typ';

3
program/localization/de_DE/labels.inc
Unescape Escape View File

@ -169,8 +169,9 @@ $labels['msgtext'] = 'Nachricht';
$labels['openinextwin'] = 'In neuem Fenster öffnen';
$labels['emlsave'] = 'Lokal speichern (.eml)';
$labels['editasnew'] = 'Als neue Nachricht öffnen';
$labels['savemessage'] = 'Nachricht speichern';
$labels['send'] = 'Senden';
$labels['sendmessage'] = 'Nachricht jetzt senden';
$labels['savemessage'] = 'Nachricht speichern';
$labels['addattachment'] = 'Datei anfügen';
$labels['charset'] = 'Zeichensatz';
$labels['editortype'] = 'Editor Typ';

3
program/localization/en_US/labels.inc
Unescape Escape View File

@ -203,8 +203,9 @@ $labels['emlsave'] = 'Download (.eml)';
// message compose
$labels['editasnew'] = 'Edit as new';
$labels['savemessage'] = 'Save as draft';
$labels['send'] = 'Send';
$labels['sendmessage'] = 'Send message';
$labels['savemessage'] = 'Save as draft';
$labels['addattachment'] = 'Attach a file';
$labels['charset'] = 'Charset';
$labels['editortype'] = 'Editor type';

4
skins/larry/ie7hacks.css
Unescape Escape View File

@ -151,10 +151,6 @@ ul.toolbarmenu li label {
bottom: 0;
}
#composeoptionsbox {
padding-top: 2px;
}
#composeoptionstoggle {
display: inline;
top: 3px;

6
skins/larry/iehacks.css
Unescape Escape View File

@ -147,14 +147,10 @@ ul.toolbarmenu li a.active:hover,
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=0);
}
#previewheaderstoggle {
.moreheaderstoggle {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#e9e9e9', GradientType=1);
}
#composeoptionsbox {
border-top: 1px solid #999;
}
#messagelist tbody tr td span.branch div {
float: left;
height: 18px;

BIN
skins/larry/images/buttons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

82
skins/larry/mail.css
Unescape Escape View File

@ -796,7 +796,7 @@ h3.subject {
padding-right: 18px;
}
#previewheaderstoggle {
.moreheaderstoggle {
display: block;
position: absolute;
top: 0;
@ -815,7 +815,7 @@ h3.subject {
border-radius: 3px 0 0 0; /* for Opera */
}
#previewheaderstoggle .iconlink {
.moreheaderstoggle .iconlink {
display: inline-block;
position: absolute;
top: 8px;
@ -825,7 +825,7 @@ h3.subject {
background: url(images/buttons.png) -27px -242px no-repeat;
}
#previewheaderstoggle.remove .iconlink {
.moreheaderstoggle.remove .iconlink {
top: auto;
bottom: 5px;
background-position: -5px -242px;
@ -842,11 +842,11 @@ div.more-headers {
width: 12px;
height: 10px;
cursor: pointer;
background: url(images/buttons.png) center -1619px no-repeat;
background: url(images/buttons.png) center -1579px no-repeat;
}
div.hide-headers {
background-position: center -1629px;
background-position: center -1589px;
}
#all-headers {
@ -1163,12 +1163,13 @@ div.message-part blockquote blockquote blockquote {
-moz-box-shadow: 0 2px 3px 0 #999;
box-shadow: 0 2px 3px 0 #999;
border-bottom: 0;
padding-left: 19px;
}
#composebuttons {
position: absolute;
top: 8px;
right: 8px;
top: 6px;
right: 6px;
width: auto;
white-space: nowrap;
z-index: 100;
@ -1176,21 +1177,21 @@ div.message-part blockquote blockquote blockquote {
#composebuttons a.button.extwin {
padding: 2px 3px;
margin-top: -3px;
}
.compose-headers {
width: 99%;
margin: 4px 0;
margin-bottom: 2px;
}
.compose-headers td {
padding: 4px 4px 4px 8px;
padding: 2px 4px;
}
.compose-headers td.title {
width: 11%;
white-space: nowrap;
padding-left: 6px;
}
.compose-headers td.title label {
@ -1234,51 +1235,33 @@ div.message-part blockquote blockquote blockquote {
display: none;
}
#composeoptionsbox {
padding: 4px 8px 0 8px;
background: #d2d2d2;
border-bottom: 1px solid #e8e8e8;
-webkit-box-shadow: 0 2px 3px 0 #999;
-moz-box-shadow: 0 2px 3px 0 #999;
box-shadow: 0 2px 3px 0 #999;
white-space: nowrap;
}
#composeoptions {
display: none;
padding: 2px 0;
padding: 2px 0 0 8px;
white-space: normal;
border-top: 1px solid #dfdfdf;
box-shadow: inset 0 1px 0 0 #fff;
-o-box-shadow: inset 0 1px 0 0 #fff;
-webkit-box-shadow: inset 0 1px 0 0 #fff;
-moz-box-shadow: inset 0 1px 0 0 #fff;
}
.composeoption {
color: #666;
padding-right: 22px;
white-space: nowrap;
}
#composeoptions .composeoption {
display: inline-block;
padding: 4px 28px 4px 0;
padding: 4px 22px 4px 0;
}
#composeoptions .composeoption:last-child {
padding-right: 4px;
}
#composeoptionstoggle {
display: inline-block;
position: relative;
top: -1px;
left: 6px;
width: 20px;
height: 18px;
background: url(images/buttons.png) -3px -1640px no-repeat;
text-decoration: none;
}
#composeoptionstoggle.enabled {
background-position: -28px -1640px;
}
#composeview-bottom {
position: relative;
width: 100%;
@ -1293,6 +1276,10 @@ div.message-part blockquote blockquote blockquote {
bottom: 0;
}
#composebodycontainer.buttons {
bottom: 42px;
}
#composebody {
position: absolute;
top: 1px;
@ -1302,15 +1289,22 @@ div.message-part blockquote blockquote blockquote {
border: 0;
border-radius: 0;
padding: 8px 0 8px 8px;
box-shadow: none;
resize: none;
font-family: monospace;
font-size: 9pt;
outline: none;
box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
-moz-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
-webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
-o-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
}
#composebody:active,
#composebody:focus {
box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
-moz-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
-webkit-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
-o-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
}
#compose-attachments {
@ -1350,11 +1344,23 @@ div.message-part blockquote blockquote blockquote {
-o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
}
#composeview-bottom .formbuttons.floating {
position: absolute;
width: auto;
right: 260px;
z-index: 200;
padding-bottom: 8px;
}
.defaultSkin table.mceLayout,
.defaultSkin table.mceLayout tr.mceLast td {
border: 0 !important;
}
.defaultSkin table.mceLayout tr.mceFirst td {
background: #dfdfdf;
}
#composebody_toolbargroup {
border-bottom: 1px solid #ddd;
}

21
skins/larry/styles.css
Unescape Escape View File

@ -1088,7 +1088,8 @@ body.iframe .boxtitle {
z-index: 100;
}
body.iframe .footerleft.floating {
body.iframe .footerleft.floating,
#composeview-bottom .formbuttons.floating {
position: fixed;
left: 0;
bottom: 0;
@ -1099,7 +1100,8 @@ body.iframe .footerleft.floating {
padding-bottom: 12px;
}
body.iframe .footerleft.floating:before {
body.iframe .footerleft.floating:before,
#composeview-bottom .formbuttons.floating:before {
content: " ";
position: absolute;
top: -6px;
@ -1480,7 +1482,7 @@ ul.proplist li {
}
.toolbar a.button.spellcheck.selected {
background-position: left -1580px;
background-position: left -1620px;
color: #1978a1;
}
@ -1500,6 +1502,19 @@ ul.proplist li {
background-position: center -1054px;
}
.toolbar a.button.send {
background-position: center -1660px;
}
.toolbar a.button.savedraft {
background-position: center -1700px;
}
.toolbar a.button.close {
background-position: 0 -1745px;
}
a.menuselector {
display: inline-block;
border: 1px solid #ababab;

2
skins/larry/svggradients.css
Unescape Escape View File

@ -137,7 +137,7 @@ ul.toolbarmenu li a.active:hover,
background-image: url(svggradient.php?c=ffffff;f0f0f0);
}
#previewheaderstoggle {
.moreheaderstoggle {
background-image: url(svggradient.php?c=fbfbfb;e9e9e9&h=1);
}

101
skins/larry/templates/compose.html
Unescape Escape View File

@ -9,11 +9,31 @@
</head>
<roundcube:if condition="env:extwin" /><body class="extwin"><roundcube:else /><body><roundcube:endif />
<div class="minwidth">
<roundcube:include file="/includes/header.html" />
<div id="mainscreen">
<!-- toolbar -->
<div id="messagetoolbar" class="fullwidth">
<div id="mailtoolbar" class="toolbar">
<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="cancel" condition="!env:extwin" />
<roundcube:button command="close" type="link" class="button close disabled" classAct="button close" classSel="button close pressed" label="cancel" condition="env:extwin" />
<span class="spacer"></span>
<roundcube:button command="send" type="link" class="button send" classAct="button send" classSel="button send pressed" label="send" title="sendmessage" />
<roundcube:button command="savedraft" type="link" class="button savedraft" classAct="button savedraft" classSel="button savedraft pressed" label="save" title="savemessage" />
<span class="spacer"></span>
<roundcube:if condition="config:enable_spellcheck" />
<span class="dropbutton">
<roundcube:button command="spellcheck" type="link" class="button spellcheck disabled" classAct="button spellcheck" classSel="button spellcheck pressed" label="spellcheck" title="checkspelling" />
<span class="dropbuttontip" id="spellmenulink" onclick="UI.show_popup('spellmenu');return false"></span>
</span>
<roundcube:endif />
<roundcube:button name="addattachment" type="link" class="button attach" classAct="button attach" classSel="button attach pressed" label="attach" title="addattachment" onclick="UI.show_uploadform();return false" />
<roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" classSel="button insertsig pressed" label="signature" title="insertsignature" />
<roundcube:container name="toolbar" id="compose-toolbar" />
</div>
</div>
<div id="composeview-left">
<!-- inline address book -->
@ -38,25 +58,11 @@
<div id="composeview-right">
<!-- toolbar -->
<div id="messagetoolbar" class="fullwidth">
<div id="mailtoolbar" class="toolbar">
<roundcube:if condition="config:enable_spellcheck" />
<span class="dropbutton">
<roundcube:button command="spellcheck" type="link" class="button spellcheck disabled" classAct="button spellcheck" classSel="button spellcheck pressed" label="spellcheck" title="checkspelling" />
<span class="dropbuttontip" id="spellmenulink" onclick="UI.show_popup('spellmenu');return false"></span>
</span>
<roundcube:endif />
<roundcube:button name="addattachment" type="link" class="button attach" classAct="button attach" classSel="button attach pressed" label="attach" title="addattachment" onclick="UI.show_uploadform();return false" />
<roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" classSel="button insertsig pressed" label="signature" title="insertsignature" />
<roundcube:container name="toolbar" id="compose-toolbar" />
</div>
</div>
<form name="form" action="./" method="post" id="compose-content" class="uibox">
<!-- message headers -->
<div id="composeheaders">
<a href="#options" id="composeoptionstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='options' />"></span></a>
<table class="headers-table compose-headers">
<tbody>
@ -109,43 +115,33 @@
</table>
<div id="composebuttons" class="pagenav formbuttons">
<roundcube:button type="input" command="send" class="button mainaction" label="sendmessage" tabindex="11" />
<roundcube:button type="input" command="savedraft" class="button" label="savemessage" tabindex="12" />
<roundcube:button type="input" command="list" class="button" label="cancel" tabindex="13" />
<roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="inner" title="openinextwin" content="[]" condition="!env:extwin" />
</div>
</div>
<!-- (collapsable) message options -->
<div id="composeoptionsbox">
<div id="composeoptions">
<roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" />
<span class="composeoption">
<label><roundcube:label name="options" />
<a href="#options" id="composeoptionstoggle">&nbsp;</a></label>
<label><roundcube:label name="editortype" />
<roundcube:object name="editorSelector" editorid="composebody" tabindex="14" /></label>
</span>
<div id="composeoptions">
<roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" />
<span class="composeoption">
<label><roundcube:label name="editortype" />
<roundcube:object name="editorSelector" editorid="composebody" tabindex="14" /></label>
</span>
<roundcube:endif />
<span class="composeoption">
<label for="rcmcomposepriority"><roundcube:label name="priority" />
<roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" /></label>
</span>
<span class="composeoption">
<label><roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" /> <roundcube:label name="returnreceipt" /></label>
</span>
<span class="composeoption">
<label><roundcube:object name="dsnCheckBox" form="form" id="rcmcomposedsn" /> <roundcube:label name="dsn" /></label>
</span>
<span class="composeoption">
<label><roundcube:label name="savesentmessagein" /> <roundcube:object name="storetarget" maxlength="30" style="max-width:12em" /></label>
</span>
<roundcube:container name="composeoptions" id="composeoptions" />
</div>
<roundcube:endif />
<span class="composeoption">
<label for="rcmcomposepriority"><roundcube:label name="priority" />
<roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" /></label>
</span>
<span class="composeoption">
<label><roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" /> <roundcube:label name="returnreceipt" /></label>
</span>
<span class="composeoption">
<label><roundcube:object name="dsnCheckBox" form="form" id="rcmcomposedsn" /> <roundcube:label name="dsn" /></label>
</span>
<span class="composeoption">
<label><roundcube:label name="savesentmessagein" /> <roundcube:object name="storetarget" maxlength="30" style="max-width:12em" /></label>
</span>
<roundcube:container name="composeoptions" id="composeoptions" />
</div>
</div>
<!-- message compose body -->
@ -155,11 +151,18 @@
</div>
<div id="compose-attachments" class="rightcol">
<div style="text-align:center; margin-bottom:20px">
<roundcube:button name="addattachment" type="input" class="button" classSel="button pressed" label="addattachment" onclick="UI.show_uploadform();return false" tabindex="10" />
<roundcube:button name="addattachment" type="input" class="button" classSel="button pressed" label="addattachment" onclick="UI.show_uploadform();return false" />
</div>
<roundcube:object name="composeAttachmentList" id="attachment-list" class="attachmentslist" />
<roundcube:object name="fileDropArea" id="compose-attachments" />
</div>
<!--
<div id="composeformbuttons" class="footerleft formbuttons floating">
<roundcube:button type="input" command="send" class="button mainaction" label="sendmessage" tabindex="11" />
<roundcube:button type="input" command="savedraft" class="button" label="savemessage" tabindex="12" />
<roundcube:button type="input" command="list" class="button" label="cancel" tabindex="13" />
</div>
-->
</div>
</form>
@ -172,8 +175,6 @@
</div><!-- end mainscreen -->
</div><!-- end minwidth -->
<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='addattachment' />">
<roundcube:object name="composeAttachmentForm" id="uploadform" attachmentFieldSize="40" buttons="no" />
<div class="formbuttons">

2
skins/larry/templates/message.html
Unescape Escape View File

@ -42,7 +42,7 @@
<roundcube:endif />
<div id="messageheader">
<span id="previewheaderstoggle"></span>
<span class="moreheaderstoggle"></span>
<h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2>
<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" />

2
skins/larry/templates/messagepreview.html
Unescape Escape View File

@ -9,7 +9,7 @@
<div id="messageheader" class="previewheader">
<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
<a href="#details" id="previewheaderstoggle"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
<a href="#details" id="previewheaderstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
<table class="headers-table" id="preview-shortheaders"><tbody><tr>

16
skins/larry/ui.js
Unescape Escape View File

@ -21,7 +21,6 @@ function rcube_mail_ui()
dragmessagemenu: { sticky:1 },
groupmenu: { above:1 },
mailboxmenu: { above:1 },
composeoptionsmenu: { editable:1, overlap:1 },
spellmenu: { callback: spellmenu },
// toggle: #1486823, #1486930
'attachment-form': { editable:1, above:1, toggle:!bw.ie&&!bw.linux },
@ -90,8 +89,8 @@ function rcube_mail_ui()
show_header_row(fields[f], true);
}
$('#composeoptionstoggle').parent().click(function(){
$('#composeoptionstoggle').toggleClass('enabled');
$('#composeoptionstoggle').click(function(){
$('#composeoptionstoggle').toggleClass('remove');
$('#composeoptions').toggle();
layout_composeview();
return false;
@ -354,9 +353,14 @@ function rcube_mail_ui()
var body = $('#composebody'),
form = $('#compose-content'),
bottom = $('#composeview-bottom'),
w, h;
w, h, bh, ovflw, btns = 0,
minheight = 300,
bottom.css('height', (form.height() - bottom.position().top) + 'px');
bh = (form.height() - bottom.position().top);
ovflw = minheight - bh;
btns = ovflw > -100 ? 0 : 40;
bottom.css('height', Math.max(minheight, bh) + 'px');
form.css('overflow', ovflw > 0 ? 'auto' : 'hidden');
w = body.parent().width() - 5;
h = body.parent().height() - 16;
@ -365,6 +369,8 @@ function rcube_mail_ui()
$('#composebody_tbl').width((w+8)+'px').height('').css('margin-top', '1px');
$('#composebody_ifr').width((w+8)+'px').height((h-40)+'px');
$('#googie_edit_layer').height(h+'px');
// $('#composebodycontainer')[(btns ? 'addClass' : 'removeClass')]('buttons');
// $('#composeformbuttons')[(btns ? 'show' : 'hide')]();
var abooks = $('#directorylist');
$('#compose-contacts .scroller').css('top', abooks.position().top + abooks.outerHeight());

Write Preview
Loading…
Cancel
Save