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

Attachment preview on mobile (#61)

Browse Source
pull/5742/merge
Aleksander Machniak 7 years ago
parent f8800e75fd
commit 8960ca33f1
6 changed files with 56 additions and 43 deletions
Show Stats Download Patch File Download Diff File

6
skins/elastic/styles/widgets/jqueryui.less
Unescape Escape View File

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

3
skins/elastic/styles/widgets/toolbar.less
Unescape Escape View File

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

10
skins/elastic/templates/includes/layout.html
Unescape Escape View File

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

2
skins/elastic/templates/login.html
Unescape Escape View File

@ -2,7 +2,7 @@
<h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1> <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:form id="login-form" name="login-form" method="post" class="propform">
<roundcube:object name="loginform" form="login-form" size="40" submit=true /> <roundcube:object name="loginform" form="login-form" size="40" submit=true />
</form> </form>

34
skins/elastic/templates/messagepart.html
Unescape Escape View File

@ -1,9 +1,10 @@
<roundcube:include file="includes/layout.html" /> <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="sidebar listbox">
<div class="header"> <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> <span class="header-title" id="aria-label-contentinfo"><roundcube:label name="properties" /></span>
</div> </div>
<roundcube:object name="messagePartControls" class="listing" role="contentinfo" <roundcube:object name="messagePartControls" class="listing" role="contentinfo"
@ -13,13 +14,15 @@
<div class="content selected"> <div class="content selected">
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2> <h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar"> <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> <span class="header-title"></span>
<div id="messagetoolbar" class="toolbar"> <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" <roundcube:button command="download" type="link" label="download" title="download"
class="button download disabled" classAct="button download" innerclass="inner" /> class="button download disabled" classAct="button download" innerclass="inner" />
<roundcube:button command="print" type="link" label="print" title="print" <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:container name="toolbar" id="messagetoolbar" />
<roundcube:if condition="env:is_message" /> <roundcube:if condition="env:is_message" />
<span class="spacer"></span> <span class="spacer"></span>
@ -44,8 +47,7 @@
</span> </span>
<span class="spacer"></span> <span class="spacer"></span>
<roundcube:button name="messagemenulink" id="messagemenulink" type="link" <roundcube:button name="messagemenulink" id="messagemenulink" type="link"
class="button more" label="more" title="moreactions" class="button more" label="more" title="moreactions" data-popup="message-menu" innerclass="inner" />
data-popup="message-menu" innerclass="inner" />
<roundcube:endif /> <roundcube:endif />
<roundcube:endif /> <roundcube:endif />
</div> </div>
@ -56,30 +58,30 @@
</div> </div>
<roundcube:if condition="env:is_message" /> <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> <h3 id="aria-label-forwardmenu" class="voice"><roundcube:label name="arialabelforwardingoptions" /></h3>
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-forwardmenu"> <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-inline" label="forwardinline" prop="sub" classAct="forward inline active" class="forward" />
<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" classAct="forwardattachment active" class="forwardattachment" /> <roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" classAct="forward attachment active" class="forward attachment" />
<roundcube:container name="forwardmenu" id="forwardmenu-menu" /> <roundcube:container name="forwardmenu" id="forward-menu" />
</ul> </ul>
</div> </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> <h3 id="aria-label-replyallmenu" class="voice"><roundcube:label name="arialabelreplyalloptions" /></h3>
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-replyallmenu"> <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-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="replylist" classAct="replylist 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="replyallmenu-menu" /> <roundcube:container name="replyallmenu" id="replyall-menu" />
</ul> </ul>
</div> </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> <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="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: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> </ul>
</div> </div>
<roundcube:endif /> <roundcube:endif />

44
skins/elastic/ui.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save