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

Refactored taskmenu

Browse Source 
- Eliminate grey color
- On mobile display menu using style of other menus
- Fix Close button on iOS (#82)
pull/5742/merge
Aleksander Machniak 7 years ago
parent 1a2a2d2cb2
commit 6316fe054c
10 changed files with 157 additions and 185 deletions
Show Stats Download Patch File Download Diff File

3
skins/elastic/README.md
Unescape Escape View File

@ -101,7 +101,8 @@ RULES:
- `data-hidden`: Makes a menu entry/button hidden on specified screen sizes. - `data-hidden`: Makes a menu entry/button hidden on specified screen sizes.
Can be used for example for functionality not implemented or that has no sense Can be used for example for functionality not implemented or that has no sense
on phones or touch devices. Contains a comma-separated list following values: on phones or touch devices. Contains a comma-separated list following values:
`large` (width > 1200px), `big` (width > 768px), `small` (width =< 768px). `large` (width > 1200px), `big` (width > 768px), `small` (width =< 768px),
`phone` (width =< 480px).
- `data-content-button`: Makes the action button with this attribute to be copied - `data-content-button`: Makes the action button with this attribute to be copied
to the content frame header on small/phone screens. to the content frame header on small/phone screens.

9
skins/elastic/styles/colors.less
Unescape Escape View File

@ -35,16 +35,15 @@
// Task menu // Task menu
@color-taskmenu-background: #414e54; @color-taskmenu-background: #414e54;
@color-taskmenu-button: #959c9f; @color-taskmenu-button: #fff;
@color-taskmenu-button-selected: #fff; @color-taskmenu-button-selected: @color-taskmenu-button;
@color-taskmenu-button-action: #fff; @color-taskmenu-button-action: @color-taskmenu-button;
@color-taskmenu-button-special: @color-taskmenu-button; @color-taskmenu-button-special: @color-taskmenu-button;
@color-taskmenu-button-selected-background: @color-taskmenu-background; @color-taskmenu-button-selected-background: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background: @color-main; @color-taskmenu-button-action-background: @color-main;
@color-taskmenu-button-special-background: @color-taskmenu-background; @color-taskmenu-button-special-background: @color-taskmenu-background;
@color-taskmenu-button-hover: lighten(@color-taskmenu-button, 10%);
@color-taskmenu-button-selected-hover: #fff; @color-taskmenu-button-selected-hover: #fff;
@color-taskmenu-button-action-hover: #fff; @color-taskmenu-button-action-hover: #fff;
@color-taskmenu-button-special-hover: lighten(@color-taskmenu-button-special, 10%); @color-taskmenu-button-special-hover: lighten(@color-taskmenu-button-special, 10%);

53
skins/elastic/styles/layout.less
Unescape Escape View File

@ -105,14 +105,6 @@ body > #layout {
min-width: 300px; min-width: 300px;
background-color: @color-layout-list-background; background-color: @color-layout-list-background;
} }
&.menu {
width: @layout-menu-width;
// FIXME: we set background color here not in taskmenu.less, because
// otherwise background is partially white on Android/iOS
background-color: @color-taskmenu-background;
}
& > .scroller { & > .scroller {
flex: 1; flex: 1;
position: relative; // for .listing-info positioning position: relative; // for .listing-info positioning
@ -187,9 +179,6 @@ html.iframe {
} }
@media screen and (max-width: @screen-width-medium) { @media screen and (max-width: @screen-width-medium) {
body > #layout > div.menu {
width: @layout-menu-width/2;
}
} }
@media screen and (max-width: @screen-width-small) { @media screen and (max-width: @screen-width-small) {
@ -236,16 +225,6 @@ html.iframe {
} }
@media screen and (max-width: @screen-width-xs) { @media screen and (max-width: @screen-width-xs) {
body > #layout > div.menu {
position: absolute;
z-index: 30001; // because autocompletion popup uses z-index:30000
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
text-align: center;
}
} }
@media screen and (max-width: @screen-width-mini) { @media screen and (max-width: @screen-width-mini) {
@ -255,11 +234,16 @@ html.iframe {
} }
} }
@media screen and (min-width: (@screen-width-large + 1px)) { @media screen and (min-width: (@screen-width-xs + 1px)) {
body > #layout > div > .header > a.back-list-button, body > #layout > div > .header > a.menu-button {
body > #layout > div > .header > a.back-sidebar-button {
display: none; display: none;
} }
body > #layout > .menu {
// FIXME: we set background color here not in taskmenu.less, because
// otherwise background is partially white on Android/iOS
background-color: @color-taskmenu-background;
}
} }
@media screen and (min-width: (@screen-width-small + 1px)) { @media screen and (min-width: (@screen-width-small + 1px)) {
@ -269,14 +253,31 @@ html.iframe {
body > #layout > div > .header > a.toolbar-menu-button { body > #layout > div > .header > a.toolbar-menu-button {
display: none; display: none;
} }
body > #layout > .menu {
width: @layout-menu-width/2;
}
} }
@media screen and (min-width: (@screen-width-xs + 1px)) { @media screen and (min-width: (@screen-width-medium + 1px)) {
body > #layout > div > .header > a.menu-button { body > #layout > .menu {
width: @layout-menu-width;
}
}
@media screen and (min-width: (@screen-width-large + 1px)) {
body > #layout > div > .header > a.back-list-button,
body > #layout > div > .header > a.back-sidebar-button {
display: none; display: none;
} }
} }
html.layout-phone {
.hidden-phone {
display: none !important;
}
}
html.layout-phone, html.layout-phone,
html.layout-small { html.layout-small {
.hidden-small { .hidden-small {

2
skins/elastic/styles/styles.less
Unescape Escape View File

@ -92,7 +92,7 @@
/* Reset some Bootstrap style */ /* Reset some Bootstrap style */
body, button, input, optgroup, select, textarea { body, button, input, optgroup, select, textarea, .popover {
.font-family; .font-family;
} }

2
skins/elastic/styles/variables.less
Unescape Escape View File

@ -34,6 +34,8 @@
@layout-touch-menu-record-font-size: 1.2rem; @layout-touch-menu-record-font-size: 1.2rem;
@layout-touch-icon-width: 2.2em; @layout-touch-icon-width: 2.2em;
@layout-mobile-menu-width: (@screen-width-mini * .85);
@layout-contact-icon-width: 112px; @layout-contact-icon-width: 112px;
@layout-contact-icon-height: 135px; @layout-contact-icon-height: 135px;

45
skins/elastic/styles/widgets/dialogs.less
Unescape Escape View File

@ -49,7 +49,7 @@
box-shadow: 3px 3px 5px @color-popover-shadow; box-shadow: 3px 3px 5px @color-popover-shadow;
padding: 0; padding: 0;
& > h3 { .popover-header {
// On mobile don't display popup arrows and titles // On mobile don't display popup arrows and titles
display: none; display: none;
} }
@ -72,36 +72,19 @@ html.layout-phone {
padding: 0; padding: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 276px; top: 0;
width: @layout-mobile-menu-width;
transform: none !important; transform: none !important;
border-radius: 0; border-radius: 0;
border: 0; border: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.webkit-scroller;
div.arrow { div.arrow {
display: none; display: none;
} }
& > h3 {
display: block;
border-radius: 0;
padding: 0 .5em;
height: @layout-touch-header-height;
line-height: @layout-touch-header-height;
font-size: @layout-touch-header-font-size;
color: @color-popover-header;
background-color: @color-popover-header-background;
a {
display: inline-block;
width: 100%;
}
}
.popover-body > * {
max-height: 100% !important;
}
.listing li:last-child { .listing li:last-child {
border-bottom: 1px solid @color-list-border; border-bottom: 1px solid @color-list-border;
@ -126,6 +109,26 @@ html.layout-phone {
border: 1px solid @color-input-border; border: 1px solid @color-input-border;
box-shadow: none; box-shadow: none;
} }
.popover-header {
display: block;
border-radius: 0;
padding: 0 .5em;
height: @layout-touch-header-height;
line-height: @layout-touch-header-height;
font-size: @layout-touch-header-font-size;
color: @color-popover-header;
background-color: @color-popover-header-background;
a {
display: inline-block;
width: 100%;
}
}
.popover-body > * {
max-height: 100% !important;
}
} }
html.touch .popover { html.touch .popover {

181
skins/elastic/styles/widgets/taskmenu.less
Unescape Escape View File

@ -17,28 +17,10 @@
a { a {
.overflow-ellipsis; .overflow-ellipsis;
text-decoration: none; text-decoration: none;
padding: .45rem 0;
display: block; display: block;
text-align: center;
color: @color-taskmenu-button;
&:before { &:before {
&:extend(.font-icon-class); &:extend(.font-icon-class);
display: block;
height: 1.75rem;
line-height: 1.5;
width: @layout-menu-width;
margin: 0;
}
&:hover {
color: @color-taskmenu-button-hover;
background: @color-taskmenu-button-background-hover;
}
&.selected {
color: @color-taskmenu-button-selected;
background: @color-taskmenu-button-selected-background;
} }
&.mail:before { &.mail:before {
@ -77,136 +59,117 @@
&.notes:before { &.notes:before {
content: @fa-var-sticky-note; content: @fa-var-sticky-note;
} }
span.inner {
font-size: 90%;
padding: 0 .1em;
}
} }
.special-buttons { a.logout {
position: absolute; color: @color-taskmenu-button-logout-hover !important;
bottom: 0; }
left: 0;
width: @layout-menu-width;
@media screen and (max-width: @screen-width-xs) { @media screen and (max-width: @screen-width-xs) {
position: relative; z-index: 30001; // because autocompletion popup uses z-index:30000
} overflow-x: hidden;
a { a {
color: @color-taskmenu-button-special; width: 100%;
background: @color-taskmenu-button-special-background; padding: 0 .5em;
text-align: left;
&:hover { line-height: @layout-touch-menu-record-height;
color: @color-taskmenu-button-special-hover; height: @layout-touch-menu-record-height;
background: @color-taskmenu-button-special-background-hover; border-bottom: 1px solid @color-list-border;
color: @color-list;
&.logout { font-size: 1.2rem;
color: @color-taskmenu-button-logout-hover !important;
}
}
@media screen and (max-width: @screen-width-xs) { &:before {
&.logout { margin-right: .5rem;
color: @color-taskmenu-button-logout-hover !important;
}
} }
} }
} }
.action-buttons { @media screen and (min-width: (@screen-width-xs + 1px)) {
a { a {
color: @color-taskmenu-button-action; text-align: center;
background: @color-taskmenu-button-action-background; color: @color-taskmenu-button;
padding: .45rem 0;
width: @layout-menu-width/2;
font-size: 1.2rem;
&:hover { &:before {
color: @color-taskmenu-button-action-hover; display: block;
background: @color-taskmenu-button-action-background-hover; height: 2.1rem;
line-height: 1.5;
width: @layout-menu-width/2;
margin: 0;
} }
}
}
@media screen and (max-width: @screen-width-medium) { &:hover {
a, color: @color-taskmenu-button;
a:before { background: @color-taskmenu-button-background-hover;
width: @layout-menu-width/2; }
}
a { &.selected {
height: 3.25rem; color: @color-taskmenu-button-selected;
font-size: 1.25rem; background: @color-taskmenu-button-selected-background;
}
} }
span.inner { .special-buttons {
display: none; position: absolute;
bottom: 0;
left: 0;
width: @layout-menu-width;
} }
.action-buttons { .action-buttons {
a { a {
color: @color-taskmenu-button-action-background; color: @color-taskmenu-button-action-background;
background: @color-taskmenu-background; background: @color-taskmenu-background;
}
}
}
@media screen and (max-width: @screen-width-xs) { &:hover {
a, color: @color-taskmenu-button-action-hover;
a:before { background: @color-taskmenu-button-action-background-hover;
height: 2.25rem; }
display: inline-block; }
width: 310px / 3;
font-size: 1.25em;
}
a {
height: auto;
margin-top: 1rem;
background: transparent;
}
a:hover {
background: transparent !important;
} }
span.inner { span.inner {
display: block; display: none;
} }
} }
@media screen and (max-width: @screen-width-xs) and (min-width: 320px) and (min-height: 480px) { @media screen and (min-width: (@screen-width-medium + 1px)) {
text-align: left;
}
.menu-header {
border-bottom: 1px solid @color-taskmenu-button;
height: @layout-touch-header-height;
line-height: @layout-touch-header-height;
text-align: left;
padding: 0 .5em;
font-size: 1.2rem;
a { a {
color: @color-taskmenu-button; width: @layout-menu-width;
font-size: 100%; height: @layout-header-height;
display: inline; font-size: 1.1rem;
&:before { &:before {
line-height: @layout-touch-header-height; width: @layout-menu-width;
height: @layout-touch-header-height; height: 1.75rem;
width: auto; line-height: 1.5;
margin-right: .25rem;
} }
}
&:hover { .action-buttons {
background: inherit; a {
color: @color-taskmenu-button-action;
background: @color-taskmenu-button-action-background;
} }
} }
span.inner {
display: inline;
font-size: 85%;
padding: 0 .1em;
}
} }
}
@media screen and (min-width: (@screen-width-xs + 1px)) { .menu {
.menu-header { .webkit-scroller;
display: none;
.popover-header {
@media screen and (min-width: (@screen-width-xs + 1px)) {
display: none !important;
} }
} }
} }

5
skins/elastic/templates/includes/mail-menu.html
Unescape Escape View File

@ -24,11 +24,6 @@
class="button delete disabled" classAct="button delete" class="button delete disabled" classAct="button delete"
label="delete" title="deletemessage" innerclass="inner" /> label="delete" title="deletemessage" innerclass="inner" />
<roundcube:if condition="template:name == 'message'" /> <roundcube:if condition="template:name == 'message'" />
<!--
<roundcube:button command="move" type="link"
class="button move disabled" classAct="button move"
label="move" title="moveto" innerclass="inner" data-popup-pos="bottom" />
-->
<roundcube:button command="print" type="link" data-hidden="small" <roundcube:button command="print" type="link" data-hidden="small"
class="button print disabled" classAct="button print" class="button print disabled" classAct="button print"
label="print" title="printmessage" innerclass="inner" /> label="print" title="printmessage" innerclass="inner" />

4
skins/elastic/templates/includes/menu.html
Unescape Escape View File

@ -1,7 +1,9 @@
<div class="menu"> <div class="menu">
<h2 id="aria-label-tasknav" class="voice"><roundcube:label name="arialabeltasknav" /></h2> <h2 id="aria-label-tasknav" class="voice"><roundcube:label name="arialabeltasknav" /></h2>
<div class="popover-header">
<a class="button icon cancel"><roundcube:label name="close" /></a>
</div>
<div id="taskmenu" role="navigation" aria-labelledby="aria-label-tasknav"> <div id="taskmenu" role="navigation" aria-labelledby="aria-label-tasknav">
<div class="menu-header"><a class="button icon cancel"><roundcube:label name="close" /></a></div>
<span class="action-buttons"> <span class="action-buttons">
<roundcube:button command="compose" type="link" class="button compose" <roundcube:button command="compose" type="link" class="button compose"
label="compose" title="writenewmessage" innerclass="inner" label="compose" title="writenewmessage" innerclass="inner"

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

@ -120,13 +120,11 @@ function rcube_elastic_ui()
} }
// menu/sidebar/list button // menu/sidebar/list button
buttons.menu.on('click', function() { show_menu(); return false; }); buttons.menu.on('click', function() { app_menu(true); return false; });
buttons.back_sidebar.on('click', function() { show_sidebar(); return false; }); buttons.back_sidebar.on('click', function() { show_sidebar(); return false; });
buttons.back_list.on('click', function() { show_list(); return false; }); buttons.back_list.on('click', function() { show_list(); return false; });
buttons.back_content.on('click', function() { show_content(true); return false; }); buttons.back_content.on('click', function() { show_content(true); return false; });
$('body').on('click', function() { if (mode == 'phone') layout.menu.addClass('hidden'); });
// Set content frame title in parent window (exclude ext-windows and dialog frames) // Set content frame title in parent window (exclude ext-windows and dialog frames)
if (is_framed && !rcmail.env.extwin && !parent.$('.ui-dialog:visible').length) { if (is_framed && !rcmail.env.extwin && !parent.$('.ui-dialog:visible').length) {
if (title = $('h1.voice:first').text()) { if (title = $('h1.voice:first').text()) {
@ -268,7 +266,7 @@ function rcube_elastic_ui()
}); });
// buttons that should be hidden on small screen devices // buttons that should be hidden on small screen devices
$('a[data-hidden],button[data-hidden]').each(function() { $('[data-hidden]').each(function() {
var parent = $(this).parent('li'), var parent = $(this).parent('li'),
sizes = $(this).data('hidden').split(','); sizes = $(this).data('hidden').split(',');
@ -1305,15 +1303,13 @@ function rcube_elastic_ui()
function screen_resize_phone() function screen_resize_phone()
{ {
screen_resize_small_all(); screen_resize_small_all();
app_menu(false);
layout.menu.addClass('hidden');
}; };
function screen_resize_small() function screen_resize_small()
{ {
screen_resize_small_all(); screen_resize_small_all();
app_menu(true);
layout.menu.removeClass('hidden');
}; };
function screen_resize_normal() function screen_resize_normal()
@ -1330,8 +1326,7 @@ function rcube_elastic_ui()
} }
layout.content.removeClass('hidden'); layout.content.removeClass('hidden');
layout.menu.removeClass('hidden'); app_menu(true);
screen_resize_small_none(); screen_resize_small_none();
}; };
@ -1455,15 +1450,26 @@ function rcube_elastic_ui()
}; };
// show menu widget // show menu widget
function show_menu() function app_menu(show)
{ {
var show = true; if (show) {
if (mode == 'phone') {
$('<div id="menu-overlay" class="popover-overlay">').appendTo('body');
if (mode == 'phone') { if (!env.menu_initialized) {
show = layout.menu.is(':visible') ? false : true; env.menu_initialized = true;
} $('a', layout.menu).on('click', function(e) { if (mode == 'phone') app_menu(); });
}
layout.menu.addClass('popover');
}
layout.menu[show ? 'removeClass' : 'addClass']('hidden'); layout.menu.removeClass('hidden');
}
else {
$('#menu-overlay').remove();
layout.menu.addClass('hidden').removeClass('popover');
}
}; };
/** /**

Write Preview
Loading…
Cancel
Save