mirror of
https://github.com/moparisthebest/mail
synced 2025-02-07 02:20:14 -05:00
refactor desktop layout to use modular views with one controller for each view
This commit is contained in:
Tankred Hase
parent
3f9c3f7e48
commit
f4f4ce394e
@ -10,9 +10,6 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" media="all" href="css/all.css" type="text/css">
|
||||
|
||||
<!--<link href="css/reset.css" rel="stylesheet">
|
||||
<link href="css/style.css" rel="stylesheet">-->
|
||||
|
||||
<!-- The Scripts -->
|
||||
<script src="lib/require.js"></script>
|
||||
<script src="require-config.js"></script>
|
||||
|
||||
@ -4,28 +4,22 @@ window.name = 'NG_DEFER_BOOTSTRAP!';
|
||||
require([
|
||||
'angular',
|
||||
'js/controller/login',
|
||||
'js/controller/message-list',
|
||||
'js/controller/mail-list',
|
||||
'js/controller/write',
|
||||
'js/controller/navigation',
|
||||
'angularRoute',
|
||||
'angularTouch'
|
||||
], function(angular, LoginCtrl, MessageListCtrl, WriteCtrl, NavigationCtrl) {
|
||||
], function(angular, LoginCtrl, MailListCtrl, WriteCtrl, NavigationCtrl) {
|
||||
'use strict';
|
||||
|
||||
var app = angular.module('mail', ['ngRoute', 'ngTouch', 'write']);
|
||||
|
||||
// set router paths
|
||||
app.config(function($routeProvider) {
|
||||
$routeProvider.when('/login', {
|
||||
templateUrl: 'tpl/login.html',
|
||||
controller: LoginCtrl
|
||||
});
|
||||
$routeProvider.when('/folders/:folder', {
|
||||
templateUrl: 'tpl/message-list-desktop.html',
|
||||
controller: MessageListCtrl
|
||||
});
|
||||
$routeProvider.when('/folders/:folder/messages/:messageId', {
|
||||
templateUrl: 'tpl/read.html',
|
||||
controller: MessageListCtrl
|
||||
});
|
||||
$routeProvider.when('/write/:replyToId', {
|
||||
templateUrl: 'tpl/write.html',
|
||||
controller: WriteCtrl
|
||||
@ -39,6 +33,10 @@ require([
|
||||
});
|
||||
});
|
||||
|
||||
// inject controllers from ng-included view templates
|
||||
app.controller('MailListCtrl', MailListCtrl);
|
||||
|
||||
// manually bootstrap angular due to require.js
|
||||
angular.element().ready(function() {
|
||||
angular.bootstrap(document, ['mail']);
|
||||
});
|
||||
|
||||
@ -6,7 +6,7 @@ define(function(require) {
|
||||
moment = require('moment'),
|
||||
emailDao;
|
||||
|
||||
var MessageListCtrl = function($scope, $routeParams) {
|
||||
var MailListCtrl = function($scope, $routeParams) {
|
||||
$scope.folder = $routeParams.folder;
|
||||
$scope.messageId = $routeParams.messageId;
|
||||
emailDao = appController._emailDao;
|
||||
@ -101,7 +101,7 @@ define(function(require) {
|
||||
}
|
||||
|
||||
function createDummyMails(callback) {
|
||||
var Email = function(unread, attachments) {
|
||||
var Email = function(unread, attachments, replied) {
|
||||
this.uid = '1';
|
||||
this.from = [{
|
||||
name: 'Whiteout Support',
|
||||
@ -112,6 +112,7 @@ define(function(require) {
|
||||
}]; // list of receivers
|
||||
this.attachments = (attachments) ? [true] : undefined;
|
||||
this.unread = unread;
|
||||
this.replied = replied;
|
||||
this.displayDate = '23.08.13';
|
||||
this.longDisplayDate = 'Wednesday, 23.08.2013 19:23';
|
||||
this.subject = "Welcome Max"; // Subject line
|
||||
@ -121,10 +122,10 @@ define(function(require) {
|
||||
"Best regards\nYour whiteout team"; // plaintext body
|
||||
};
|
||||
|
||||
var dummys = [new Email(true, true), new Email(true), new Email(false, true), new Email(false), new Email(false), new Email(false)];
|
||||
var dummys = [new Email(true, true), new Email(true), new Email(false, true, true), new Email(false), new Email(false), new Email(false)];
|
||||
|
||||
callback(dummys);
|
||||
}
|
||||
|
||||
return MessageListCtrl;
|
||||
return MailListCtrl;
|
||||
});
|
||||
@ -29,4 +29,8 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0 $padding-horizontal;
|
||||
}
|
||||
}
|
||||
182
src/styles.html
182
src/styles.html
@ -1,105 +1,105 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Styleguide for Whiteout Mail Client</title>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Styleguide for Whiteout Mail Client</title>
|
||||
|
||||
<link rel="stylesheet" href="css/all.css">
|
||||
<link rel="stylesheet" href="css/all.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Styleguide for Whiteout Mail Client</h1>
|
||||
<h1>Styleguide for Whiteout Mail Client</h1>
|
||||
|
||||
<h2>1) Buttons</h2>
|
||||
<h3>Regular Buttons</h3>
|
||||
<p>
|
||||
<button class="btn">Label</button>
|
||||
<a class="btn" href="#" data-icon="">Send securely and invite</a>
|
||||
<button class="btn" disabled>Disabled Button</button>
|
||||
<a class="btn" aria-disabled="true" data-icon-append="" href="#">Disabled Link</a>
|
||||
</p>
|
||||
<h3>Icon Buttons</h3>
|
||||
<p>
|
||||
<button class="btn-icon"></button>
|
||||
<button class="btn-icon"></button>
|
||||
<button class="btn-icon"></button>
|
||||
<button class="btn-icon" disabled></button>
|
||||
</p>
|
||||
<h2>1) Buttons</h2>
|
||||
<h3>Regular Buttons</h3>
|
||||
<p>
|
||||
<button class="btn">Label</button>
|
||||
<a class="btn" href="#" data-icon="">Send securely and invite</a>
|
||||
<button class="btn" disabled>Disabled Button</button>
|
||||
<a class="btn" aria-disabled="true" data-icon-append="" href="#">Disabled Link</a>
|
||||
</p>
|
||||
<h3>Icon Buttons</h3>
|
||||
<p>
|
||||
<button class="btn-icon"></button>
|
||||
<button class="btn-icon"></button>
|
||||
<button class="btn-icon"></button>
|
||||
<button class="btn-icon" disabled></button>
|
||||
</p>
|
||||
|
||||
<h2>2) Labels</h2>
|
||||
<p>
|
||||
<span class="label">Max Mustermann</span>
|
||||
<span class="label label-primary" data-icon-append="">Max Mustermann</span>
|
||||
<span class="label label-light">1</span>
|
||||
</p>
|
||||
<h2>2) Labels</h2>
|
||||
<p>
|
||||
<span class="label">Max Mustermann</span>
|
||||
<span class="label label-primary" data-icon-append="">Max Mustermann</span>
|
||||
<span class="label label-light">1</span>
|
||||
</p>
|
||||
|
||||
<h2>3) Mail List</h2>
|
||||
<ul class="mail-list">
|
||||
<li class="mail-list-active mail-list-attachment">
|
||||
<h3>welcome@whiteout.io</h3>
|
||||
<div class="head">
|
||||
<p class="subject">
|
||||
Welcome Nico
|
||||
</p>
|
||||
<time>
|
||||
Wednesday
|
||||
</time>
|
||||
</div>
|
||||
<p class="body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>welcome@whiteout.io</h3>
|
||||
<div class="head">
|
||||
<p class="subject">
|
||||
Welcome Nico
|
||||
</p>
|
||||
<time>
|
||||
Wednesday
|
||||
</time>
|
||||
</div>
|
||||
<p class="body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
|
||||
</p>
|
||||
</li>
|
||||
<li class="mail-list-attachment mail-list-unread">
|
||||
<h3>welcome@whiteout.io</h3>
|
||||
<div class="head">
|
||||
<p class="subject">
|
||||
Welcome Nico
|
||||
</p>
|
||||
<time>
|
||||
Wednesday
|
||||
</time>
|
||||
</div>
|
||||
<p class="body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
|
||||
</p>
|
||||
</li>
|
||||
<li class="mail-list-replied">
|
||||
<h3>welcome@whiteout.io</h3>
|
||||
<div class="head">
|
||||
<p class="subject">
|
||||
Welcome Nico
|
||||
</p>
|
||||
<time>
|
||||
Wednesday
|
||||
</time>
|
||||
</div>
|
||||
<p class="body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>3) Mail List</h2>
|
||||
<ul class="mail-list">
|
||||
<li class="mail-list-active mail-list-attachment">
|
||||
<h3>welcome@whiteout.io</h3>
|
||||
<div class="head">
|
||||
<p class="subject">
|
||||
Welcome Nico
|
||||
</p>
|
||||
<time>
|
||||
Wednesday
|
||||
</time>
|
||||
</div>
|
||||
<p class="body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>welcome@whiteout.io</h3>
|
||||
<div class="head">
|
||||
<p class="subject">
|
||||
Welcome Nico
|
||||
</p>
|
||||
<time>
|
||||
Wednesday
|
||||
</time>
|
||||
</div>
|
||||
<p class="body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
|
||||
</p>
|
||||
</li>
|
||||
<li class="mail-list-attachment mail-list-unread">
|
||||
<h3>welcome@whiteout.io</h3>
|
||||
<div class="head">
|
||||
<p class="subject">
|
||||
Welcome Nico
|
||||
</p>
|
||||
<time>
|
||||
Wednesday
|
||||
</time>
|
||||
</div>
|
||||
<p class="body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
|
||||
</p>
|
||||
</li>
|
||||
<li class="mail-list-replied">
|
||||
<h3>welcome@whiteout.io</h3>
|
||||
<div class="head">
|
||||
<p class="subject">
|
||||
Welcome Nico
|
||||
</p>
|
||||
<time>
|
||||
Wednesday
|
||||
</time>
|
||||
</div>
|
||||
<p class="body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,67 +1,16 @@
|
||||
<div class="nav-container nav-effect" ng-class="{'nav-menu-open': navOpen}">
|
||||
|
||||
<!-- main navigation -->
|
||||
<nav class="nav-menu nav-effect">
|
||||
<div class="content">
|
||||
<header>
|
||||
<h1>WHITEOUT<span>.IO</span></h1>
|
||||
</header>
|
||||
<ul class="nav-primary">
|
||||
<li>
|
||||
<a href="#">
|
||||
Inbox
|
||||
<span class="label-wrapper"><span class="label label-light">1000+</span></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sent</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Outbox</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Drafts
|
||||
<span class="label-wrapper"><span class="label label-light">2</span></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Trash
|
||||
<span class="label-wrapper"><span class="label label-light">100</span></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav-secondary">
|
||||
<li><a href="#">Account</a></li>
|
||||
<li><a href="#">About whiteout.io</a></li>
|
||||
<li><a href="#">Help</a></li>
|
||||
</ul>
|
||||
<footer>
|
||||
Last update: 12:22 PM
|
||||
</footer>
|
||||
</div>
|
||||
</nav><!--/.nav-menu-->
|
||||
<nav class="nav-menu nav-effect" ng-include="'tpl/navigation.html'"></nav>
|
||||
|
||||
<!-- content wrapper pushed right -->
|
||||
<div class="nav-pusher" ng-click="closeNav()">
|
||||
<section class="content main-content">
|
||||
|
||||
<!-- left column: containing list view and navigation header -->
|
||||
<div class="column view-mail-list">
|
||||
<!-- nav controll and section headline -->
|
||||
<header data-icon="" ng-click="openNav(); $event.stopPropagation()">
|
||||
<h2>Inbox</h2>
|
||||
</header>
|
||||
<div class="column view-mail-list" ng-include="'tpl/mail-list.html'" ng-controller="MailListCtrl"></div>
|
||||
|
||||
<div class="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
|
||||
</div>
|
||||
<div class="column" ng-include="'tpl/read.html'"></div>
|
||||
|
||||
</section>
|
||||
</div><!--/.nav-pusher-->
|
||||
|
||||
15
src/tpl/mail-list.html
Normal file
15
src/tpl/mail-list.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!-- nav controll and section headline -->
|
||||
<header data-icon="" ng-click="openNav(); $event.stopPropagation()">
|
||||
<h2>Inbox</h2>
|
||||
</header>
|
||||
|
||||
<ul class="mail-list">
|
||||
<li ng-class="{'mail-list-active': email === selected, 'mail-list-attachment': email.attachments !== undefined && email.attachments.length > 0, 'mail-list-unread': email.unread, 'mail-list-replied': email.replied}" ng-click="select(email)" ng-repeat="email in emails">
|
||||
<h3>{{email.from[0].name || email.from[0].address}}</h3>
|
||||
<div class="head">
|
||||
<p class="subject">{{email.subject}}</p>
|
||||
<time>{{email.displayDate}}</time>
|
||||
</div>
|
||||
<p class="body">{{email.body}}</p>
|
||||
</li>
|
||||
</ul><!--/.mail-list-->
|
||||
@ -1,7 +0,0 @@
|
||||
<div class="left-listing">
|
||||
<div ng-include="'tpl/message-list.html'"></div>
|
||||
</div>
|
||||
|
||||
<div class="right-reader">
|
||||
<div ng-include="'tpl/read.html'"></div>
|
||||
</div>
|
||||
@ -1,27 +0,0 @@
|
||||
<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>
|
||||
{{folder}}
|
||||
</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>
|
||||
<div ng-switch="email.attachments !== undefined && email.attachments.length > 0">
|
||||
<div ng-switch-when="true" class="icon-attachment"></div>
|
||||
</div>
|
||||
<p class="from">{{email.from[0].name || email.from[0].address}}</p>
|
||||
<p class="subject-line">
|
||||
<span class="subject">{{email.subject}}</span>
|
||||
<span class="sent-date">{{email.displayDate}}</span>
|
||||
</p>
|
||||
<p class="text-preview">{{email.body}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.message-list-->
|
||||
39
src/tpl/navigation.html
Normal file
39
src/tpl/navigation.html
Normal file
@ -0,0 +1,39 @@
|
||||
<div class="content">
|
||||
<header>
|
||||
<h1>WHITEOUT<span>.IO</span></h1>
|
||||
</header>
|
||||
<ul class="nav-primary">
|
||||
<li>
|
||||
<a href="#">
|
||||
Inbox
|
||||
<span class="label-wrapper"><span class="label label-light">1000+</span></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sent</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Outbox</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Drafts
|
||||
<span class="label-wrapper"><span class="label label-light">2</span></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Trash
|
||||
<span class="label-wrapper"><span class="label label-light">100</span></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav-secondary">
|
||||
<li><a href="#">Account</a></li>
|
||||
<li><a href="#">About whiteout.io</a></li>
|
||||
<li><a href="#">Help</a></li>
|
||||
</ul>
|
||||
<footer>
|
||||
Last update: 12:22 PM
|
||||
</footer>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user