mirror of https://github.com/moparisthebest/mail
angular routing and views work, ni csp support yet
This commit is contained in:
Tankred Hase
parent
59e3ce46a3
commit
88357b9564
|
|
@ -57,7 +57,7 @@ body {
|
|||
|
||||
/* Landscape phone to portrait tablet */
|
||||
@media (max-width: 767px) {
|
||||
width: 100%;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
@mixin marked {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('mail', ['ngRoute']).config(function($routeProvider) {
|
||||
$routeProvider.when('/', {
|
||||
templateUrl: 'tpl/message-list.html',
|
||||
controller: MessageListCtrl,
|
||||
});
|
||||
});
|
||||
|
|
@ -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;
|
||||
};
|
||||
}
|
||||
|
|
@ -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-->
|
||||
Loading…
Reference in New Issue