moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-11-26 02:42:17 -05:00
Code Issues Releases Wiki Activity

Merge pull request #181 from whiteout-io/dev/WO-715

Browse Source 
Tablet mode: overlay action-bar over read-view
This commit is contained in:
Tankred Hase 2014-11-12 18:32:59 +01:00
commit 77fc111ee8
3 changed files with 70 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/sass/blocks/basics/_toolbar.scss
View File

@ -9,7 +9,7 @@
line-height: 24px;
height: 24px;
font-size: $font-size-bigger;
font-size: $font-size-base;
color: $color-text;
text-decoration: none;
& > svg {
@ -22,6 +22,10 @@
&.wo-touch-active {
background: $color-touch-active;
}
@include respond-to(md) {
font-size: $font-size-bigger;
}
}
&__actions {
display: flex;

13
src/sass/blocks/views/_read.scss
View File

@ -18,14 +18,8 @@
}
&__action-toolbar {
flex-shrink: 0;
order: 100; // stick to bottom on mobile
border-top: 1px solid $color-border-light;
@include respond-to(md) {
order: initial;
border-top: none;
border-bottom: 1px solid $color-border-light;
}
@include respond-to(lg) {
display: none;
}
}
@ -50,15 +44,16 @@
float: right;
margin-left: 1em;
.btn-icon-light {
margin-left: 1em;
margin-left: 1.4em;
}
@include respond-to(lg) {
@include respond-to(md) {
display: block;
}
}
&__subject {
font-weight: bold;
font-weight: normal;
color: $color-text;
font-size: $font-size-bigger;
margin: 0 0 0.2em;
&.wo-touch-active {
background: $color-touch-active;

69
src/tpl/read.html
View File

@ -13,52 +13,34 @@
</div>
</div><!--/read__folder-toolbar-->
<div class="read__action-toolbar" ng-controller="ActionBarCtrl">
<div class="toolbar">
<ul class="toolbar__actions">
<li>
<header class="read__header">
<div class="read__controls">
<span class="u-hidden-lg" ng-controller="ActionBarCtrl">
<button class="btn-icon-light" ng-hide="true" title="Remove from favorites">
<svg><use xlink:href="#icon-star_filled" /><title>Favorited</title></svg>
</button>
<button class="btn-icon-light" title="Add to favorites">
<svg><use xlink:href="#icon-star" /><title>Favorite</title></svg>
</button>
</li>
<li>
<button class="btn-icon-light u-visible-sm" title="Move mail" wo-dropdown="#read-dropdown-folder" wo-dropdown-position="center up">
<button class="btn-icon-light" title="Move mail" wo-dropdown="#read-dropdown-folder" wo-dropdown-position="center">
<svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg>
</button>
<button class="btn-icon-light u-hidden-sm" title="Move mail" wo-dropdown="#read-dropdown-folder" wo-dropdown-position="center">
<svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg>
</button>
</li>
<li>
<button wo-touch="deleteMessage(state.mailList.selected)" class="btn-icon-light" title="Delete mail">
<svg><use xlink:href="#icon-trash" /><title>Delete mail</title></svg>
</button>
</li>
<li>
<button class="btn-icon-light u-visible-sm" title="Reply to" wo-dropdown="#read-reply-selection" wo-dropdown-position="center up">
<button class="btn-icon-light" title="Reply to" wo-dropdown="#read-reply-selection" wo-dropdown-position="center">
<svg><use xlink:href="#icon-reply_light" /><title>Reply to</title></svg>
</button>
<button class="btn-icon-light u-hidden-sm" title="Reply to" wo-dropdown="#read-reply-selection" wo-dropdown-position="center">
<svg><use xlink:href="#icon-reply_light" /><title>Reply to</title></svg>
</button>
</li>
<li>
<button wo-touch="state.writer.write()" class="btn-icon-light" title="New mail">
<svg><use xlink:href="#icon-write" /><title>New mail</title></svg>
</button>
</li>
</ul>
</div>
</div><!--/read__action-toolbar-->
</span>
<header class="read__header">
<div class="read__controls">
<span class="u-visible-lg">
<button class="btn-icon-light" wo-touch="state.writer.write(state.mailList.selected)" title="Reply"><svg><use xlink:href="#icon-reply_light" /></svg></button>
<button class="btn-icon-light" wo-touch="state.writer.write(state.mailList.selected, true)" title="Reply All"><svg><use xlink:href="#icon-reply_all_light" /></svg></button>
<button class="btn-icon-light" wo-touch="state.writer.write(state.mailList.selected, null, true)" title="Forward"><svg><use xlink:href="#icon-forward_light" /></svg></button>
</span>
</div><!--/read__controls-->
<h2 class="read__subject" wo-touch="notStripped = !notStripped">
@ -144,6 +126,41 @@
</iframe>
</div><!--/read__body-->
<div class="read__action-toolbar" ng-controller="ActionBarCtrl">
<div class="toolbar">
<ul class="toolbar__actions">
<li>
<button class="btn-icon-light" ng-hide="true" title="Remove from favorites">
<svg><use xlink:href="#icon-star_filled" /><title>Favorited</title></svg>
</button>
<button class="btn-icon-light" title="Add to favorites">
<svg><use xlink:href="#icon-star" /><title>Favorite</title></svg>
</button>
</li>
<li>
<button class="btn-icon-light" title="Move mail" wo-dropdown="#read-dropdown-folder" wo-dropdown-position="center up">
<svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg>
</button>
</li>
<li>
<button wo-touch="deleteMessage(state.mailList.selected)" class="btn-icon-light" title="Delete mail">
<svg><use xlink:href="#icon-trash" /><title>Delete mail</title></svg>
</button>
</li>
<li>
<button class="btn-icon-light" title="Reply to" wo-dropdown="#read-reply-selection" wo-dropdown-position="center up">
<svg><use xlink:href="#icon-reply_light" /><title>Reply to</title></svg>
</button>
</li>
<li>
<button wo-touch="state.writer.write()" class="btn-icon-light" title="New mail">
<svg><use xlink:href="#icon-write" /><title>New mail</title></svg>
</button>
</li>
</ul>
</div>
</div><!--/read__action-toolbar-->
<!-- tooltips -->
<div id="fingerprint-info" class="tooltip">
<div class="tooltip__arrow"></div>