Added content frame title for mobile devices

pull/5742/merge
Aleksander Machniak 8 years ago
parent 0541b2ff86
commit 570a0547a0

@ -1,7 +1,7 @@
<div id="sidebar" class="sidebar listbox" role="navigation" aria-labelledby="aria-label-settingstabs">
<div class="header" id="aria-label-settingstabs">
<div class="header">
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<roundcube:label name="settings" />
<span id="aria-label-settingstabs" class="header-title"><roundcube:label name="settings" /></span>
</div>
<div id="settings-menu" class="scroller">
<ul class="listing iconized">

@ -94,18 +94,6 @@ body > #layout > div.menu a:before {
width: @taskmenu-width;
}
body > #layout > div > .header > .buttons,
body > #layout > div > .header > a.back-list-button,
body > #layout > div > .header > a.back-sidebar-button,
body > #layout > div > .header > a.toolbar-menu-button,
body > #layout > div > .header > a.menu-button {
display: none;
}
#layout > div .toolbar {
float: right;
}
#layout > div.content > iframe,
#layout > div.content > .content,
#layout > div.content > .content > iframe {
@ -131,12 +119,14 @@ body > #layout > div > .header > a.menu-button {
font-weight: bold;
line-height: 2.5em;
height: 2.5em;
padding: 0 0.5em;
padding: 0 0.25em;
margin: 0;
position: relative; /* for absolute positioning of searchbar */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
#layout > div > .header {
border-bottom: 1px solid #ddd;
@ -145,6 +135,12 @@ body > #layout > div > .header > a.menu-button {
border-top: 1px solid #ddd;
}
#layout > div > .header > .header-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
#taskmenu .special-buttons {
position: absolute;
bottom: 0;
@ -169,10 +165,6 @@ body > #layout > div > .header > a.menu-button {
body > #layout > div.menu span.inner {
display: none;
}
body > #layout > div > .header > a.back-sidebar-button {
display: block;
float: left;
}
body > #layout > div.menu,
body > #layout > div.content {
display: flex;
@ -205,22 +197,9 @@ body > #layout > div > .header > a.menu-button {
body > #layout > div.list {
max-width: 100%;
}
body > #layout > div > .header > a.toolbar-menu-button,
body > #layout > div > .header > .buttons {
display: block;
float: right;
}
body > #layout > div > .header > a.back-list-button {
display: block;
float: left;
}
}
@media screen and (max-width: 480px) { /* phone */
body > #layout > div > .header > a.menu-button {
display: block;
float: left;
}
body > #layout > div.menu span.inner {
display: block;
}
@ -249,12 +228,29 @@ body > #layout > div > .header > a.menu-button {
}
@media screen and (max-width: 319px) {
#layout > div > .header > .buttons > button:before {
content: "" !important;
float: none !important;
}
body > #layout > div.sidebar,
body > #layout > div.list {
min-width: @page-min-width;
}
}
@media screen and (min-width: 1200px) {
body > #layout > div > .header > a.back-list-button,
body > #layout > div > .header > a.back-sidebar-button {
display: none;
}
}
@media screen and (min-width: 769px) {
body > #layout > .content > .header > .header-title,
body > #layout > div > .header > .buttons,
body > #layout > div > .header > a.toolbar-menu-button {
display: none;
}
}
@media screen and (min-width: 480px) {
body > #layout > div > .header > a.menu-button {
display: none;
}
}

@ -121,10 +121,6 @@ a.button {
display: none;
}
.toolbar {
height: 2.4em;
}
.toolbar .ui.popup,
.toolbar.ui.popup {
height: auto;
@ -137,6 +133,8 @@ a.button {
.toolbar a.button {
padding: 0 0.3em;
height: 100%;
display: inline-block;
}
.toolbar .dropbutton > a.button:first-child {
@ -159,19 +157,12 @@ a.button {
border: 0;
padding: 0 0.25em;
font-size: 1em;
float: left;
height: 2.5em;
line-height: 1.25em;
border-radius: 0;
cursor: pointer;
}
.header > a {
height: 2.5em;
line-height: 2.5em;
}
.searchbar {
display: table;
text-align: right;
@ -447,14 +438,12 @@ div.popover > h3 {
}
/* make some elements bigger on tablets/phones */
/* TODO: we should/could maybe do this more globally? */
@media screen and (max-width: 1024px) {
}
@media screen and (min-width: 769px) {
ul.toolbar {
margin: 0;
flex: 1;
text-align: right;
}
ul.toolbar > li {
display: inline-block;

@ -7,7 +7,7 @@
<div id="sidebar" class="sidebar listbox" role="navigation" aria-labelledby="directorylist-header">
<div class="header">
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<roundcube:label name="groups" />
<span id="directorylist-header" class="header-title"><roundcube:label name="groups" /></span>
</div>
<div class="scroller">
<roundcube:object name="directorylist" id="directorylist" class="treelist listing iconized" />
@ -26,7 +26,7 @@
<div class="header">
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="groups" /></span></a>
<roundcube:object name="addresslisttitle" label="contacts" tag="span" />
<roundcube:object name="addresslisttitle" label="contacts" tag="span" class="header-title" />
<roundcube:object name="searchform" id="searchform" wrapper="searchbar toolbar"
label="contactsearchform" buttontitle="findcontacts" options="search-menu" ariatag="h2" />
</div>
@ -60,11 +60,12 @@
<!-- contact details frame -->
<div id="content" class="content" role="main">
<div class="header">
<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>
<!-- toolbar -->
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div id="addressbooktoolbar" class="toolbar" role="toolbar" aria-labelledby="aria-label-toolbar">
<div id="addressbooktoolbar" class="toolbar">
<roundcube:button command="import" type="link"
class="button import disabled" classAct="button import"
label="import" title="importcontacts" innerclass="inner" />

@ -5,11 +5,11 @@
<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="folders" /></h1>
<!-- folders list -->
<div id="list" class="list listbox selected" aria-labelledby="aria-label-prefsection">
<div id="list" class="list listbox selected" aria-labelledby="aria-label-folderslist">
<div class="header">
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
<roundcube:label name="folders" />
<span id="aria-label-folderslist" class="header-title"><roundcube:label name="folders" /></span>
<roundcube:object name="searchform" id="foldersearch" wrapper="searchbar toolbar"
label="foldersearchform" buttontitle="findfolders" options="search-filter" ariatag="h2" />
</div>
@ -34,6 +34,7 @@
<div id="content" class="content" role="main">
<div class="header">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
</div>
<roundcube:object name="folderframe" id="preferences-frame" src="/watermark.html" />
</div>

@ -6,10 +6,10 @@
<!-- responses list -->
<div id="list" class="list listbox selected" aria-labelledby="aria-label-identitieslist">
<div id="aria-label-identitieslist" class="header">
<div class="header">
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
<roundcube:label name="identities" />
<span id="aria-label-identitieslist" class="header-title"><roundcube:label name="identities" /></span>
</div>
<div class="scroller">
<roundcube:object name="identitieslist" id="identities-table" class="listing" noheader="true" role="listbox" />
@ -30,6 +30,7 @@
<div id="content" class="content" role="main">
<div class="header">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
</div>
<roundcube:object name="identityframe" id="preferences-frame" src="/watermark.html" title="arialabelidentityeditfrom" />
</div>

@ -7,7 +7,7 @@
<div id="sidebar" class="sidebar listbox" role="navigation" aria-labelledby="aria-label-folderlist">
<div class="header">
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<span class="username"><roundcube:object name="username" /></span>
<span class="header-title username"><roundcube:object name="username" /></span>
</div>
<h2 id="aria-label-folderlist" class="voice"><roundcube:label name="arialabelfolderlist" /></h2>
<div id="folderlist-content" class="scroller">
@ -27,7 +27,7 @@
<div id="messagelist-header" class="header">
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="mailboxlist" /></span></a>
<span id="folder-name"></span>
<span class="header-title"></span>
<div class="toolbar">
<roundcube:object name="listmenulink" class="button settings" innerclass="inner" />
<span class="spacer"></span><!-- spacer to compensate the search icon -->
@ -88,6 +88,7 @@
<div id="content" class="content">
<div class="header">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
<roundcube:include file="/includes/mail-menu.html" />
</div>
<h2 id="aria-label-mailpreviewframe" class="voice"><roundcube:label name="arialabelmailpreviewframe" /></h2>

@ -7,6 +7,7 @@
<div id="content" class="content selected" role="main">
<div class="header">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
</div>
<roundcube:object name="plugin.body" />
</div>

@ -6,10 +6,10 @@
<!-- responses list -->
<div id="list" class="list listbox selected" aria-labelledby="aria-label-responseslist">
<div id="aria-label-responseslist" class="header">
<div class="header">
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
<roundcube:label name="responses" />
<span id="aria-label-responseslist" class="header-title"><roundcube:label name="responses" /></span>
</div>
<div class="scroller">
<roundcube:object name="responseslist" id="identities-table" class="listing" noheader="true" role="listbox" />
@ -30,6 +30,7 @@
<div id="content" class="content" role="main">
<div class="header">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
</div>
<roundcube:object name="responseframe" id="preferences-frame" src="/watermark.html" title="arialabelresonseeditfrom" />
</div>

@ -5,10 +5,10 @@
<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="preferences" /></h1>
<div id="list" class="list listbox selected" aria-labelledby="aria-label-prefsection">
<div id="aria-label-prefsection" class="header">
<div class="header">
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
<roundcube:label name="preferences" />
<span id="aria-label-prefsection" class="header-title"><roundcube:label name="preferences" /></span>
</div>
<div class="scroller">
<roundcube:object name="sectionslist" id="sections-table" class="listing iconized" noheader="true" />
@ -18,6 +18,7 @@
<div id="content" class="content" role="main">
<div class="header">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
</div>
<roundcube:object name="prefsframe" id="preferences-frame" src="/watermark.html" title="arialabelpreferencesform" />
</div>

@ -68,6 +68,9 @@ function rcube_elastic_ui()
env.last_selected = layout.content[0];
screen_resize();
}
else if (!show) {
$('.header > .header-title', layout.content).text('');
}
});
// display the list widget after 'list' and 'listgroup' commands
@ -83,7 +86,7 @@ function rcube_elastic_ui()
if (rcmail.env.task == 'mail' && !rcmail.env.action) {
var name = $.type(e) == 'string' ? e : rcmail.env.mailbox;
var folder = rcmail.env.mailboxes[name];
$('#folder-name').text(folder ? folder.name : '');
$('.header > .header-title', layout.list).text(folder ? folder.name : '');
}
};
@ -109,7 +112,6 @@ function rcube_elastic_ui()
return false;
});
// Convert some elements to bootstrap style
bootstrap_style();
@ -133,6 +135,34 @@ function rcube_elastic_ui()
$(document).on('click', close_all_popups);
rcube_webmail.set_iframe_events({mousedown: close_all_popups});
// Initialize search forms (in list headers)
$('.header > .searchbar').each(function() { searchbar_init(this); });
// Intercept jQuery-UI dialogs to re-style them
if ($.ui) {
$.widget('ui.dialog', $.ui.dialog, {
open: function() {
this._super();
dialog_open(this);
return this;
}
});
}
// Set content frame title in parent window
if (rcmail.is_framed()) {
var title = $('h1.voice:first').text();
if (title) {
parent.$('#content > .header > .header-title').text(title);
}
}
else {
var title = $('#content .boxtitle:first').detach().text();
if (title) {
$('#content > .header > .header-title').text(title);
}
}
// Move form buttons from the content frame into the frame header (on parent window)
// TODO: Active button state
var form_buttons = [];
@ -160,9 +190,10 @@ function rcube_elastic_ui()
parent.UI.register_frame_buttons(form_buttons);
}
}
else
else {
register_frame_buttons(form_buttons);
}
}
function register_frame_buttons(buttons)
{
@ -173,37 +204,24 @@ function rcube_elastic_ui()
if (header.length) {
var toolbar = header.children('.buttons');
if (!toolbar.length)
if (!toolbar.length) {
toolbar = $('<span class="buttons">').appendTo(header);
}
content_buttons = [];
toolbar.html('');
$.each(buttons, function() {
toolbar.append(this);
content_buttons.push(this.data('target'));
});
resize();
}
}
}
// Initialize search forms (in list headers)
$('.header > .searchbar').each(function() { searchbar_init(this); });
// Intercept jQuery-UI dialogs to re-style them
if ($.ui) {
$.widget('ui.dialog', $.ui.dialog, {
open: function() {
this._super();
dialog_open(this);
return this;
toolbar.html('').append(buttons);
resize();
}
});
}
};
// rcmail 'init' event handler
function init() {
function init()
{
// Enable checkbox selection on list widgets
$('table[data-list]').each(function() {
var list = $(this).data('list');
@ -213,6 +231,7 @@ function rcube_elastic_ui()
});
};
// Apply bootstrap classes to html elements
function bootstrap_style(context)
{
$('input.button,button', context || document).addClass('btn');
@ -507,6 +526,8 @@ function rcube_elastic_ui()
// TODO: spacer item
// TODO: dropbutton item
// TODO: a way to inject buttons to the menu from content iframe
// or automatically add all buttons except Save and Cancel
// (example QR Code button in contact frame)
var items = [], buttons_with_popup = [];
@ -671,7 +692,7 @@ function rcube_elastic_ui()
};
/**
* Roundcube About dialog
* About dialog
*/
function about_dialog(elem)
{
@ -692,6 +713,9 @@ function rcube_elastic_ui()
});
};
/**
* Search options menu popup
*/
function searchmenu(obj)
{
if (rcmail.env.search_mods) {

Loading…
Cancel
Save