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

add popover infos

Browse Source
This commit is contained in:
Tankred Hase 2013-12-04 14:47:04 +01:00
parent b4aa3a5493
commit 0eecbb0d20
12 changed files with 78 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/font/icons.eot
View File

Binary file not shown.

3
src/font/icons.svg
View File

@ -3,7 +3,7 @@
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font id="icons" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" d="" horiz-adv-x="0" />
@ -17,4 +17,5 @@
<glyph unicode="&#xe007;" d="M117.76 954.88l906.176-906.112-121.408-121.408-906.176 906.112zM-3.648 57.536l906.112 906.112 121.408-121.344-906.112-906.176z" />
<glyph unicode="&#xe008;" d="M0 960l1024-1024h-1024z" />
<glyph unicode="&#xe009;" d="M681.984 655.104v-119.744h-153.6v119.744c0 81.472-64.768 147.712-144.384 147.712s-144.384-66.24-144.384-147.712v-119.744h-153.6v119.744c-0.064 168.064 133.696 304.896 297.984 304.896 164.352 0 297.984-136.832 297.984-304.896zM0 476.096v-540.096h768v540.096h-768zM308.224-0.896l24.192 195.968 5.12 41.792c-21.632 15.232-35.712 40.64-35.712 69.44 0 11.136 2.112 21.696 5.888 31.296 12.096 30.848 41.664 52.736 76.288 52.736 34.624 0 64.192-21.888 76.288-52.736 3.776-9.664 5.888-20.224 5.888-31.296 0-28.8-14.208-54.272-35.84-69.312l5.184-41.856 24.064-195.968h-151.36z" horiz-adv-x="768" />
<glyph unicode="&#xe010;" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 32c-229.75 0-416 186.25-416 416s186.25 416 416 416 416-186.25 416-416-186.25-416-416-416zM448 704h128v-128h-128zM640 192h-256v64h64v192h-64v64h192v-256h64z" />
</font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
src/font/icons.ttf
View File

Binary file not shown.

BIN
src/font/icons.woff
View File

Binary file not shown.

1
src/js/controller/login-initial.js
View File

@ -21,7 +21,6 @@ define(function(require) {
};
$scope.state.ui = states.IDLE; // initial state
//
// scope functions
//

10
src/js/controller/popover.js
View File

@ -18,14 +18,8 @@ define(function(require) {
var ngModule = angular.module('popover', []);
ngModule.directive('popover', function() {
return function(scope, elm, attrs) {
var popover = angular.element(document.querySelector('.popover'));
var model = attrs.popover;
scope.$watch(model, function(value) {
// set popover title and content
scope.state.popover.title = attrs.popoverTitle;
scope.state.popover.content = value;
});
var selector = attrs.popover;
var popover = angular.element(document.querySelector(selector));
elm.on('mouseover', function() {
// set popover position

6
src/sass/components/_popover.scss
View File

@ -121,4 +121,10 @@
border-left-color: #ffffff;
bottom: -10px;
}
}
.popover-info {
cursor: pointer;
color: $color-blue;
margin-left: 5px;
}

11
src/tpl/desktop.html
View File

@ -27,13 +27,4 @@
</div>
<div class="lightbox-overlay" ng-class="{'show': state.dialog.open}">
<div class="lightbox lightbox-effect view-dialog" ng-include="'tpl/dialog.html'"></div>
</div>
<!-- popover -->
<div class="popover right" ng-controller="PopoverCtrl">
<div class="arrow"></div>
<div ng-switch="state.popover.title !== undefined">
<div ng-switch-when="true" class="popover-title"><b>{{state.popover.title}}</b></div>
</div>
<div class="popover-content">{{state.popover.content}}</div>
</div><!--/.popover-->
</div>

14
src/tpl/login-existing.html
View File

@ -11,6 +11,7 @@
<form>
<div>
<input type="password" ng-model="passphrase" ng-change="change()" ng-class="{error:incorrect}" placeholder="Passphrase" tabindex="1" focus-me="true">
<span class="popover-info" data-icon-append="&#xe010;" popover="#passphrase-info"></span>
</div>
<div>
<button type="submit" ng-click="confirmPassphrase()" class="btn" data-icon="&#xe009;" ng-disabled="!buttonEnabled" tabindex="2">Unlock</button>
@ -22,4 +23,15 @@
<!-- lightbox -->
<div class="lightbox-overlay" ng-class="{'show': state.dialog.open}">
<div class="lightbox lightbox-effect view-dialog" ng-include="'tpl/dialog.html'"></div>
</div>
</div>
<!-- popovers -->
<div id="passphrase-info" class="popover right" ng-controller="PopoverCtrl">
<div class="arrow"></div>
<div class="popover-title"><b>What is this?</b></div>
<div class="popover-content">
<p>The passphrase protects your encrypted mailbox.</p>
<p>There is no way to access your messages without your passphrase.</p>
<p>If you have forgotten your passphrase, please request an account reset by sending an email to <b>support@whiteout.io</b>. You will not be able to read previous messages after a reset.</p>
</div>
</div><!--/.popover-->

15
src/tpl/login-initial.html
View File

@ -12,6 +12,7 @@
<div>
<input type="password" ng-model="state.passphrase" placeholder="Enter passphrase" tabindex="1" focus-me="true">
<input type="password" ng-model="state.confirmation" ng-class="{error: state.confirmation !== state.passphrase}" placeholder="Confirm passphrase" tabindex="2">
<span class="popover-info" data-icon-append="&#xe010;" popover="#passphrase-info"></span>
</div>
<div>
<button type="submit" ng-click="confirmPassphrase()" class="btn" ng-disabled="!state.passphrase || state.passphrase !== state.confirmation" tabindex="3">Generate keypair</button>
@ -37,4 +38,16 @@
<!-- lightbox -->
<div class="lightbox-overlay" ng-class="{'show': state.dialog.open}">
<div class="lightbox lightbox-effect view-dialog" ng-include="'tpl/dialog.html'"></div>
</div>
</div>
<!-- popovers -->
<div id="passphrase-info" class="popover right" ng-controller="PopoverCtrl">
<div class="arrow"></div>
<div class="popover-title"><b>What is this?</b></div>
<div class="popover-content">
<p>A passphrase is like a password but longer.</p>
<p>If your device is lost or stolen the passphrase protects the contents of your mailbox.</p>
<p>The passphrase should consist of multiple words that are easy to remember.</p>
<p>You cannot change your passphrase at a later time.</p>
</div>
</div><!--/.popover-->

33
src/tpl/login-new-device.html
View File

@ -9,8 +9,14 @@
<p>You are already registered on another device. To access your emails on this device, please import your key file.</p>
<form>
<div><input type="file" file-reader tabindex="1"></div>
<div><input type="password" ng-model="passphrase" ng-class="{error:incorrect}" placeholder="Passphrase" tabindex="2" focus-me="true"></div>
<div>
<input type="file" file-reader tabindex="1">
<span class="popover-info" data-icon-append="&#xe010;" popover="#keyfile-info"></span>
</div>
<div>
<input type="password" ng-model="passphrase" ng-class="{error:incorrect}" placeholder="Passphrase" tabindex="2" focus-me="true">
<span class="popover-info" data-icon-append="&#xe010;" popover="#passphrase-info"></span>
</div>
<div><button type="submit" ng-click="confirmPassphrase()" class="btn" ng-disabled="!key" tabindex="3">Import</button>
</form>
</div>
@ -19,4 +25,25 @@
<!-- lightbox -->
<div class="lightbox-overlay" ng-class="{'show': state.dialog.open}">
<div class="lightbox lightbox-effect view-dialog" ng-include="'tpl/dialog.html'"></div>
</div>
</div>
<!-- popovers -->
<div id="keyfile-info" class="popover right" ng-controller="PopoverCtrl">
<div class="arrow"></div>
<div class="popover-title"><b>What is this?</b></div>
<div class="popover-content">
<p>The keyfile contains your PGP keys.</p>
<p>It can be exported on your first computer under "Account".</p>
<p>You can import it from a USB flash drive. Never send the keyfile to yourself via email.</p>
</div>
</div><!--/.popover-->
<div id="passphrase-info" class="popover right" ng-controller="PopoverCtrl">
<div class="arrow"></div>
<div class="popover-title"><b>What is this?</b></div>
<div class="popover-content">
<p>The passphrase protects your encrypted mailbox.</p>
<p>There is no way to access your messages without your passphrase.</p>
<p>If you have forgotten your passphrase, please request an account reset by sending an email to <b>support@whiteout.io</b>. You will not be able to read previous messages after a reset.</p>
</div>
</div><!--/.popover-->

13
src/tpl/read.html
View File

@ -9,10 +9,10 @@
<p class="subject" ng-click="state.read.toggle(false)">{{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 class="label" data-icon-append="&#xe009;" ng-repeat="f in state.mailList.selected.from" ng-mouseover="getFingerprint(f.address)" popover="fingerprint" popover-title="Fingerprint">{{f.name || f.address}}</span>
From: <span class="label" data-icon-append="&#xe009;" ng-repeat="f in state.mailList.selected.from" ng-mouseover="getFingerprint(f.address)" popover="#fingerprint-info">{{f.name || f.address}}</span>
</p>
<p class="address">
To: <span class="label" data-icon-append="&#xe009;" ng-repeat="t in state.mailList.selected.to" ng-mouseover="getFingerprint(t.address)" popover="fingerprint" popover-title="Fingerprint">{{t.address}}</span>
To: <span class="label" data-icon-append="&#xe009;" ng-repeat="t in state.mailList.selected.to" ng-mouseover="getFingerprint(t.address)" popover="#fingerprint-info">{{t.address}}</span>
</p>
<div ng-switch="state.mailList.selected.cc !== undefined">
<p class="address" ng-switch-when="true">
@ -29,4 +29,11 @@
{{line}}<br>
</div>
</div><!--/.body-->
</div><!--/.view-read-->
<!-- popovers -->
<div id="fingerprint-info" class="popover right" ng-controller="PopoverCtrl">
<div class="arrow"></div>
<div class="popover-title"><b>Fingerprint</b></div>
<div class="popover-content">{{fingerprint}}</div>
</div><!--/.popover-->
</div><!--/.view-read-->