mirror of https://github.com/moparisthebest/mail
Merge pull request #181 from whiteout-io/dev/WO-715
Tablet mode: overlay action-bar over read-view
This commit is contained in:
commit
77fc111ee8
|
@ -9,7 +9,7 @@
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
|
|
||||||
font-size: $font-size-bigger;
|
font-size: $font-size-base;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
& > svg {
|
& > svg {
|
||||||
|
@ -22,6 +22,10 @@
|
||||||
&.wo-touch-active {
|
&.wo-touch-active {
|
||||||
background: $color-touch-active;
|
background: $color-touch-active;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include respond-to(md) {
|
||||||
|
font-size: $font-size-bigger;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&__actions {
|
&__actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -18,14 +18,8 @@
|
||||||
}
|
}
|
||||||
&__action-toolbar {
|
&__action-toolbar {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
order: 100; // stick to bottom on mobile
|
|
||||||
border-top: 1px solid $color-border-light;
|
border-top: 1px solid $color-border-light;
|
||||||
@include respond-to(md) {
|
@include respond-to(md) {
|
||||||
order: initial;
|
|
||||||
border-top: none;
|
|
||||||
border-bottom: 1px solid $color-border-light;
|
|
||||||
}
|
|
||||||
@include respond-to(lg) {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -50,15 +44,16 @@
|
||||||
float: right;
|
float: right;
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
.btn-icon-light {
|
.btn-icon-light {
|
||||||
margin-left: 1em;
|
margin-left: 1.4em;
|
||||||
}
|
}
|
||||||
@include respond-to(lg) {
|
@include respond-to(md) {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__subject {
|
&__subject {
|
||||||
font-weight: bold;
|
font-weight: normal;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
|
font-size: $font-size-bigger;
|
||||||
margin: 0 0 0.2em;
|
margin: 0 0 0.2em;
|
||||||
&.wo-touch-active {
|
&.wo-touch-active {
|
||||||
background: $color-touch-active;
|
background: $color-touch-active;
|
||||||
|
|
|
@ -13,52 +13,34 @@
|
||||||
</div>
|
</div>
|
||||||
</div><!--/read__folder-toolbar-->
|
</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">
|
<header class="read__header">
|
||||||
<div class="read__controls">
|
<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>
|
<span class="u-hidden-lg" ng-controller="ActionBarCtrl">
|
||||||
<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" ng-hide="true" title="Remove from favorites">
|
||||||
<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>
|
<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-->
|
</div><!--/read__controls-->
|
||||||
|
|
||||||
<h2 class="read__subject" wo-touch="notStripped = !notStripped">
|
<h2 class="read__subject" wo-touch="notStripped = !notStripped">
|
||||||
|
@ -144,6 +126,41 @@
|
||||||
</iframe>
|
</iframe>
|
||||||
</div><!--/read__body-->
|
</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 -->
|
<!-- tooltips -->
|
||||||
<div id="fingerprint-info" class="tooltip">
|
<div id="fingerprint-info" class="tooltip">
|
||||||
<div class="tooltip__arrow"></div>
|
<div class="tooltip__arrow"></div>
|
||||||
|
|
Loading…
Reference in New Issue