mirror of
https://github.com/moparisthebest/mail
synced 2025-02-16 23:20:09 -05:00
open write view in lightbox instead of new chrome window
This commit is contained in:
Tankred Hase
parent
8211a78a78
commit
4e186d2881
@ -21,14 +21,6 @@ require([
|
||||
templateUrl: 'tpl/login.html',
|
||||
controller: LoginCtrl
|
||||
});
|
||||
$routeProvider.when('/write/:folder/:id', {
|
||||
templateUrl: 'tpl/write.html',
|
||||
controller: WriteCtrl
|
||||
});
|
||||
$routeProvider.when('/write', {
|
||||
templateUrl: 'tpl/write.html',
|
||||
controller: WriteCtrl
|
||||
});
|
||||
$routeProvider.when('/desktop', {
|
||||
templateUrl: 'tpl/desktop.html',
|
||||
controller: NavigationCtrl
|
||||
@ -40,6 +32,7 @@ require([
|
||||
|
||||
// inject controllers from ng-included view templates
|
||||
app.controller('ReadCtrl', ReadCtrl);
|
||||
app.controller('WriteCtrl', WriteCtrl);
|
||||
app.controller('MailListCtrl', MailListCtrl);
|
||||
|
||||
// manually bootstrap angular due to require.js
|
||||
|
||||
@ -12,6 +12,7 @@ define(function(require) {
|
||||
|
||||
var NavigationCtrl = function($scope) {
|
||||
$scope.navOpen = false;
|
||||
$scope.writerOpen = false;
|
||||
|
||||
emailDao = appController._emailDao;
|
||||
|
||||
@ -27,6 +28,19 @@ define(function(require) {
|
||||
$scope.navOpen = false;
|
||||
};
|
||||
|
||||
$scope.openWriter = function(replyTo) {
|
||||
if (replyTo) {
|
||||
$scope.writerTitle = 'Reply';
|
||||
} else {
|
||||
$scope.writerTitle = 'New email';
|
||||
}
|
||||
$scope.writerOpen = true;
|
||||
};
|
||||
|
||||
$scope.closeWriter = function() {
|
||||
$scope.writerOpen = false;
|
||||
};
|
||||
|
||||
$scope.openFolder = function(folder) {
|
||||
$scope.currentFolder = folder;
|
||||
$scope.closeNav();
|
||||
@ -75,23 +89,6 @@ define(function(require) {
|
||||
}
|
||||
};
|
||||
|
||||
$scope.write = function(replyTo) {
|
||||
var replyToPath = (replyTo) ? encodeURIComponent($scope.currentFolder.path) + '/' + replyTo.uid : '',
|
||||
url = 'chrome.html#/write/' + replyToPath;
|
||||
|
||||
if (window.chrome && chrome.app.window) {
|
||||
chrome.app.window.create(url, {
|
||||
'bounds': {
|
||||
'width': 720,
|
||||
'height': 640
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
window.open(url, 'Compose Message', 'toolbar=no,width=720,height=640,left=500,top=200,status=no,scrollbars=no,resize=no');
|
||||
};
|
||||
|
||||
initFolders(function(folders) {
|
||||
$scope.folders = folders;
|
||||
// select inbox as the current folder on init
|
||||
@ -110,6 +107,10 @@ define(function(require) {
|
||||
return;
|
||||
}
|
||||
|
||||
folders.forEach(function(f) {
|
||||
f.count = 0;
|
||||
});
|
||||
|
||||
callback(folders);
|
||||
$scope.$apply();
|
||||
});
|
||||
@ -118,20 +119,23 @@ define(function(require) {
|
||||
|
||||
callback([{
|
||||
type: 'Inbox',
|
||||
count: 3,
|
||||
count: 2,
|
||||
path: 'INBOX'
|
||||
}, {
|
||||
type: 'Sent',
|
||||
count: 0,
|
||||
path: 'SENT'
|
||||
}, {
|
||||
type: 'Outbox',
|
||||
count: 1,
|
||||
count: 0,
|
||||
path: 'OUTBOX'
|
||||
}, {
|
||||
type: 'Drafts',
|
||||
count: 0,
|
||||
path: 'DRAFTS'
|
||||
}, {
|
||||
type: 'Trash',
|
||||
count: 0,
|
||||
path: 'TRASH'
|
||||
}]);
|
||||
}
|
||||
@ -145,21 +149,28 @@ define(function(require) {
|
||||
ngModule.directive('keyShortcuts', function() {
|
||||
return function(scope, elm) {
|
||||
elm.bind('keydown', function(e) {
|
||||
if (e.keyCode === 78 && scope.$$childTail && scope.$$childTail.write) {
|
||||
if (e.keyCode === 78 && !scope.$$childTail.writerOpen) {
|
||||
// n -> new mail
|
||||
e.preventDefault();
|
||||
return scope.$$childTail.write();
|
||||
scope.$$childTail.openWriter();
|
||||
|
||||
} else if (e.keyCode === 82 && scope.$$childTail && scope.$$childTail.write && scope.$$childTail.selected) {
|
||||
} else if (e.keyCode === 82 && !scope.$$childTail.writerOpen && scope.$$childTail.selected) {
|
||||
// r -> reply
|
||||
e.preventDefault();
|
||||
return scope.$$childTail.write(scope.$$childTail.selected);
|
||||
scope.$$childTail.openWriter(scope.$$childTail.selected);
|
||||
|
||||
} else if (e.keyCode === 83 && scope.$$childTail && scope.$$childTail.synchronize) {
|
||||
} else if (e.keyCode === 27 && scope.$$childTail.writerOpen) {
|
||||
// escape -> close writer
|
||||
e.preventDefault();
|
||||
scope.$$childTail.closeWriter();
|
||||
|
||||
} else if (e.keyCode === 83 && !scope.$$childTail.writerOpen && scope.$$childTail.synchronize) {
|
||||
// s -> sync folder
|
||||
e.preventDefault();
|
||||
return scope.$$childTail.synchronize();
|
||||
scope.$$childTail.synchronize();
|
||||
}
|
||||
|
||||
scope.$apply();
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
@ -19,54 +19,7 @@ define(function(require) {
|
||||
// Init
|
||||
//
|
||||
|
||||
// start the main app controller
|
||||
appController.start(function(err) {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.chrome && chrome.identity) {
|
||||
init('passphrase', function() {
|
||||
emailDao = appController._emailDao;
|
||||
getReplyTo($routeParams.folder, $routeParams.id, function() {
|
||||
$scope.$apply();
|
||||
});
|
||||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
function init(passphrase, callback) {
|
||||
appController.fetchOAuthToken(passphrase, function(err) {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
function getReplyTo(folder, id, callback) {
|
||||
if (!folder || !id) {
|
||||
callback();
|
||||
}
|
||||
|
||||
emailDao.listMessages({
|
||||
folder: folder + '_' + id
|
||||
}, function(err, list) {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
|
||||
if (list.length > 0) {
|
||||
fillFields(list[0]);
|
||||
}
|
||||
callback();
|
||||
});
|
||||
}
|
||||
emailDao = appController._emailDao;
|
||||
|
||||
function fillFields(re) {
|
||||
var from, body, bodyRows;
|
||||
@ -101,13 +54,12 @@ define(function(require) {
|
||||
iv = util.random(128);
|
||||
|
||||
$scope.updatePreview = function() {
|
||||
var body = $scope.body;
|
||||
var body = $scope.$$childTail.body;
|
||||
// remove generated html from body
|
||||
body = parseBody(body);
|
||||
|
||||
// Although this does encrypt live using AES, this is just for show. The plaintext is encrypted seperately before sending the email.
|
||||
var plaintext = ($scope.subject) ? $scope.subject + body : body;
|
||||
$scope.ciphertextPreview = (plaintext) ? aes.encrypt(plaintext, key, iv) : '';
|
||||
$scope.ciphertextPreview = (body) ? aes.encrypt(body, key, iv) : '';
|
||||
};
|
||||
|
||||
$scope.sendEmail = function() {
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
}
|
||||
|
||||
.lightbox-body {
|
||||
height: 100%;
|
||||
padding: $lightbox-padding;
|
||||
background: #fff;
|
||||
header {
|
||||
@ -34,6 +35,7 @@
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: $color-grey-dark;
|
||||
outline: none;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
|
||||
@ -1,15 +1,12 @@
|
||||
.view-write {
|
||||
margin: 0px;
|
||||
padding: 12px;
|
||||
padding: 0px;
|
||||
color: $color-grey-dark;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: $font-size-bigger;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 20px;
|
||||
height: 100%;
|
||||
@include respond-to(desktop) {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
input {
|
||||
@ -22,6 +19,7 @@
|
||||
}
|
||||
|
||||
.headers {
|
||||
margin-top: 10px;
|
||||
span {
|
||||
color: $color-grey;
|
||||
}
|
||||
@ -81,7 +79,7 @@
|
||||
|
||||
.send-control {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
@ -19,4 +19,6 @@
|
||||
</div><!--/.nav-container-->
|
||||
|
||||
<!-- lightbox -->
|
||||
<div class="lightbox-overlay" ng-include="'tpl/lightbox.html'"></div>
|
||||
<div class="lightbox-overlay" ng-class="{'show': writerOpen}">
|
||||
<div class="lightbox lightbox-effect" ng-include="'tpl/write.html'" ng-controller="WriteCtrl"></div>
|
||||
</div><!--/.lightbox-overlay-->
|
||||
@ -1,13 +0,0 @@
|
||||
<div class="lightbox lightbox-effect">
|
||||
<div class="lightbox-body">
|
||||
<header>
|
||||
<!-- add lightbox title -->
|
||||
<h2>New email</h2>
|
||||
<button class="close" data-action="lightbox-close"></button>
|
||||
</header>
|
||||
<div class="content">
|
||||
<!-- add lightbox content here -->
|
||||
some content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="controls">
|
||||
<button ng-click="remove(selected)" class="btn-icon"></button>
|
||||
<button ng-click="write(selected)" class="btn-icon"></button>
|
||||
<button ng-click="write()" class="btn-icon"></button>
|
||||
<button ng-click="openWriter(selected)" class="btn-icon"></button>
|
||||
<button ng-click="openWriter()" class="btn-icon"></button>
|
||||
</div><!--/.controls-->
|
||||
|
||||
<div class="view-read">
|
||||
|
||||
@ -1,37 +1,45 @@
|
||||
<div class="view-write">
|
||||
<p class="title">{{title || 'New Mail'}}</p>
|
||||
<div class="lightbox-body">
|
||||
<header>
|
||||
<h2>{{writerTitle}}</h2>
|
||||
<button class="close" ng-click="closeWriter()" data-action="lightbox-close"></button>
|
||||
</header>
|
||||
<div class="content">
|
||||
|
||||
<div class="headers">
|
||||
<p>
|
||||
<span>To:</span>
|
||||
<input type="email" ng-model="to" class="address-input" tabindex="1" focus-me>
|
||||
</p>
|
||||
<p>
|
||||
<span>Cc:</span>
|
||||
<input type="email" ng-model="cc" class="address-input" tabindex="2" disabled>
|
||||
</p>
|
||||
</div><!--/.address-headers-->
|
||||
<div class="view-write">
|
||||
<div class="headers">
|
||||
<p>
|
||||
<span>To:</span>
|
||||
<input type="email" ng-model="to" class="address-input" tabindex="1" focus-me>
|
||||
</p>
|
||||
<p>
|
||||
<span>Cc:</span>
|
||||
<input type="email" ng-model="cc" class="address-input" tabindex="2" disabled>
|
||||
</p>
|
||||
</div><!--/.address-headers-->
|
||||
|
||||
<div class="subject-box">
|
||||
<div class="subject-line">
|
||||
<input ng-model="subject" class="subject" spellcheck="true" tabindex="3" placeholder="Subject" ng-change="updatePreview()">
|
||||
</div>
|
||||
<button class="btn-attachment">
|
||||
<div data-icon=""></div>
|
||||
</button>
|
||||
</div><!--/.subject-box-->
|
||||
<div class="subject-box">
|
||||
<div class="subject-line">
|
||||
<input ng-model="subject" class="subject" spellcheck="true" tabindex="3" placeholder="Subject" ng-change="updatePreview()">
|
||||
</div>
|
||||
<button class="btn-attachment">
|
||||
<div data-icon=""></div>
|
||||
</button>
|
||||
</div><!--/.subject-box-->
|
||||
|
||||
<div class="body">
|
||||
<p ng-model="body" contentEditable="true" ng-change="updatePreview()" tabindex="4"></p>
|
||||
<div class="body">
|
||||
<p ng-model="body" contentEditable="true" ng-change="updatePreview()" tabindex="4"></p>
|
||||
|
||||
<div class="encrypt-preview">
|
||||
<p>-----BEGIN ENCRYPTED PREVIEW-----<br>{{ciphertextPreview}}<br>-----END ENCRYPTED PREVIEW-----</p>
|
||||
<br>
|
||||
<p>{{signature}}</p>
|
||||
</div><!--/.encrypt-preview-->
|
||||
</div><!--/.body-->
|
||||
<div class="encrypt-preview">
|
||||
<p>-----BEGIN ENCRYPTED PREVIEW-----<br>{{ciphertextPreview}}<br>-----END ENCRYPTED PREVIEW-----</p>
|
||||
<br>
|
||||
<p>{{signature}}</p>
|
||||
</div><!--/.encrypt-preview-->
|
||||
</div><!--/.body-->
|
||||
|
||||
<div class="send-control">
|
||||
<button ng-click="sendEmail()" class="btn" ng-disabled="!to" tabindex="5">Send securely</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="send-control">
|
||||
<button ng-click="sendEmail()" class="btn" ng-disabled="!to" tabindex="5">Send securely</button>
|
||||
</div>
|
||||
</div><!--/.write-view-->
|
||||
|
||||
</div><!--/.content-->
|
||||
</div><!--/.lightbox-body-->
|
||||
Loading…
Reference in New Issue
Block a user