moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-12-23 07:48:48 -05:00
Code Issues Releases Wiki Activity

[WO-329] Use flexbox in read-view, refactor address-headers in write and read views

Browse Source
This commit is contained in:
Tankred Hase 2014-04-22 19:39:29 +02:00
parent 0b3f19a8ce
commit c2ce4e73ef
7 changed files with 99 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/sass/_scaffolding.scss
View File

@ -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;
}

1
src/sass/all.scss
View File

@ -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
View 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;
}
}

103
src/sass/views/_read.scss
View File

@ -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;
cursor: pointer;
}
&: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;
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
vertical-align: middle;
text-align: center;
.container {
display: table-cell;
.spinner {
font-size: 2em;
margin-right: 0.2em;
vertical-align: middle;
.spinner {
position: relative;
// todo: outsource component
display: inline-block;
height: 1em;
width: 1em;
animation: rotation .6s linear infinite;
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%;
}
div {
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 30px;
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-radius: 100%;
}
}
h1 {
margin: 0;
padding-left: 40px;
line-height: 30px;
color: $color-grey-input;
}
strong {
color: $color-grey-input;
font-size: 2em;
vertical-align: middle;
}
}
@ -137,6 +140,7 @@
}
iframe {
flex-grow: 1;
width: 100%;
}
@ -175,13 +179,4 @@
}
}
}
.controls {
float: right;
margin: 10px 15px;
button {
margin-left: 7px;
}
}

23
src/sass/views/_write.scss
View File

@ -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;

46
src/tpl/read.html
View File

@ -1,24 +1,29 @@
<div class="controls">
<button ng-click="state.mailList.remove(state.mailList.selected)" class="btn-icon" title="Delete mail">&#xe005;</button>
<button class="btn-icon" title="Reply to" reply-selection>&#xe002;</button>
<button ng-click="state.writer.write()" class="btn-icon" title="New mail">&#xe006;</button>
</div><!--/.controls-->
<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">&#xe005;</button>
<button class="btn-icon" title="Reply to" reply-selection>&#xe002;</button>
<button ng-click="state.writer.write()" class="btn-icon" title="New mail">&#xe006;</button>
</div><!--/.controls-->
<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) ? '&#xe001;' : ''}}" 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) ? '&#xe001;' : ''}}" 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) ? '&#xe001;' : ''}}" 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) ? '&#xe001;' : ''}}" ng-mouseover="getKeyId(u.address)" ng-click="invite(u)" popover="#fingerprint-info">{{u.name || u.address}}</span>
</p>
</div>
<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) ? '&#xe001;' : ''}}" 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 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) ? '&#xe001;' : ''}}" 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-->

18
src/tpl/write.html
View File

@ -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">