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.
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:
`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
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
@color-taskmenu-background: #414e54;
@color-taskmenu-button: #959c9f;
@color-taskmenu-button-selected: #fff;
@color-taskmenu-button-action: #fff;
@color-taskmenu-button: #fff;
@color-taskmenu-button-selected: @color-taskmenu-button;
@color-taskmenu-button-action: @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-special-background: @color-taskmenu-background;
@color-taskmenu-button-hover: lighten(@color-taskmenu-button, 10%);
@color-taskmenu-button-selected-hover: #fff;
@color-taskmenu-button-action-hover: #fff;
@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;
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 {
flex: 1;
position: relative; // for .listing-info positioning
@ -187,9 +179,6 @@ html.iframe {
}
@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) {
@ -236,16 +225,6 @@ html.iframe {
}
@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) {
@ -255,11 +234,16 @@ html.iframe {
}
}
@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 {
@media screen and (min-width: (@screen-width-xs + 1px)) {
body > #layout > div > .header > a.menu-button {
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)) {
@ -269,14 +253,31 @@ html.iframe {
body > #layout > div > .header > a.toolbar-menu-button {
display: none;
}
body > #layout > .menu {
width: @layout-menu-width/2;
}
}
@media screen and (min-width: (@screen-width-xs + 1px)) {
body > #layout > div > .header > a.menu-button {
@media screen and (min-width: (@screen-width-medium + 1px)) {
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;
}
}
html.layout-phone {
.hidden-phone {
display: none !important;
}
}
html.layout-phone,
html.layout-small {
.hidden-small {

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

@ -92,7 +92,7 @@
/* Reset some Bootstrap style */
body, button, input, optgroup, select, textarea {
body, button, input, optgroup, select, textarea, .popover {
.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-icon-width: 2.2em;
@layout-mobile-menu-width: (@screen-width-mini * .85);
@layout-contact-icon-width: 112px;
@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;
padding: 0;
& > h3 {
.popover-header {
// On mobile don't display popup arrows and titles
display: none;
}
@ -72,36 +72,19 @@ html.layout-phone {
padding: 0;
right: 0;
bottom: 0;
width: 276px;
top: 0;
width: @layout-mobile-menu-width;
transform: none !important;
border-radius: 0;
border: 0;
display: flex;
flex-direction: column;
.webkit-scroller;
div.arrow {
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 {
border-bottom: 1px solid @color-list-border;
@ -126,6 +109,26 @@ html.layout-phone {
border: 1px solid @color-input-border;
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 {

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

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

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

@ -1,7 +1,9 @@
<div class="menu">
<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 class="menu-header"><a class="button icon cancel"><roundcube:label name="close" /></a></div>
<span class="action-buttons">
<roundcube:button command="compose" type="link" class="button compose"
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
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_list.on('click', function() { show_list(); 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)
if (is_framed && !rcmail.env.extwin && !parent.$('.ui-dialog:visible').length) {
if (title = $('h1.voice:first').text()) {
@ -268,7 +266,7 @@ function rcube_elastic_ui()
});
// 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'),
sizes = $(this).data('hidden').split(',');
@ -1305,15 +1303,13 @@ function rcube_elastic_ui()
function screen_resize_phone()
{
screen_resize_small_all();
layout.menu.addClass('hidden');
app_menu(false);
};
function screen_resize_small()
{
screen_resize_small_all();
layout.menu.removeClass('hidden');
app_menu(true);
};
function screen_resize_normal()
@ -1330,8 +1326,7 @@ function rcube_elastic_ui()
}
layout.content.removeClass('hidden');
layout.menu.removeClass('hidden');
app_menu(true);
screen_resize_small_none();
};
@ -1455,15 +1450,26 @@ function rcube_elastic_ui()
};
// 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') {
show = layout.menu.is(':visible') ? false : true;
}
if (!env.menu_initialized) {
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