moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2025-01-11 13:38:02 -05:00
Code Issues Releases Wiki Activity

angular routing and views work, ni csp support yet

Browse Source
This commit is contained in:
Tankred Hase 2013-09-04 13:01:32 +02:00
parent 59e3ce46a3
commit 88357b9564
5 changed files with 95 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ui/css/style.scss
View File

@ -57,7 +57,7 @@ body {
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
width: 100%;
width: inherit;
}
@mixin marked {

84
src/ui/index.html
View File

@ -1,86 +1,24 @@
<!DOCTYPE html>
<html>
<html ng-app="mail">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Whiteout Mail</title>
<link href="css/reset.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- The Scripts -->
<script src="lib/angular.js"></script>
<script src="lib/angular-route.js"></script>
<script src="lib/angular-touch.js"></script>
<script src="js/message-list-ctrl.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="folder-name">
<p>
<span class="hamburger-btn">
<span class="blue-box blue-box-margin"></span>
<span class="blue-box blue-box-margin"></span>
<span class="blue-box blue-box-margin"></span>
</span>
Inbox
</p>
</div>
<div class="message-list">
<ul>
<li class="selected">
<div class="unread"></div>
<p class="from">Whiteout Support</p>
<p class="subject-line">
<span class="subject">Welcome Nico</span>
<span class="sent-date">7:23 PM</span>
</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
</li>
<li>
<div class="unread"></div>
<p class="from">Whiteout Support</p>
<p class="subject-line">
<span class="subject">Welcome Nico</span>
<span class="sent-date">7:23 PM</span>
</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
</li>
<li>
<div class="read"></div>
<p class="from">Whiteout Support</p>
<p class="subject-line">
<span class="subject">Welcome Nico</span>
<span class="sent-date">7:23 PM</span>
</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
</li>
<li>
<div class="read"></div>
<p class="from">Whiteout Support</p>
<p class="subject-line">
<span class="subject">Welcome Nico</span>
<span class="sent-date">7:23 PM</span>
</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
</li>
<li>
<div class="read"></div>
<p class="from">Whiteout Support</p>
<p class="subject-line">
<span class="subject">Welcome Nico</span>
<span class="sent-date">7:23 PM</span>
</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
</li>
<li>
<div class="read"></div>
<p class="from">Whiteout Support</p>
<p class="subject-line">
<span class="subject">Welcome Nico</span>
<span class="sent-date">7:23 PM</span>
</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
</li>
</ul>
</div><!--/.message-list-->
<!-- The Scripts -->
<script src="lib/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="js/message-list-view.js" type="text/javascript"></script>
<div ng-view></div>
</body>
</html>

8
src/ui/js/app.js Normal file
View File

@ -0,0 +1,8 @@
'use strict';
angular.module('mail', ['ngRoute']).config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'tpl/message-list.html',
controller: MessageListCtrl,
});
});

51
src/ui/js/message-list-ctrl.js Normal file
View File

@ -0,0 +1,51 @@
'use strict';
var loremText = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.";
var dummyMail1 = {
from: [{
name: 'Whiteout Support',
address: 'support@whiteout.io'
}], // sender address
to: [{
address: 'max.musterman@gmail.com'
}], // list of receivers
unread: true,
sentDate: '7:23 PM',
subject: "Welcome Max", // Subject line
body: loremText // plaintext body
};
var dummyMail2 = {
from: [{
name: 'Test User',
address: 'support@whiteout.io'
}], // sender address
to: [{
address: 'max.musterman@gmail.com'
}], // list of receivers
unread: true,
sentDate: '7:23 PM',
subject: "Welcome Max", // Subject line
body: loremText // plaintext body
};
var dummyMail3 = {
from: [{
name: 'Test User',
address: 'support@whiteout.io'
}], // sender address
to: [{
address: 'max.musterman@gmail.com'
}], // list of receivers
unread: false,
sentDate: '7:23 PM',
subject: "Welcome Max", // Subject line
body: loremText // plaintext body
};
function MessageListCtrl($scope) {
$scope.emails = [dummyMail1, dummyMail2, dummyMail3];
$scope.select = function(email) {
$scope.selected = email;
};
}

24
src/ui/tpl/message-list.html Normal file
View File

@ -0,0 +1,24 @@
<div class="folder-name">
<p>
<span class="hamburger-btn">
<span class="blue-box blue-box-margin"></span>
<span class="blue-box blue-box-margin"></span>
<span class="blue-box blue-box-margin"></span>
</span>
Inbox
</p>
</div><!--/.folder-name-->
<div class="message-list">
<ul>
<li ng-repeat="email in emails" ng-class="{selected: email === selected}" ng-click="select(email)">
<div ng-class="{unread: email.unread, read: !email.unread}"></div>
<p class="from">{{email.from[0].name}}</p>
<p class="subject-line">
<span class="subject">{{email.subject}}</span>
<span class="sent-date">{{email.sentDate}}</span>
</p>
<p class="text-preview">{{email.body}}</p>
</li>
</ul>
</div><!--/.message-list-->