Align the event/task attachment viewer with the attachment view from mail view
This commit is contained in:
Thomas Bruederli
parent
7b9d36b039
commit
afa4133177
7 changed files with 203 additions and 55 deletions
|
|
@ -9,7 +9,7 @@
|
|||
<roundcube:include file="/includes/header.html" />
|
||||
|
||||
<div id="partheader">
|
||||
<roundcube:object name="plugin.attachmentcontrols" cellpadding="2" cellspacing="0" />
|
||||
<roundcube:object name="plugin.attachmentcontrols" cellpadding="2" cellspacing="0" downloadlink="true" />
|
||||
|
||||
<div style="position:absolute; top:2px; right:0; width:12em; text-align:right">
|
||||
[<a href="#close" class="closelink" onclick="self.close()"><roundcube:label name="close" /></a>]
|
||||
|
|
|
|||
|
|
@ -34,10 +34,6 @@ body.calendarmain #mainscreen {
|
|||
}
|
||||
}
|
||||
|
||||
body.calendar.attachmentwin #mainscreen {
|
||||
top: 32px;
|
||||
}
|
||||
|
||||
#calendarsidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -568,15 +564,21 @@ a.miniColors-trigger {
|
|||
margin-top: -3px;
|
||||
}
|
||||
|
||||
#attachmentcontainer {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
.calendar.attachmentwin #attachmenttoolbar {
|
||||
position: relative;
|
||||
top: -6px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#attachmentframe {
|
||||
.calendar.attachmentwin #attachmentcontainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 232px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.calendar.attachmentwin #attachmentframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
|
|
@ -584,29 +586,33 @@ a.miniColors-trigger {
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#partheader {
|
||||
position: relative;
|
||||
padding: 3px 0;
|
||||
background: #f9f9f9;
|
||||
background: -moz-linear-gradient(top, #fff 0%, #e9e9e9 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#e9e9e9));
|
||||
background: -o-linear-gradient(top, #fff 0%, #e9e9e9 100%);
|
||||
background: -ms-linear-gradient(top, #fff 0%, #e9e9e9 100%);
|
||||
background: linear-gradient(top, #fff 0%, #e9e9e9 100%);
|
||||
.calendar.attachmentwin #partheader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 220px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#partheader table td {
|
||||
.calendar.attachmentwin #partheader table {
|
||||
table-layout: fixed;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.calendar.attachmentwin #partheader table td {
|
||||
color: #666;
|
||||
padding: 2px 8px;
|
||||
padding: 4px 6px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#partheader table td.header {
|
||||
.calendar.attachmentwin #partheader table td.header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#partheader table td.title a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
.calendar.attachmentwin #partheader table td.title {
|
||||
width: 60px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#edit-attachments {
|
||||
|
|
|
|||
|
|
@ -7,26 +7,58 @@
|
|||
<body class="extwin calendar attachmentwin">
|
||||
|
||||
<div id="header">
|
||||
<div id="topnav">
|
||||
<div id="topline" role="banner" aria-labelledby="aria-label-topnav">
|
||||
<div class="topleft">
|
||||
<roundcube:container name="topline-left" id="topline-left" />
|
||||
</div>
|
||||
<roundcube:container name="topline-center" id="topline-center" />
|
||||
<div class="topright">
|
||||
<a href="#close" class="closelink" onclick="self.close()"><roundcube:label name="close" /></a>
|
||||
<roundcube:container name="topline-right" id="topline-right" />
|
||||
<roundcube:button name="close" type="link" label="close" class="closelink" onclick="self.close()" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br style="clear:both" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mainscreen">
|
||||
<div id="partheader" class="uibox">
|
||||
<roundcube:object name="plugin.attachmentcontrols" class="headers-table" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="attachment" />: <roundcube:var name="env:filename" /></h1>
|
||||
|
||||
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
|
||||
<div id="attachmenttoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar">
|
||||
<roundcube:button command="download-attachment" type="link" class="button download disabled" classAct="button download" classSel="button download pressed" label="download" title="download" />
|
||||
<roundcube:button command="print-attachment" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" title="print" />
|
||||
<roundcube:container name="toolbar" id="messagetoolbar" />
|
||||
</div>
|
||||
|
||||
<div id="mainscreencontent">
|
||||
|
||||
<div id="partheader" class="uibox listbox" role="contentinfo" aria-labelledby="aria-label-contentinfo">
|
||||
<h2 class="boxtitle" id="aria-label-contentinfo"><roundcube:label name="properties" /></h2>
|
||||
<div class="scroller">
|
||||
<roundcube:object name="plugin.attachmentcontrols" class="listing" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="attachmentcontainer" class="uibox">
|
||||
<roundcube:object name="plugin.attachmentframe" id="attachmentframe" class="header-table" style="width:100%" />
|
||||
<div id="attachmentcontainer" class="uibox" role="main" aria-labelledby="aria-label-messagepart">
|
||||
<h2 id="aria-label-messagepart" class="voice"><roundcube:label name="arialabelattachmentpreview" /></h2>
|
||||
<div class="iframebox">
|
||||
<roundcube:object name="plugin.attachmentframe" id="attachmentframe" frameborder="0" title="arialabelattachmentpreview" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function() {
|
||||
if (window.rcube_splitter) {
|
||||
new rcube_splitter({ id:'mailpartsplitterv', p1:'#partheader', p2:'#attachmentcontainer',
|
||||
orientation:'v', relative:true, start:226, min:150, size:12}).init();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -1140,4 +1140,18 @@ window.rcmail && rcmail.addEventListener('init', function(evt) {
|
|||
$('.rsvp-buttons').on('click', 'a.reply-comment-toggle', function(e){
|
||||
$(this).hide().parent().find('textarea').show().focus();
|
||||
});
|
||||
|
||||
if (rcmail.env.action == 'get-attachment' && rcmail.gui_objects['attachmentframe']) {
|
||||
rcmail.register_command('print-attachment', function() {
|
||||
var frame = rcmail.get_frame_window(rcmail.gui_objects['attachmentframe'].id);
|
||||
if (frame) frame.print();
|
||||
}, true);
|
||||
}
|
||||
|
||||
if (rcmail.env.action == 'get-attachment' && rcmail.env.attachment_download_url) {
|
||||
rcmail.register_command('download-attachment', function() {
|
||||
rcmail.location_href(rcmail.env.attachment_download_url, window);
|
||||
}, true);
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1217,6 +1217,8 @@ class libcalendaring extends rcube_plugin
|
|||
|
||||
$attrib['src'] = './?' . str_replace('_frame=', ($ctype_primary == 'text' ? '_show=' : '_preload='), $_SERVER['QUERY_STRING']);
|
||||
|
||||
$this->rc->output->add_gui_object('attachmentframe', $attrib['id']);
|
||||
|
||||
return html::iframe($attrib);
|
||||
}
|
||||
|
||||
|
|
@ -1225,12 +1227,23 @@ class libcalendaring extends rcube_plugin
|
|||
*/
|
||||
public function attachment_header($attrib = array())
|
||||
{
|
||||
$table = new html_table(array('cols' => 3));
|
||||
$rcmail = rcmail::get_instance();
|
||||
$dl_link = strtolower($attrib['downloadlink']) == 'true';
|
||||
$dl_url = $this->rc->url(array('_frame' => null, '_download' => 1) + $_GET);
|
||||
|
||||
$table = new html_table(array('cols' => $dl_link ? 3 : 2));
|
||||
|
||||
if (!empty($this->attachment['name'])) {
|
||||
$table->add('title', Q($this->rc->gettext('filename')));
|
||||
$table->add('header', Q($this->attachment['name']));
|
||||
$table->add('download-link', html::a('?'.str_replace('_frame=', '_download=', $_SERVER['QUERY_STRING']), Q($this->rc->gettext('download'))));
|
||||
if ($dl_link) {
|
||||
$table->add('download-link', html::a($dl_url, Q($this->rc->gettext('download'))));
|
||||
}
|
||||
}
|
||||
|
||||
if (!empty($this->attachment['mimetype'])) {
|
||||
$table->add('title', Q($this->rc->gettext('type')));
|
||||
$table->add('header', Q($this->attachment['mimetype']));
|
||||
}
|
||||
|
||||
if (!empty($this->attachment['size'])) {
|
||||
|
|
@ -1238,6 +1251,8 @@ class libcalendaring extends rcube_plugin
|
|||
$table->add('header', Q(show_bytes($this->attachment['size'])));
|
||||
}
|
||||
|
||||
$this->rc->output->set_env('attachment_download_url', $dl_url);
|
||||
|
||||
return $table->show($attrib);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -30,10 +30,6 @@ ul.toolbarmenu li span.icon.taskadd,
|
|||
display: none;
|
||||
}
|
||||
|
||||
body.tasklist.attachmentwin #mainscreen {
|
||||
top: 32px;
|
||||
}
|
||||
|
||||
.tasklistview #mainscreen {
|
||||
min-width: 1000px !important;
|
||||
min-height: 520px !important;
|
||||
|
|
@ -1393,6 +1389,58 @@ div.messagetasklinks .messagetaskref input.complete {
|
|||
}
|
||||
|
||||
|
||||
.tasklist.attachmentwin #attachmenttoolbar {
|
||||
position: relative;
|
||||
top: -6px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.tasklist.attachmentwin #attachmentcontainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 232px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.tasklist.attachmentwin #attachmentframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tasklist.attachmentwin #partheader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 220px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.tasklist.attachmentwin #partheader table {
|
||||
table-layout: fixed;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tasklist.attachmentwin #partheader table td {
|
||||
color: #666;
|
||||
padding: 4px 6px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tasklist.attachmentwin #partheader table td.header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tasklist.attachmentwin #partheader table td.title {
|
||||
width: 60px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Special hacks for IE7 **/
|
||||
/** They need to be in this file to also affect the task-create dialog embedded in mail view **/
|
||||
|
||||
|
|
|
|||
|
|
@ -7,26 +7,59 @@
|
|||
<body class="extwin tasklist attachmentwin">
|
||||
|
||||
<div id="header">
|
||||
<div id="topnav">
|
||||
<div id="topline" role="banner" aria-labelledby="aria-label-topnav">
|
||||
<div class="topleft">
|
||||
<roundcube:container name="topline-left" id="topline-left" />
|
||||
</div>
|
||||
<roundcube:container name="topline-center" id="topline-center" />
|
||||
<div class="topright">
|
||||
<a href="#close" class="closelink" onclick="self.close()"><roundcube:label name="close" /></a>
|
||||
<roundcube:container name="topline-right" id="topline-right" />
|
||||
<roundcube:button name="close" type="link" label="close" class="closelink" onclick="self.close()" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br style="clear:both" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mainscreen">
|
||||
<div id="partheader" class="uibox">
|
||||
<roundcube:object name="plugin.attachmentcontrols" class="headers-table" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="attachment" />: <roundcube:var name="env:filename" /></h1>
|
||||
|
||||
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
|
||||
<div id="attachmenttoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar">
|
||||
<roundcube:button command="download-attachment" type="link" class="button download disabled" classAct="button download" classSel="button download pressed" label="download" title="download" />
|
||||
<roundcube:button command="print-attachment" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" title="print" />
|
||||
<roundcube:container name="toolbar" id="messagetoolbar" />
|
||||
</div>
|
||||
|
||||
<div id="mainscreencontent">
|
||||
|
||||
<div id="partheader" class="uibox listbox" role="contentinfo" aria-labelledby="aria-label-contentinfo">
|
||||
<h2 class="boxtitle" id="aria-label-contentinfo"><roundcube:label name="properties" /></h2>
|
||||
<div class="scroller">
|
||||
<roundcube:object name="plugin.attachmentcontrols" class="listing" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="attachmentcontainer" class="uibox">
|
||||
<roundcube:object name="plugin.attachmentframe" id="attachmentframe" class="header-table" style="width:100%" />
|
||||
<div id="attachmentcontainer" class="uibox" role="main" aria-labelledby="aria-label-messagepart">
|
||||
<h2 id="aria-label-messagepart" class="voice"><roundcube:label name="arialabelattachmentpreview" /></h2>
|
||||
<div class="iframebox">
|
||||
<roundcube:object name="plugin.attachmentframe" id="attachmentframe" frameborder="0" title="arialabelattachmentpreview" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function() {
|
||||
if (window.rcube_splitter) {
|
||||
new rcube_splitter({ id:'mailpartsplitterv', p1:'#partheader', p2:'#attachmentcontainer',
|
||||
orientation:'v', relative:true, start:226, min:150, size:12}).init();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue