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) {
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 {
width: @layout-menu-width/2;
}
@ -218,16 +201,11 @@ html.iframe body {
display: none;
}
body > #layout > div > .footer {
font-size: @layout-touch-header-font-size;
}
body > #layout > div.sidebar,
body > #layout > div.list {
max-width: none;
}
body > #layout > div > .footer,
body > #layout > div > .header {
a.button:before {
font-size: 1.75rem;

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

@ -32,7 +32,6 @@
.popover {
box-shadow: 3px 3px 5px @color-popover-shadow;
overflow: hidden;
padding: 0;
& > h3 {
@ -41,12 +40,21 @@
}
}
#rcmKSearchpane {
width: auto;
max-width: none;
overflow: hidden;
li {
padding-right: .5rem;
}
}
html.layout-small,
html.layout-phone {
.popover {
margin: 0 !important;
padding: 0;
left: initial !important;
right: 0;
bottom: 0;
width: 276px;
@ -89,6 +97,10 @@ html.layout-phone {
}
}
.popover:not(#rcmKSearchpane) {
left: initial !important;
}
.popover-overlay {
z-index: 1000;
opacity: .5;
@ -101,8 +113,8 @@ html.layout-phone {
#rcmKSearchpane {
bottom: auto;
box-shadow: none;
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;
background-color: @color-toolbarmenu-hover-background;
}
td {
overflow: hidden;
text-overflow: ellipsis;
}
}
ul.treelist li {

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

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

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

@ -20,11 +20,11 @@
</div>
<div class="footer toolbar" role="toolbar">
<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"
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"
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" />
</div>
</div>
@ -224,10 +224,10 @@
<div id="headers-menu" class="popupmenu" data-popup-init="headersmenu">
<h3 id="aria-label-headersmenu" class="voice"><roundcube:label name="arialabelheadersmenu" /></h3>
<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="bcc" href="#" role="button" tabindex="-1"><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="followupto" href="#" role="button" tabindex="-1"><roundcube:label name="followupto" /></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" class="recipient"><roundcube:label name="bcc" /></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" class="recipient"><roundcube:label name="followupto" /></a></li>
</ul>
</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="plaintoggle" />
<roundcube:add_label name="htmltoggle" />
<roundcube:add_label name="previous" />
<roundcube:add_label name="next" />
<roundcube:object name="doctype" value="html5" />
<roundcube:if condition="!env:framed || env:extwin" />
<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?
if (!env.frame_nav) {
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($('<a class="button next">'))
.append($('<a class="button next">')
.append($('<span class="inner"></span>').text(rcmail.gettext('next'))))
.appendTo(layout.content);
}
@ -671,7 +672,7 @@ function rcube_elastic_ui()
frame = $('#' + rcmail.env.contentframe),
next_button = $('a.button.next', 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) {
found = true;
@ -783,7 +784,7 @@ function rcube_elastic_ui()
size = 'phone';
else if (width > 1200)
size = 'large';
else if (width >= 768)
else if (width > 768)
size = 'normal';
else
size = 'small';

Write Preview
Loading…
Cancel
Save