mirror of
https://github.com/moparisthebest/mail
synced 2024-11-22 08:52:15 -05:00
Merge pull request #181 from whiteout-io/dev/WO-715
Tablet mode: overlay action-bar over read-view
This commit is contained in:
Tankred Hase
commit
77fc111ee8
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
<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">
|
||||
<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">
|
||||
<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-->
|
||||
|
||||
<header class="read__header">
|
||||
<div class="read__controls">
|
||||
<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 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>
|
||||
<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 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>
|
||||
<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 wo-touch="state.writer.write()" class="btn-icon-light" title="New mail">
|
||||
<svg><use xlink:href="#icon-write" /><title>New mail</title></svg>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user