mirror of
https://github.com/moparisthebest/mail
synced 2024-12-23 15:58:49 -05:00
[WO-329] Use flexbox in read-view, refactor address-headers in write and read views
This commit is contained in:
Tankred Hase
parent
0b3f19a8ce
commit
c2ce4e73ef
@ -49,7 +49,7 @@ textarea {
|
||||
background: $color-grey-lighter;
|
||||
border: 3px solid transparent;
|
||||
background-clip: content-box;
|
||||
cursor: pointer;
|
||||
cursor: pointer !important;
|
||||
&:hover {
|
||||
background-color: $color-blue;
|
||||
}
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
@import "components/layout";
|
||||
@import "components/popover";
|
||||
@import "components/input";
|
||||
@import "components/mail-addresses";
|
||||
|
||||
// Views
|
||||
@import "views/shared";
|
||||
|
||||
17
src/sass/components/_mail-addresses.scss
Normal file
17
src/sass/components/_mail-addresses.scss
Normal file
@ -0,0 +1,17 @@
|
||||
.mail-addresses {
|
||||
p {
|
||||
margin: 0.4em 0 0.2em;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 0.2em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 2.75em;
|
||||
color: $color-grey;
|
||||
}
|
||||
}
|
||||
@ -1,19 +1,19 @@
|
||||
.view-read {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0px;
|
||||
padding: 10px 15px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: $color-grey-dark;
|
||||
|
||||
.headers {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1em;
|
||||
|
||||
p {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.subject {
|
||||
font-size: $font-size-bigger;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.date {
|
||||
@ -21,24 +21,31 @@
|
||||
font-size: $font-size-small;
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 1.5em;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.address {
|
||||
color: $color-grey;
|
||||
padding: 0.2em 0;
|
||||
|
||||
.mail-addresses {
|
||||
.label {
|
||||
margin-left: 0.3em;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.2em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
float: right;
|
||||
margin: 0 15px 10px;
|
||||
|
||||
button {
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attachments {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
width: inherit;
|
||||
border: 1px;
|
||||
@ -72,54 +79,50 @@
|
||||
}
|
||||
|
||||
.seperator-line {
|
||||
flex-shrink: 0;
|
||||
height: 1px;
|
||||
color: $color-grey-lighter;
|
||||
background-color: $color-grey-lighter;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
margin-top: 1.75em;
|
||||
cursor: text;
|
||||
padding-bottom: 250px;
|
||||
line-height: 1.5em;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
user-select: text;
|
||||
|
||||
.working {
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
width: 230px;
|
||||
display: table;
|
||||
|
||||
.container {
|
||||
display: table-cell;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
transform: translateY(-50%);
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
font-size: 2em;
|
||||
margin-right: 0.2em;
|
||||
vertical-align: middle;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
// todo: outsource component
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
animation: rotation .6s linear infinite;
|
||||
border-left: 5px solid $color-grey-light;
|
||||
border-right: 5px solid $color-grey-light;
|
||||
border-bottom: 5px solid $color-grey-light;
|
||||
border-top: 5px solid $color-grey;
|
||||
border-left: 0.17em solid $color-grey-light;
|
||||
border-right: 0.17em solid $color-grey-light;
|
||||
border-bottom: 0.17em solid $color-grey-light;
|
||||
border-top: 0.17em solid $color-grey;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding-left: 40px;
|
||||
line-height: 30px;
|
||||
strong {
|
||||
color: $color-grey-input;
|
||||
}
|
||||
font-size: 2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@ -137,6 +140,7 @@
|
||||
}
|
||||
|
||||
iframe {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -176,12 +180,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
float: right;
|
||||
margin: 10px 15px;
|
||||
|
||||
button {
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
@ -20,31 +20,12 @@
|
||||
border: 0!important;
|
||||
}
|
||||
|
||||
.headers {
|
||||
.mail-addresses {
|
||||
flex-shrink: 0;
|
||||
margin-top: 10px;
|
||||
|
||||
p {
|
||||
margin: 0.4em 0 0.2em;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 2em;
|
||||
color: $color-grey;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.headers-more {
|
||||
.mail-addresses-more {
|
||||
float: right;
|
||||
margin: 0.4em 0;
|
||||
|
||||
|
||||
@ -1,24 +1,29 @@
|
||||
<div class="view-read" ng-controller="ReadCtrl">
|
||||
<div class="headers">
|
||||
<div class="controls">
|
||||
<button ng-click="state.mailList.remove(state.mailList.selected)" class="btn-icon" title="Delete mail"></button>
|
||||
<button class="btn-icon" title="Reply to" reply-selection></button>
|
||||
<button ng-click="state.writer.write()" class="btn-icon" title="New mail"></button>
|
||||
</div><!--/.controls-->
|
||||
|
||||
<div class="view-read" ng-controller="ReadCtrl">
|
||||
<div class="headers">
|
||||
<p class="subject" ng-click="state.read.toggle(false)">{{(state.mailList.selected.subject) ? state.mailList.selected.subject : 'No subject'}}</p>
|
||||
<p class="date">{{state.mailList.selected.sentDate | date:'EEEE, MMM d, yyyy h:mm a'}}</p>
|
||||
<p class="address">
|
||||
From: <span ng-repeat="u in state.mailList.selected.from" class="label" ng-class="{'label-primary': u.secure === false, 'label-primary-click': u.secure === false}" data-icon-append="{{(u.secure === false) ? '' : ''}}" ng-mouseover="getKeyId(u.address)" ng-click="invite(u)" popover="#fingerprint-info">{{u.name || u.address}}</span>
|
||||
<div class="mail-addresses">
|
||||
<p>
|
||||
<label>From:</label>
|
||||
<span ng-repeat="u in state.mailList.selected.from" class="label" ng-class="{'label-primary': u.secure === false, 'label-primary-click': u.secure === false}" data-icon-append="{{(u.secure === false) ? '' : ''}}" ng-mouseover="getKeyId(u.address)" ng-click="invite(u)" popover="#fingerprint-info">{{u.name || u.address}}</span>
|
||||
</p>
|
||||
<p class="address">
|
||||
To: <span ng-repeat="u in state.mailList.selected.to" class="label" ng-class="{'label-primary': u.secure === false, 'label-primary-click': u.secure === false}" data-icon-append="{{(u.secure === false) ? '' : ''}}" ng-mouseover="getKeyId(u.address)" ng-click="invite(u)" popover="#fingerprint-info">{{u.name || u.address}}</span>
|
||||
<p>
|
||||
<label>To:</label>
|
||||
<span ng-repeat="u in state.mailList.selected.to" class="label" ng-class="{'label-primary': u.secure === false, 'label-primary-click': u.secure === false}" data-icon-append="{{(u.secure === false) ? '' : ''}}" ng-mouseover="getKeyId(u.address)" ng-click="invite(u)" popover="#fingerprint-info">{{u.name || u.address}}</span>
|
||||
</p>
|
||||
<div ng-switch="state.mailList.selected.cc && state.mailList.selected.cc.length > 0">
|
||||
<p class="address" ng-switch-when="true">
|
||||
Cc: <span ng-repeat="u in state.mailList.selected.cc" class="label" ng-class="{'label-primary': u.secure === false, 'label-primary-click': u.secure === false}" data-icon-append="{{(u.secure === false) ? '' : ''}}" ng-mouseover="getKeyId(u.address)" ng-click="invite(u)" popover="#fingerprint-info">{{u.name || u.address}}</span>
|
||||
<p ng-switch-when="true">
|
||||
<label>Cc:</label>
|
||||
<span ng-repeat="u in state.mailList.selected.cc" class="label" ng-class="{'label-primary': u.secure === false, 'label-primary-click': u.secure === false}" data-icon-append="{{(u.secure === false) ? '' : ''}}" ng-mouseover="getKeyId(u.address)" ng-click="invite(u)" popover="#fingerprint-info">{{u.name || u.address}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div><!--/.mail-addresses-->
|
||||
</div><!--/.headers-->
|
||||
|
||||
<div ng-switch="state.mailList.selected.attachments !== undefined && state.mailList.selected.attachments.length > 0">
|
||||
@ -44,13 +49,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="working" ng-switch-default>
|
||||
<div class="container">
|
||||
<div class="spinner"><div></div></div>
|
||||
<span ng-switch="state.mailList.selected.loadingBody === true || state.mailList.selected.body === undefined || state.mailList.selected.body === null">
|
||||
<h1 ng-switch-when="true">Loading...</h1>
|
||||
<h1 ng-switch-default>Decrypting...</h1>
|
||||
</span>
|
||||
</div><!--/.container-->
|
||||
<span class="spinner"></span>
|
||||
<strong ng-bind="(state.mailList.selected.loadingBody === true || state.mailList.selected.body === undefined || state.mailList.selected.body === null) ? 'Loading...' : 'Decrypting...'"></strong>
|
||||
</div>
|
||||
</div><!--/.body-->
|
||||
|
||||
|
||||
@ -6,30 +6,24 @@
|
||||
<div class="content">
|
||||
|
||||
<div class="view-write">
|
||||
<div class="headers">
|
||||
<div class="headers-more">
|
||||
<div class="mail-addresses">
|
||||
<div class="mail-addresses-more">
|
||||
<button ng-click="showCC = true;" ng-hide="showCC">Cc</button>
|
||||
<button ng-click="showBCC = true;" ng-hide="showBCC">Bcc</button>
|
||||
</div>
|
||||
<p field="to">
|
||||
<label>To:</label>
|
||||
<span ng-repeat="recipient in to track by $index">
|
||||
<input id="to{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(to, $index)" address-input="to" tabindex="1" ng-mouseover="getKeyId(recipient)" focus-me="state.writer.open && writerTitle !== 'Reply'">
|
||||
</span>
|
||||
<input ng-repeat="recipient in to track by $index" id="to{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(to, $index)" address-input="to" tabindex="1" ng-mouseover="getKeyId(recipient)" focus-me="state.writer.open && writerTitle !== 'Reply'">
|
||||
</p>
|
||||
<p field="cc" ng-show="showCC === true">
|
||||
<label>Cc:</label>
|
||||
<span ng-repeat="recipient in cc track by $index">
|
||||
<input id="cc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(cc, $index)" address-input="cc" tabindex="1" ng-mouseover="getKeyId(recipient)">
|
||||
</span>
|
||||
<input ng-repeat="recipient in cc track by $index" id="cc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(cc, $index)" address-input="cc" tabindex="1" ng-mouseover="getKeyId(recipient)">
|
||||
</p>
|
||||
<p field="bcc" ng-show="showBCC === true">
|
||||
<label>Bcc:</label>
|
||||
<span ng-repeat="recipient in bcc track by $index">
|
||||
<input id="bcc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(bcc, $index)" address-input="bcc" tabindex="1" ng-mouseover="getKeyId(recipient)">
|
||||
</span>
|
||||
<input ng-repeat="recipient in bcc track by $index" id="bcc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(bcc, $index)" address-input="bcc" tabindex="1" ng-mouseover="getKeyId(recipient)">
|
||||
</p>
|
||||
</div><!--/.headers-->
|
||||
</div><!--/.mail-addresses-->
|
||||
|
||||
<div class="subject-box">
|
||||
<div class="subject-line">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user