refactor desktop layout to use modular views with one controller for each view

src/index.html

@@ -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>

src/js/app.js

@@ -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']);
     });

src/js/controller/mail-list.js

@@ -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;
 });

src/sass/views/_mail-list.scss

@@ -29,4 +29,8 @@
         }
 
     }
+
+    ul {
+        padding: 0 $padding-horizontal;
+    }
 }

src/tpl/desktop.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">
+  <nav class="nav-menu nav-effect" ng-include="'tpl/navigation.html'"></nav>
-    <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-->
 
   <!-- 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">
+      <div class="column view-mail-list" ng-include="'tpl/mail-list.html'" ng-controller="MailListCtrl"></div>
-        <!-- nav controll and section headline -->
-        <header data-icon="&#xe004;" ng-click="openNav(); $event.stopPropagation()">
-          <h2>Inbox</h2>
-        </header>
 
-        <div class="">
+      <div class="column" ng-include="'tpl/read.html'"></div>
-
-        </div>
-      </div>
-
-      <div class="column">
-
-      </div>
 
     </section>
   </div><!--/.nav-pusher-->

src/tpl/mail-list.html

@@ -0,0 +1,15 @@
+<!-- nav controll and section headline -->
+<header data-icon="&#xe004;" 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-->

src/tpl/message-list-desktop.html

@@ -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>

src/tpl/message-list.html

@@ -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-->

src/tpl/navigation.html

@@ -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>