Re-arrange html containers in order to move the footer links with the separ...

thomascube

2009-06-14 189482db2405e72e7b2b162be60aa7920d93a6ca

Re-arrange html containers in order to move the footer links with the separator

 skins/default/ie6hacks.css

@@ -11,7 +11,7 @@
#message div.confirmation,
#remote-objects-message
{
  background-image: url(images/display/icons.gif);
  background-image: url('images/display/icons.gif');
}

ul.toolbarmenu li

 skins/default/iehacks.css

@@ -53,10 +53,15 @@
  width: expression((parseInt(document.documentElement.clientWidth)-400)+'px');
}

#mainscreen 
#messagetoolbar select.mboxlist
{
  top: -8px;
}

#mainscreen
{
  width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
  height: expression((parseInt(document.documentElement.clientHeight)-125)+'px');
  height: expression((parseInt(document.documentElement.clientHeight)-101)+'px');
}

#directorylist
@@ -86,9 +91,9 @@
  height: expression(parseInt(this.parentNode.offsetHeight)+'px');
}

#mailpreviewframe
#mailrightcontent
{
  height: expression((parseInt(this.parentNode.offsetHeight)-205)+'px');
  height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px');
}

#partheader
@@ -98,12 +103,7 @@

#mailboxlist-container
{
  height: expression(parseInt(this.parentNode.offsetHeight)+'px');
}

#mailfooter
{
  width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
  height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px');
}

#messagelist,
@@ -114,8 +114,8 @@

#messageframe
{
  width: expression((parseInt(this.parentNode.offsetWidth)-170)+'px');
  height: expression((parseInt(this.parentNode.offsetHeight))+'px');
  width: expression((parseInt(this.parentNode.offsetWidth)-180)+'px');
  height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px');
}

#messagecanvas 

 skins/default/mail.css

@@ -28,8 +28,9 @@

#messagetoolbar select.mboxlist
{
  position: absolute;
  top: 8px;
  position: relative;
  margin: 0 8px;
  top: -12px;
}

#messagetoolbar select.mboxlist option
@@ -229,8 +230,7 @@
  text-decoration: underline;
}

#listcontrols,
#mailboxcontrols
#listcontrols
{
  padding-right: 2em;
}
@@ -238,10 +238,10 @@
#messagecountbar
{
  position: absolute;
  bottom: 16px;
  right: 20px;
  bottom: 0px;
  right: 0px;
  width: 300px;
  height: 20px;
  height: 16px;
  text-align: right;
  white-space: nowrap;
}
@@ -252,13 +252,22 @@
  color: #333333;
}

#mainscreen 
#mainscreen
{
  position: absolute;
  top: 85px;
  right: 20px;
  bottom: 40px;
  bottom: 16px;
  left: 20px;
}

#mailleftcontainer
{
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 170px;
}

#mailrightcontainer
@@ -268,6 +277,15 @@
  left: 170px;
  bottom: 0px;
  right: 0px;
}

#mailrightcontent
{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 20px;
}

#messagepartcontainer
@@ -287,6 +305,7 @@
  bottom: 0px;
  border: 1px solid #999999;
  background-color: #F9F9F9;
  overflow: auto;
  overflow-y: auto;
  overflow-x: hidden;
}
@@ -365,8 +384,8 @@
  position: absolute;
  top: 0px;
  left: 0px;
  width: 160px;
  bottom: 0px;
  width: 100%;
  bottom: 20px;
  border: 1px solid #999;
  background-color: #F9F9F9;
  overflow: auto;
@@ -496,14 +515,13 @@
  font-weight: normal;
}


#mailfooter
{
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  height: 20px;
  left: 0px;
  bottom: 0px;
  height: 16px;
  width: 100%;
}

#mailfooter table tr td
@@ -512,7 +530,16 @@
  vertical-align: bottom;
}

#mailboxcontrols,
#mailboxcontrols
{
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 16px;
  width: auto;
  font-size: 11px;
}

#listcontrols,
#countcontrols,
#quotabox
@@ -539,7 +566,7 @@

#messagelist thead tr td
{
  height: 20px;
  height: 19px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 2px;
@@ -728,9 +755,9 @@
{
  position: absolute;
  top: 0px;
  left: 170px;
  left: 180px;
  right: 0px;
  bottom: 0px;
  bottom: 20px;
  border: 1px solid #999;
  background-color: #FFF;
  overflow: auto;

 skins/default/templates/mail.html

@@ -8,13 +8,13 @@
<style type="text/css">
<roundcube:if condition="config:preview_pane == true" />
#mailcontframe { height: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter-5 : 195" />px; }
#mailpreviewframe { top: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+5 : 205" />px;
<roundcube:exp expression="browser:ie ? ('height: expression((parseInt(this.parentNode.offsetHeight)-'.(!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+5 : 205).')+\\'px\\');') : ''" />
#mailpreviewframe { top: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+5 : 225" />px;
<roundcube:exp expression="browser:ie ? ('height: expression((parseInt(this.parentNode.offsetHeight)-'.(!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+25 : 245).')+\\'px\\');') : ''" />
}
<roundcube:endif />
#mailboxlist-container { width: <roundcube:exp expression="!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv-5 : 160" />px; }
#mailrightcontainer { left: <roundcube:exp expression="!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv+5 : 170" />px;
<roundcube:exp expression="browser:ie ? ('width: expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv+5 : 170).')+\\'px\\');') : ''" />
#mailleftcontainer { width: <roundcube:exp expression="!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv-5 : 170" />px; }
#mailrightcontainer { left: <roundcube:exp expression="!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv+5 : 180" />px;
<roundcube:exp expression="browser:ie ? ('width: expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv+5 : 180).')+\\'px\\');') : ''" />
}
</style>
</head>
@@ -24,19 +24,26 @@
<roundcube:include file="/includes/header.html" />

<div id="mainscreen">

<div id="mailleftcontainer">
<div id="mailboxlist-container">
<h3 id="mailboxlist-header"><roundcube:label name="mailboxlist" /></h3>
<roundcube:object name="mailboxlist" id="mailboxlist" maxlength="16" />
</div>

<script type="text/javascript">
  var mailviewsplitv = new rcube_splitter({id:'mailviewsplitterv', p1: 'mailboxlist-container', p2: 'mailrightcontainer', orientation: 'v', relative: true, start: 165});
  var mailviewsplitv = new rcube_splitter({id:'mailviewsplitterv', p1: 'mailleftcontainer', p2: 'mailrightcontainer', orientation: 'v', relative: true, start: 165});
  rcmail.add_onload('mailviewsplitv.init()');
</script>

<div id="mailrightcontainer">
<div id="mailboxcontrols">
  <roundcube:label name="folder" />:&nbsp;
  <roundcube:button command="expunge" label="compact" classAct="active" />&nbsp;
  <roundcube:button command="purge" label="empty" classAct="active" />&nbsp;
</div>
</div>

<div id="mailrightcontainer">
<div id="mailrightcontent">
<div id="mailcontframe">
<roundcube:object name="messages"
  id="messagelist"
@@ -66,46 +73,38 @@
</div>

<roundcube:endif />

</div>

</div>

<div id="mailfooter">
<table cellpadding="1" cellspacing="0">
<tr>
<td width="99%">
<span id="mailboxcontrols">
<roundcube:label name="folder" />:&nbsp;
<roundcube:button command="expunge" label="compact" classAct="active" />&nbsp;
<roundcube:button command="purge" label="empty" classAct="active" />&nbsp;
</span>
<span id="listcontrols">
<roundcube:label name="select" />:&nbsp;
<roundcube:button command="select-all" label="all" classAct="active" />&nbsp;
<roundcube:button command="select-all" prop="unread" label="unread" classAct="active" />&nbsp;
<roundcube:button command="select-all" prop="invert" label="invert" classAct="active" />&nbsp;
<roundcube:button command="select-none" label="none" classAct="active" /> &nbsp;
<roundcube:container name="listcontrols" id="listcontrols" />
</span>
<roundcube:if condition="env:quota" />
<span id="quotabox">
<roundcube:label name="quota" />: <roundcube:object name="quotaDisplay" display="image" width="100" id="quotadisplay" />
</span>
<roundcube:endif />
</td>
<td width="1%">
<span id="countcontrols">
<roundcube:button command="firstpage" imageSel="/images/buttons/first_sel.png" imageAct="/images/buttons/first_act.png" imagePas="/images/buttons/first_pas.png" width="11" height="11" title="firstmessages" />
<roundcube:button command="previouspage" imageSel="/images/buttons/previous_sel.png" imageAct="/images/buttons/previous_act.png" imagePas="/images/buttons/previous_pas.png" width="11" height="11" title="previousmessages" />
&nbsp;<roundcube:object name="messageCountDisplay" />&nbsp;
<roundcube:button command="nextpage" imageSel="/images/buttons/next_sel.png" imageAct="/images/buttons/next_act.png" imagePas="/images/buttons/next_pas.png" width="11" height="11" title="nextmessages" />
<roundcube:button command="lastpage" imageSel="/images/buttons/last_sel.png" imageAct="/images/buttons/last_act.png" imagePas="/images/buttons/last_pas.png" width="11" height="11" title="lastmessages" />
</span>
</td>
</tr>
</table>
<table cellpadding="1" cellspacing="0"><tr>
  <td width="90%">
    <span id="listcontrols">
      <roundcube:label name="select" />:&nbsp;
      <roundcube:button command="select-all" label="all" classAct="active" />&nbsp;
      <roundcube:button command="select-all" prop="unread" label="unread" classAct="active" />&nbsp;
      <roundcube:button command="select-all" prop="invert" label="invert" classAct="active" />&nbsp;
      <roundcube:button command="select-none" label="none" classAct="active" /> &nbsp;
      <roundcube:container name="listcontrols" id="listcontrols" />
    </span>
  <roundcube:if condition="env:quota" />
    <span id="quotabox"><roundcube:label name="quota" />: <roundcube:object name="quotaDisplay" display="image" width="100" id="quotadisplay" /></span>
  <roundcube:endif />
  </td>
  <td width="10%">
    <span id="countcontrols">
      <roundcube:button command="firstpage" imageSel="/images/buttons/first_sel.png" imageAct="/images/buttons/first_act.png" imagePas="/images/buttons/first_pas.png" width="11" height="11" title="firstmessages" />
      <roundcube:button command="previouspage" imageSel="/images/buttons/previous_sel.png" imageAct="/images/buttons/previous_act.png" imagePas="/images/buttons/previous_pas.png" width="11" height="11" title="previousmessages" />
      &nbsp;<roundcube:object name="messageCountDisplay" />&nbsp;
      <roundcube:button command="nextpage" imageSel="/images/buttons/next_sel.png" imageAct="/images/buttons/next_act.png" imagePas="/images/buttons/next_pas.png" width="11" height="11" title="nextmessages" />
      <roundcube:button command="lastpage" imageSel="/images/buttons/last_sel.png" imageAct="/images/buttons/last_act.png" imagePas="/images/buttons/last_pas.png" width="11" height="11" title="lastmessages" />
    </span>
  </td>
</tr></table>
</div>

</div>
</div>


<div id="messagetoolbar">
<roundcube:button command="checkmail" imageSel="/images/buttons/inbox_sel.png" imageAct="/images/buttons/inbox_act.png" imagePas="/images/buttons/inbox_pas.png" width="32" height="32" title="checkmail" />
@@ -115,8 +114,8 @@
<roundcube:button command="forward" imageSel="/images/buttons/forward_sel.png" imageAct="/images/buttons/forward_act.png" imagePas="/images/buttons/forward_pas.png" width="32" height="32" title="forwardmessage" />
<roundcube:button command="delete" imageSel="/images/buttons/delete_sel.png" imageAct="/images/buttons/delete_act.png" imagePas="/images/buttons/delete_pas.png" width="32" height="32" title="deletemessage" />
<roundcube:button name="markreadbutton" id="markreadbutton" image="/images/buttons/markread_act.png" width="32" height="32" title="markmessages" onclick="rcmail_ui.show_markmenu();return false" />
<roundcube:button name="messagemenulink" id="messagemenulink" image="/images/buttons/actions_act.png" width="34" height="32" title="messageactions" onclick="rcmail_ui.show_messagemenu();return false" />
<roundcube:container name="toolbar" id="messagetoolbar" />
<roundcube:button name="messagemenulink" id="messagemenulink" image="/images/buttons/actions_act.png" width="34" height="32" title="messageactions" onclick="rcmail_ui.show_messagemenu();return false" />

<div id="markmessagemenu">
  <ul class="toolbarmenu">

 skins/default/templates/message.html

@@ -6,9 +6,9 @@
<script type="text/javascript" src="/splitter.js"></script>
<script type="text/javascript" src="/functions.js"></script>
<style type="text/css">
#mailboxlist-container { width: <roundcube:exp expression="!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv-5 : 160" />px; }
#messageframe { left: <roundcube:exp expression="!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv+5 : 170" />px;
<roundcube:exp expression="browser:ie ? ('width: expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv+5 : 170).')+\\'px\\');') : ''" />
#mailboxlist-container { width: <roundcube:exp expression="!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv-5 : 170" />px; }
#messageframe { left: <roundcube:exp expression="!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv+5 : 180" />px;
<roundcube:exp expression="browser:ie ? ('width: expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:mailviewsplitterv) ? cookie:mailviewsplitterv+5 : 180).')+\\'px\\');') : ''" />
}
</style>
</head>
@@ -17,14 +17,6 @@
<roundcube:include file="/includes/taskbar.html" />
<roundcube:include file="/includes/header.html" />

<div id="messagecountbar">
<roundcube:button command="firstmessage" imageSel="/images/buttons/first_sel.png" imageAct="/images/buttons/first_act.png" imagePas="/images/buttons/first_pas.png" width="11" height="11" title="firstmessage" />
<roundcube:button command="previousmessage" imageSel="/images/buttons/previous_sel.png" imageAct="/images/buttons/previous_act.png" imagePas="/images/buttons/previous_pas.png" width="11" height="11" title="previousmessage" />
&nbsp;<roundcube:object name="messageCountDisplay" />&nbsp;
<roundcube:button command="nextmessage" imageSel="/images/buttons/next_sel.png" imageAct="/images/buttons/next_act.png" imagePas="/images/buttons/next_pas.png" width="11" height="11" title="nextmessage" />
<roundcube:button command="lastmessage" imageSel="/images/buttons/last_sel.png" imageAct="/images/buttons/last_act.png" imagePas="/images/buttons/last_pas.png" width="11" height="11" title="lastmessage" />
</div>

<div id="messagetoolbar">
<roundcube:button command="list" image="/images/buttons/back_act.png" imageSel="/images/buttons/back_sel.png" imageAct="/images/buttons/back_act.png" width="32" height="32" title="backtolist" />
<roundcube:button command="compose" imageSel="/images/buttons/compose_sel.png" imageAct="/images/buttons/compose_act.png" imagePas="/images/buttons/compose_pas.png" width="32" height="32" title="writenewmessage" />
@@ -32,18 +24,19 @@
<roundcube:button command="reply-all" imageSel="/images/buttons/replyall_sel.png" imageAct="/images/buttons/replyall_act.png" imagePas="/images/buttons/replyall_pas.png" width="32" height="32" title="replytoallmessage" />
<roundcube:button command="forward" imageSel="/images/buttons/forward_sel.png" imageAct="/images/buttons/forward_act.png" imagePas="/images/buttons/forward_pas.png" width="32" height="32" title="forwardmessage" />
<roundcube:button command="delete" imageSel="/images/buttons/delete_sel.png" imageAct="/images/buttons/delete_act.png" imagePas="/images/buttons/delete_pas.png" width="32" height="32" title="deletemessage" />
<roundcube:button name="messagemenulink" image="/images/buttons/actions_act.png" width="34" height="32" title="messageactions" onclick="rcmail_ui.show_messagemenu();return false" id="messagemenulink" />
<roundcube:container name="toolbar" id="messagetoolbar" />
<roundcube:button name="messagemenulink" image="/images/buttons/actions_act.png" width="34" height="32" title="messageactions" onclick="rcmail_ui.show_messagemenu();return false" id="messagemenulink" />
<roundcube:object name="mailboxlist" type="select" noSelection="moveto" maxlength="25" onchange="rcmail.command('moveto', this.options[this.selectedIndex].value)" class="mboxlist" />

<roundcube:include file="/includes/messagemenu.html" />
</div>

<div id="mainscreen">

<div id="mailleftcontainer">
<div id="mailboxlist-container">
<div id="mailboxlist-header"><roundcube:label name="mailboxlist" /></div>
<roundcube:object name="mailboxlist" id="mailboxlist" maxlength="25" />
</div>
</div>

<div id="messageframe">
@@ -56,6 +49,13 @@
</div>
</div>

<div id="messagecountbar">
  <roundcube:button command="firstmessage" imageSel="/images/buttons/first_sel.png" imageAct="/images/buttons/first_act.png" imagePas="/images/buttons/first_pas.png" width="11" height="11" title="firstmessage" />
  <roundcube:button command="previousmessage" imageSel="/images/buttons/previous_sel.png" imageAct="/images/buttons/previous_act.png" imagePas="/images/buttons/previous_pas.png" width="11" height="11" title="previousmessage" />
  &nbsp;<roundcube:object name="messageCountDisplay" />&nbsp;
  <roundcube:button command="nextmessage" imageSel="/images/buttons/next_sel.png" imageAct="/images/buttons/next_act.png" imagePas="/images/buttons/next_pas.png" width="11" height="11" title="nextmessage" />
  <roundcube:button command="lastmessage" imageSel="/images/buttons/last_sel.png" imageAct="/images/buttons/last_act.png" imagePas="/images/buttons/last_pas.png" width="11" height="11" title="lastmessage" />
</div>
</div>

<script type="text/javascript">