Attachment preview on mobile (#61)

pull/5742/merge
Aleksander Machniak 7 years ago
parent f8800e75fd
commit 8960ca33f1

@ -31,6 +31,12 @@
border-radius: 0;
box-shadow: none;
&.no-titlebar {
.ui-dialog-titlebar {
display: none;
}
}
.ui-dialog-titlebar {
height: @layout-header-height;
border-bottom: 1px solid @color-dialog-header-border;

@ -187,6 +187,9 @@
&.qrcode:before {
content: @fa-var-qrcode;
}
&.properties:before {
content: @fa-var-file;
}
}
&:not(.popupmenu) span.inner {

@ -17,15 +17,15 @@
<link rel="shortcut icon" href="/images/favicon.ico">
<link rel="stylesheet" href="/bootstrap/bootstrap.min.css">
<roundcube:if condition="config:devel_mode" />
<link rel="stylesheet/less" type="text/css" href="/styles/styles.less">
<roundcube:link rel="stylesheet/less" type="text/css" href="/styles/print.less" condition="env:action == 'print'" />
<link rel="stylesheet/less" href="/styles/styles.less">
<roundcube:link rel="stylesheet/less" href="/styles/print.less" condition="env:action == 'print'" />
<script src="/styles/less.min.js" data-env="development"></script>
<roundcube:else />
<link rel="stylesheet" type="text/css" href="/styles/styles.css">
<roundcube:link rel="stylesheet" type="text/css" href="/styles/print.css" condition="env:action == 'print'" />
<link rel="stylesheet" href="/styles/styles.css">
<roundcube:link rel="stylesheet" href="/styles/print.css" condition="env:action == 'print'" />
<roundcube:endif />
<roundcube:if condition="template:name == 'error'" />
<script src="program/js/jquery.min.js" type="text/javascript"></script>
<script src="program/js/jquery.min.js"></script>
<roundcube:endif />
</head>
<body class="task-<roundcube:exp expression="env:task ?: 'error'">">

@ -2,7 +2,7 @@
<h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1>
<div class="content selected" role="main">
<div class="content selected no-navbar" role="main">
<roundcube:form id="login-form" name="login-form" method="post" class="propform">
<roundcube:object name="loginform" form="login-form" size="40" submit=true />
</form>

@ -1,9 +1,10 @@
<roundcube:include file="includes/layout.html" />
<h1 class="voice"><roundcube:label name="attachment" />: <roundcube:var name="env:filename" /></h1>
<h1 class="voice"><roundcube:var name="env:filename" /></h1>
<div class="sidebar listbox">
<div class="header">
<a class="button icon back-content-button" href="#content" data-hidden="big"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title" id="aria-label-contentinfo"><roundcube:label name="properties" /></span>
</div>
<roundcube:object name="messagePartControls" class="listing" role="contentinfo"
@ -13,13 +14,15 @@
<div class="content selected">
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
<div id="messagetoolbar" class="toolbar">
<a class="button properties" id="properties-button" href="#properties" onclick="UI.show_sidebar()" data-hidden="big">
<span class="inner"><roundcube:label name="properties"></span>
</a>
<roundcube:button command="download" type="link" label="download" title="download"
class="button download disabled" classAct="button download" innerclass="inner" />
<roundcube:button command="print" type="link" label="print" title="print"
class="button print disabled" classAct="button print" innerclass="inner" />
class="button print disabled" classAct="button print" innerclass="inner" data-hidden="small" />
<roundcube:container name="toolbar" id="messagetoolbar" />
<roundcube:if condition="env:is_message" />
<span class="spacer"></span>
@ -44,8 +47,7 @@
</span>
<span class="spacer"></span>
<roundcube:button name="messagemenulink" id="messagemenulink" type="link"
class="button more" label="more" title="moreactions"
data-popup="message-menu" innerclass="inner" />
class="button more" label="more" title="moreactions" data-popup="message-menu" innerclass="inner" />
<roundcube:endif />
<roundcube:endif />
</div>
@ -56,30 +58,30 @@
</div>
<roundcube:if condition="env:is_message" />
<div id="forward-menu" class="popupmenu" aria-hidden="true">
<div id="forward-menu" class="popupmenu">
<h3 id="aria-label-forwardmenu" class="voice"><roundcube:label name="arialabelforwardingoptions" /></h3>
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-forwardmenu">
<roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" classAct="forward active" class="forward" />
<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" classAct="forwardattachment active" class="forwardattachment" />
<roundcube:container name="forwardmenu" id="forwardmenu-menu" />
<roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" classAct="forward inline active" class="forward" />
<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" classAct="forward attachment active" class="forward attachment" />
<roundcube:container name="forwardmenu" id="forward-menu" />
</ul>
</div>
<div id="replyall-menu" class="popupmenu" aria-hidden="true">
<div id="replyall-menu" class="popupmenu">
<h3 id="aria-label-replyallmenu" class="voice"><roundcube:label name="arialabelreplyalloptions" /></h3>
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-replyallmenu">
<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="replyall" classAct="replyall active" />
<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="replylist" classAct="replylist active" />
<roundcube:container name="replyallmenu" id="replyallmenu-menu" />
<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="reply all" classAct="reply all active" />
<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="reply list" classAct="reply list active" />
<roundcube:container name="replyallmenu" id="replyall-menu" />
</ul>
</div>
<div id="message-menu" class="popupmenu" aria-hidden="true">
<div id="message-menu" class="popupmenu">
<h3 id="aria-label-messagemenu" class="voice"><roundcube:label name="arialabelmoremessageactions" /></h3>
<ul class="toolbarmenu listing iconized" role="menu" aria-labelledby="aria-label-messagemenu">
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-messagemenu">
<roundcube:button type="link-menuitem" command="edit" prop="new" label="editasnew" class="edit asnew" classAct="edit asnew active" />
<roundcube:button type="link-menuitem" command="viewsource" label="viewsource" class="source" classAct="source active" />
<roundcube:container name="messagemenu" id="messagemenu-menu" />
<roundcube:container name="messagemenu" id="message-menu" />
</ul>
</div>
<roundcube:endif />

@ -141,7 +141,9 @@ function rcube_elastic_ui()
}
// Add content frame toolbar in the footer, for content buttons and navigation
if (!is_framed && layout.content.length && rcmail.env.task) {
if (!is_framed && layout.content.length && !$(layout.content).is('.no-navbar')
&& !$(layout.content).children('.frame-content').length
) {
env.frame_nav = $('<div class="footer toolbar content-frame-navigation hide-nav-buttons">')
.append($('<a class="button prev">')
.append($('<span class="inner"></span>').text(rcmail.gettext('previous'))))
@ -949,7 +951,7 @@ function rcube_elastic_ui()
function screen_resize()
{
if (is_framed) {
if (!layout.sidebar.length && !layout.list.length) {
return;
}
@ -1523,15 +1525,13 @@ function rcube_elastic_ui()
if (win != window && !$('#' + popup_id + '-clone').length) {
popup = popup_orig.clone(true, true);
popup.attr('id', popup_id + '-clone')
//.addClass('popupmenu')
.appendTo(document.body);
// TODO: we have some limitations here:
// we don't support multi-level menus
// we support only specified types of menu items
popup.find('li > a.active, li.checkbox > label').off('click').on('click', function() {
.appendTo(document.body)
.find('li > a, li.checkbox > label').attr('onclick', '').off('click').on('click', function(e) {
if (!$(this).is('.disabled')) {
$(item).popover('hide');
win.$('#' + $(this).attr('id')).click();
}
return false;
});
}
@ -1627,7 +1627,6 @@ function rcube_elastic_ui()
if (popup_id && menus[popup_id] && popup.is(':visible')) {
menus[popup_id].transitioning = true;
}
})
.on('hidden.bs.popover', function() {
if (/-clone$/.test(popup.attr('id'))) {
@ -2675,21 +2674,24 @@ function rcube_elastic_ui()
return env.open_window.apply(rcmail, arguments);
}
// _extwin=1 is required to display attachment preview layout properly
$.each(['_framed', '_extwin'], function() {
if (!RegExp('(&|\\?)' + this + '=').test(url)) {
url += (url.match(/\?/) ? '&' : '?') + this + '=1';
}
});
// _extwin=1, _framed=1 are required to display attachment preview
// layout properly and make mobile menus working
url = rcmail.add_url(url, '_framed', 1);
url = rcmail.add_url(url, '_extwin', 1);
var label, title = '',
props = {cancel_button: 'close'},
frame = $('<iframe>').attr({id: 'windowframe', src: url});
if (/_action=([a-z_]+)/.test(url) && (label = rcmail.labels[RegExp.$1])) {
title = label;
}
rcmail.simple_dialog(frame, title, null, {cancel_button: 'close'});
if (/_frame=1/.test(url)) {
props.dialogClass = 'no-titlebar';
}
rcmail.simple_dialog(frame, title, null, props);
return true;
};

Loading…
Cancel
Save