create dialog and start cleanup of controller code using scope chain

src/js/app-controller.js

@@ -40,11 +40,17 @@ define(function(require) {
         }
     };
 
-    self.checkForUpdate = function() {
+    self.checkForUpdate = function(callback) {
-        // check for update and restart app automatically
+        if (!chrome || !chrome.runtime || !chrome.runtime.onUpdateAvailable) {
+            return;
+        }
+
+        // check for update and restart on confirmation
         chrome.runtime.onUpdateAvailable.addListener(function(details) {
-            console.log("Updating to version " + details.version);
+            callback(function() {
-            chrome.runtime.reload();
+                console.log("Updating to version " + details.version);
+                chrome.runtime.reload();
+            });
         });
         chrome.runtime.requestUpdateCheck(function(status) {
             if (status === "update_found") {

src/js/app.js

@@ -3,6 +3,7 @@ window.name = 'NG_DEFER_BOOTSTRAP!';
 
 require([
     'angular',
+    'js/controller/dialog',
     'js/controller/account',
     'js/controller/login',
     'js/controller/login-initial',
@@ -14,7 +15,7 @@ require([
     'js/controller/navigation',
     'angularRoute',
     'angularTouch'
-], function(angular, AccountCtrl, LoginCtrl, LoginInitialCtrl, LoginNewDeviceCtrl, LoginExistingCtrl, MailListCtrl, ReadCtrl, WriteCtrl, NavigationCtrl) {
+], function(angular, DialogCtrl, AccountCtrl, LoginCtrl, LoginInitialCtrl, LoginNewDeviceCtrl, LoginExistingCtrl, MailListCtrl, ReadCtrl, WriteCtrl, NavigationCtrl) {
     'use strict';
 
     var app = angular.module('mail', ['ngRoute', 'ngTouch', 'navigation', 'mail-list', 'write', 'read', 'login-new-device']);
@@ -51,6 +52,7 @@ require([
     app.controller('WriteCtrl', WriteCtrl);
     app.controller('MailListCtrl', MailListCtrl);
     app.controller('AccountCtrl', AccountCtrl);
+    app.controller('DialogCtrl', DialogCtrl);
 
     // manually bootstrap angular due to require.js
     angular.element().ready(function() {

src/js/controller/dialog.js

@@ -0,0 +1,16 @@
+define(function() {
+    'use strict';
+
+    var DialogCtrl = function($scope) {
+        $scope.confirm = function(ok) {
+            $scope.state.dialog.open = false;
+
+            if ($scope.state.dialog.callback) {
+                $scope.state.dialog.callback(ok);
+            }
+            $scope.state.dialog.callback = undefined;
+        };
+    };
+
+    return DialogCtrl;
+});

src/js/controller/login.js

@@ -16,8 +16,6 @@ define(function(require) {
                 return;
             }
 
-            // check for app update
-            appController.checkForUpdate();
             // login to imap
             initializeUser();
         });

src/js/controller/mail-list.js

@@ -145,7 +145,7 @@ define(function(require) {
         function syncImapFolder(options, callback) {
             emailDao.unreadMessages(getFolder().path, function(err, unreadCount) {
                 if (err) {
-                    console.log(err);
+                    $scope.onError(err);
                     updateStatus('Error on sync!');
                     $scope.$apply();
                     return;
@@ -156,7 +156,7 @@ define(function(require) {
 
                 emailDao.imapSync(options, function(err) {
                     if (err) {
-                        console.log(err);
+                        $scope.onError(err);
                         updateStatus('Error on sync!');
                         $scope.$apply();
                         return;
@@ -171,7 +171,7 @@ define(function(require) {
             firstSelect = true;
             emailDao.listMessages(options, function(err, emails) {
                 if (err) {
-                    console.log(err);
+                    $scope.onError(err);
                     updateStatus('Error listing cache!');
                     $scope.$apply();
                     return;
@@ -233,7 +233,7 @@ define(function(require) {
                 uid: email.uid
             }, function(err) {
                 if (err) {
-                    console.log(err);
+                    $scope.onError(err);
                     updateStatus('Error marking read!');
                     $scope.$apply();
                     return;

src/js/controller/navigation.js

@@ -13,6 +13,7 @@ define(function(require) {
     //
 
     var NavigationCtrl = function($scope) {
+        $scope.$root.state = {};
         $scope.navOpen = false;
         $scope.writerOpen = false;
         $scope.accountOpen = false;
@@ -23,11 +24,20 @@ define(function(require) {
         // scope functions
         //
 
-        $scope.openNav = function() {
+        $scope.$root.onError = function(options) {
-            $scope.navOpen = true;
+            console.error(options);
+            $scope.state.dialog = {
+                open: true,
+                title: options.title || 'Error',
+                message: options.message || options.errMsg
+            };
         };
-        $scope.closeNav = function() {
+
-            $scope.navOpen = false;
+        $scope.state.nav = {
+            open: false,
+            toggle: function(to) {
+                this.open = to;
+            }
         };
 
         $scope.openWriter = function(replyTo) {
@@ -40,7 +50,7 @@ define(function(require) {
 
         $scope.openFolder = function(folder) {
             $scope.currentFolder = folder;
-            $scope.closeNav();
+            $scope.state.nav.toggle(false);
         };
 
         $scope.openAccount = function() {
@@ -188,6 +198,22 @@ define(function(require) {
         // Start
         //
 
+        function onUpdateAvailable(doUpdate) {
+            $scope.state.dialog = {
+                open: true,
+                title: 'Update available',
+                message: 'Would you like to update the application now?',
+                callback: function(confirm) {
+                    if (confirm) {
+                        doUpdate();
+                    }
+                }
+            };
+        }
+        // check for app update
+        appController.checkForUpdate(onUpdateAvailable);
+
+        // init folders
         initFolders(function(folders) {
             $scope.folders = folders;
             // select inbox as the current folder on init

src/sass/all.scss

@@ -21,6 +21,7 @@
 // Views
 @import "views/shared";
 @import "views/account";
+@import "views/dialog";
 @import "views/navigation";
 @import "views/mail-list";
 @import "views/read";

src/sass/views/_dialog.scss

@@ -0,0 +1,29 @@
+.view-dialog {
+    padding: 0px;
+    color: $color-grey-dark;    
+    max-width: 350px;
+    height: auto;
+    top: 30%;
+
+    @include respond-to(mobile) {
+        top: 0;
+        max-width: 100%;
+    }
+
+    p {
+        text-align: center;
+        max-width: 80%;
+        margin: 50px auto 90px auto;
+    }
+
+    .control {
+        position: absolute;
+        bottom: 15px;
+        right: 15px;
+
+        button {
+            width: 100px;
+            border: 0!important;
+        }
+    }
+}

src/tpl/desktop.html

@@ -1,10 +1,10 @@
-<div class="nav-container nav-effect" ng-class="{'nav-menu-open': navOpen}">
+<div class="nav-container nav-effect" ng-class="{'nav-menu-open': state.nav.open}">
 
   <!-- main navigation -->
   <nav class="nav-menu nav-effect" ng-include="'tpl/navigation.html'"></nav>
 
   <!-- content wrapper pushed right -->
-  <div class="nav-pusher" ng-click="closeNav()">
+  <div class="nav-pusher" ng-click="state.nav.toggle(false)">
     <section class="content main-content" ng-class="{'shift-right': readingMode}">
 
       <!-- left column: containing list view and navigation header -->
@@ -25,4 +25,7 @@
 <div class="lightbox-overlay" ng-class="{'show': accountOpen}">
   <div class="lightbox lightbox-effect" ng-include="'tpl/account.html'"></div>
 </div>
+<div class="lightbox-overlay" ng-class="{'show': state.dialog.open}">
+  <div class="lightbox lightbox-effect view-dialog" ng-include="'tpl/dialog.html'"></div>
+</div>
 <!--/.lightbox-overlay-->

src/tpl/dialog.html

@@ -0,0 +1,13 @@
+<div class="lightbox-body" ng-controller="DialogCtrl">
+  <header>
+    <h2>{{state.dialog.title}}</h2>
+    <button class="close" ng-click="confirm(false)" data-action="lightbox-close">&#xe007;</button>
+  </header>
+
+  <div class="content">
+    <p>{{state.dialog.message}}</p>
+    <div class="control">
+      <button ng-click="confirm(true)" class="btn">Ok</button>
+    </div>
+  </div><!-- /.content -->
+</div><!-- /.lightbox-body -->

src/tpl/mail-list.html

@@ -1,6 +1,6 @@
 <div class="view-mail-list">
   <!-- nav controll and section headline -->
-  <header data-icon="&#xe004;" ng-click="openNav(); $event.stopPropagation()">
+  <header data-icon="&#xe004;" ng-click="state.nav.toggle(true); $event.stopPropagation()">
     <h2>{{currentFolder.type}}</h2>
   </header>