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

Rework layout/navigation

Browse Source 
- list/sidebar footer buttons with text also on mobile
- fix UI with screen width = 768px
pull/5742/merge
Aleksander Machniak 7 years ago
parent 52e96f8d1b
commit cbf80fb744
7 changed files with 112 additions and 98 deletions
Show Stats Download Patch File Download Diff File

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

@ -190,23 +190,6 @@ html.iframe body {
} }
@media screen and (max-width: @screen-width-medium) { @media screen and (max-width: @screen-width-medium) {
body > #layout > div > .header,
body > #layout > div > .footer {
line-height: @layout-touch-header-height;
height: @layout-touch-header-height;
}
body > #layout > div:not(.content) > .header {
font-size: @layout-touch-header-font-size;
a.button:before {
font-size: 1.75rem;
height: @layout-touch-header-height;
margin: 0;
width: 1.4em;
}
}
body > #layout > div.menu { body > #layout > div.menu {
width: @layout-menu-width/2; width: @layout-menu-width/2;
} }
@ -218,16 +201,11 @@ html.iframe body {
display: none; display: none;
} }
body > #layout > div > .footer {
font-size: @layout-touch-header-font-size;
}
body > #layout > div.sidebar, body > #layout > div.sidebar,
body > #layout > div.list { body > #layout > div.list {
max-width: none; max-width: none;
} }
body > #layout > div > .footer,
body > #layout > div > .header { body > #layout > div > .header {
a.button:before { a.button:before {
font-size: 1.75rem; font-size: 1.75rem;

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

@ -32,7 +32,6 @@
.popover { .popover {
box-shadow: 3px 3px 5px @color-popover-shadow; box-shadow: 3px 3px 5px @color-popover-shadow;
overflow: hidden;
padding: 0; padding: 0;
& > h3 { & > h3 {
@ -41,12 +40,21 @@
} }
} }
#rcmKSearchpane {
width: auto;
max-width: none;
overflow: hidden;
li {
padding-right: .5rem;
}
}
html.layout-small, html.layout-small,
html.layout-phone { html.layout-phone {
.popover { .popover {
margin: 0 !important; margin: 0 !important;
padding: 0; padding: 0;
left: initial !important;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 276px; width: 276px;
@ -89,6 +97,10 @@ html.layout-phone {
} }
} }
.popover:not(#rcmKSearchpane) {
left: initial !important;
}
.popover-overlay { .popover-overlay {
z-index: 1000; z-index: 1000;
opacity: .5; opacity: .5;
@ -101,8 +113,8 @@ html.layout-phone {
#rcmKSearchpane { #rcmKSearchpane {
bottom: auto; bottom: auto;
box-shadow: none;
border: 1px solid @color-input-border; border: 1px solid @color-input-border;
box-shadow: none;
} }
} }

5
skins/elastic/styles/widgets/lists.less
Unescape Escape View File

@ -244,6 +244,11 @@ html.touch {
color: @color-toolbarmenu-hover; color: @color-toolbarmenu-hover;
background-color: @color-toolbarmenu-hover-background; background-color: @color-toolbarmenu-hover-background;
} }
td {
overflow: hidden;
text-overflow: ellipsis;
}
} }
ul.treelist li { ul.treelist li {

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

@ -12,6 +12,9 @@
/*** Toolbar widget ***/ /*** Toolbar widget ***/
.toolbar { .toolbar {
margin: 0;
font-size: 1rem;
&.listing a, &.listing a,
a { a {
text-decoration: none; text-decoration: none;
@ -20,14 +23,28 @@
} }
a.button { a.button {
padding: 0 .3em;
display: inline-block; display: inline-block;
border: 0 !important; border: 0 !important;
height: @layout-header-height;
min-width: 3.5rem;
max-width: 6rem;
padding: .45rem;
text-align: center;
text-overflow: ellipsis;
overflow-x: hidden;
line-height: 1.5;
&:hover,
&:focus {
outline: 0;
}
&:before { &:before {
&:extend(.font-icon-class); &:extend(.font-icon-class);
display: inline; display: inline;
float: none; float: none;
margin: 0;
line-height: 1.75;
} }
&.reply:before { &.reply:before {
@ -156,6 +173,11 @@
} }
} }
&:not(.popupmenu) span.inner {
font-size: 90%;
font-weight: normal;
}
.dropbutton { .dropbutton {
a.button.dropdown { a.button.dropdown {
font-size: 75%; font-size: 75%;
@ -188,13 +210,10 @@
min-width: 1rem !important; min-width: 1rem !important;
height: @layout-pagenav-height !important; height: @layout-pagenav-height !important;
color: @color-list-pagenav; color: @color-list-pagenav;
overflow: hidden;
&:before { &:before {
line-height: 1 !important; line-height: 1 !important;
@media screen and (max-width: (@screen-width-small)) {
line-height: 2 !important;
}
} }
} }
@ -216,6 +235,19 @@
display: inline; display: inline;
text-align: center; text-align: center;
} }
span.inner {
display: none;
}
}
&.footer {
a.button:before {
height: 1.75rem;
float: none;
display: block;
width: auto;
}
} }
} }
@ -264,8 +296,17 @@
} }
.popupmenu.toolbar.listing { .popupmenu.toolbar.listing {
a.button:before { a.button {
display: inline-block; max-width: 100%;
text-align: left;
line-height: @layout-touch-menu-record-height;
height: @layout-touch-menu-record-height;
&:before {
display: inline-block;
line-height: inherit;
margin-right: .5rem;
}
} }
.dropbutton { .dropbutton {
@ -445,18 +486,27 @@
a.addressbook:before { a.addressbook:before {
content: @fa-var-user; content: @fa-var-user;
} }
a.recipient:before {
content: @fa-var-envelope-o;
}
} }
#layout > .sidebar, #layout > .sidebar > .header,
#layout > .list { #layout > .list > .header {
span.inner { span.inner {
display: none; display: none;
} }
} }
.toolbar.content-frame-navigation { #layout > .content > * > .toolbar {
span { text-align: center;
flex-grow: 1; }
html.touch {
.toolbarmenu.listing td,
.toolbarmenu.listing li,
#layout > :not(.content) > .header a.button {
font-size: 1.2rem;
} }
} }
@ -466,36 +516,13 @@
} }
.toolbar { .toolbar {
margin: 0;
font-size: 1rem;
a.button { a.button {
height: @layout-header-height;
min-width: 3.5rem;
max-width: 6rem;
padding: .45rem;
text-align: center;
text-overflow: ellipsis;
overflow-x: hidden;
line-height: 1.5;
&:before {
margin: 0;
line-height: 1.75;
}
&:not(.disabled):focus, &:not(.disabled):focus,
&:not(.disabled):hover { &:not(.disabled):hover {
background-color: @color-toolbar-button-background-hover; background-color: @color-toolbar-button-background-hover;
outline: 0;
} }
} }
a span.inner {
font-size: 90%;
font-weight: normal;
}
&.listing li { &.listing li {
display: inline-block; display: inline-block;
border: 0; border: 0;
@ -532,42 +559,31 @@
} }
} }
.footer.toolbar {
a.button:before {
height: 1.75rem;
float: none;
display: block;
width: auto;
}
}
#layout .footer span.inner {
display: inline !important;
}
.toolbar.content-frame-navigation { .toolbar.content-frame-navigation {
display: none !important; display: none !important;
} }
#layout > .content > .header > .toolbar {
text-align: center;
}
} }
@media screen and (max-width: @screen-width-small) { @media screen and (max-width: @screen-width-small) {
.toolbar { body > #layout > div > .toolbar.footer {
a.button { justify-content: space-around;
padding: 0 .5em;
& > * {
flex-grow: 1;
} }
a.button.texticon { .listselectors {
&:before { display: flex;
display: none; justify-content: space-around;
} flex-wrap: nowrap;
span.inner { & > * {
display: inline !important; flex-grow: 1;
} }
} }
a.button {
max-width: initial
}
} }
} }

14
skins/elastic/templates/compose.html
Unescape Escape View File

@ -20,11 +20,11 @@
</div> </div>
<div class="footer toolbar" role="toolbar"> <div class="footer toolbar" role="toolbar">
<roundcube:button command="add-recipient" prop="to" type="link" title="to" <roundcube:button command="add-recipient" prop="to" type="link" title="to"
class="button addto texticon disabled" classAct="button addto texticon" innerClass="inner" content="To+" /> class="button addto disabled" classAct="button addto" innerClass="inner" content="To+" />
<roundcube:button command="add-recipient" prop="cc" type="link" title="cc" <roundcube:button command="add-recipient" prop="cc" type="link" title="cc"
class="button addcc texticon disabled" classAct="button addcc texticon" innerClass="inner" content="Cc+" /> class="button addcc disabled" classAct="button addcc" innerClass="inner" content="Cc+" />
<roundcube:button command="add-recipient" prop="bcc" type="link" title="bcc" <roundcube:button command="add-recipient" prop="bcc" type="link" title="bcc"
class="button addbcc texticon disabled" classAct="button addbcc texticon" innerClass="inner" content="Bcc+" /> class="button addbcc disabled" classAct="button addbcc" innerClass="inner" content="Bcc+" />
<roundcube:container name="compose-contacts-toolbar" id="compose-contacts-toolbar" /> <roundcube:container name="compose-contacts-toolbar" id="compose-contacts-toolbar" />
</div> </div>
</div> </div>
@ -224,10 +224,10 @@
<div id="headers-menu" class="popupmenu" data-popup-init="headersmenu"> <div id="headers-menu" class="popupmenu" data-popup-init="headersmenu">
<h3 id="aria-label-headersmenu" class="voice"><roundcube:label name="arialabelheadersmenu" /></h3> <h3 id="aria-label-headersmenu" class="voice"><roundcube:label name="arialabelheadersmenu" /></h3>
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-headersmenu"> <ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-headersmenu">
<li role="menuitem"><a data-target="cc" href="#" role="button" tabindex="-1"><roundcube:label name="cc" /></a></li> <li role="menuitem"><a data-target="cc" href="#" role="button" tabindex="-1" class="recipient"><roundcube:label name="cc" /></a></li>
<li role="menuitem"><a data-target="bcc" href="#" role="button" tabindex="-1"><roundcube:label name="bcc" /></a></li> <li role="menuitem"><a data-target="bcc" href="#" role="button" tabindex="-1" class="recipient"><roundcube:label name="bcc" /></a></li>
<li role="menuitem"><a data-target="replyto" href="#" role="button" tabindex="-1"><roundcube:label name="replyto" /></a></li> <li role="menuitem"><a data-target="replyto" href="#" role="button" tabindex="-1" class="recipient"><roundcube:label name="replyto" /></a></li>
<li role="menuitem"><a data-target="followupto" href="#" role="button" tabindex="-1"><roundcube:label name="followupto" /></a></li> <li role="menuitem"><a data-target="followupto" href="#" role="button" tabindex="-1" class="recipient"><roundcube:label name="followupto" /></a></li>
</ul> </ul>
</div> </div>

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

@ -3,6 +3,8 @@
<roundcube:add_label name="options" /> <roundcube:add_label name="options" />
<roundcube:add_label name="plaintoggle" /> <roundcube:add_label name="plaintoggle" />
<roundcube:add_label name="htmltoggle" /> <roundcube:add_label name="htmltoggle" />
<roundcube:add_label name="previous" />
<roundcube:add_label name="next" />
<roundcube:object name="doctype" value="html5" /> <roundcube:object name="doctype" value="html5" />
<roundcube:if condition="!env:framed || env:extwin" /> <roundcube:if condition="!env:framed || env:extwin" />
<html> <html>

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

@ -658,12 +658,13 @@ function rcube_elastic_ui()
} }
// TODO: Add "message X of Y" text between buttons? // TODO: Add "message X of Y" text between buttons?
if (!env.frame_nav) { if (!env.frame_nav) {
env.frame_nav = $('<div class="footer toolbar content-frame-navigation">') env.frame_nav = $('<div class="footer toolbar content-frame-navigation">')
.append($('<a class="button prev">')) .append($('<a class="button prev">')
.append($('<span class="inner"></span>').text(rcmail.gettext('previous'))))
.append($('<span>')) .append($('<span>'))
.append($('<a class="button next">')) .append($('<a class="button next">')
.append($('<span class="inner"></span>').text(rcmail.gettext('next'))))
.appendTo(layout.content); .appendTo(layout.content);
} }
@ -671,7 +672,7 @@ function rcube_elastic_ui()
frame = $('#' + rcmail.env.contentframe), frame = $('#' + rcmail.env.contentframe),
next_button = $('a.button.next', env.frame_nav).off('click').addClass('disabled'), next_button = $('a.button.next', env.frame_nav).off('click').addClass('disabled'),
prev_button = $('a.button.prev', env.frame_nav).off('click').addClass('disabled'), prev_button = $('a.button.prev', env.frame_nav).off('click').addClass('disabled'),
span = $('span', env.frame_nav).text(''); span = $(env.frame_nav).children('span').text('');
if ((next = list.get_next()) || rcmail.env.current_page < rcmail.env.pagecount) { if ((next = list.get_next()) || rcmail.env.current_page < rcmail.env.pagecount) {
found = true; found = true;
@ -783,7 +784,7 @@ function rcube_elastic_ui()
size = 'phone'; size = 'phone';
else if (width > 1200) else if (width > 1200)
size = 'large'; size = 'large';
else if (width >= 768) else if (width > 768)
size = 'normal'; size = 'normal';
else else
size = 'small'; size = 'small';

Write Preview
Loading…
Cancel
Save