Added the support for different <body> classes per controller.

For messages and threads now the background is again white. Fixes e2email-org#10, but small changes are still required for the outline around active form elements.
koto · Sep 5, 2016 · 7da992d · 7da992d
1 parent 0ce7c67
commit 7da992d
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 18 deletions.
diff --git a/chrome/app.css b/chrome/app.css
@@ -193,10 +193,13 @@ div.big-icon > img {
   max-height: 500px;
   overflow: auto;
   background-color: white;
+  border: 1px solid #ccc;
+  border-top: none;
 }
 
 #textareaElement {
-  flex;flex-direction: column;
+  display: flex;
+  flex-direction: column;
   min-height: 250px;
   text-align: left;
   border: none;
@@ -223,3 +226,7 @@ div.big-icon > img {
   padding: 0;
   float: right;
 }
+
+body.onboard {
+  background-color: #eeeeee;
+}
diff --git a/chrome/app.js b/chrome/app.js
@@ -66,7 +66,8 @@ e2email.application.routeProvider = function($routeProvider) {
         pageTitle: 'E2EMail - Setup',
         templateUrl: 'pages/setup/setup.html',
         controller: 'SetupCtrl',
-        controllerAs: 'setupCtrl'
+        controllerAs: 'setupCtrl',
+        bodyClass: 'onboard'
       }).when(e2email.constants.Location.SETTINGS, {
         pageTitle: 'E2EMail - Account',
         templateUrl: 'pages/settings/settings.html',
@@ -76,22 +77,26 @@ e2email.application.routeProvider = function($routeProvider) {
         pageTitle: 'E2EMail - Welcome',
         templateUrl: 'pages/welcome/welcome.html',
         controller: 'WelcomeCtrl',
-        controllerAs: 'welcomeCtrl'
+        controllerAs: 'welcomeCtrl',
+        bodyClass: 'onboard'
       }).when(e2email.constants.Location.AUTHORIZATION, {
         pageTitle: 'E2EMail - Authorization',
         templateUrl: 'pages/authorization/authorization.html',
         controller: 'AuthorizationCtrl',
-        controllerAs: 'authorizationCtrl'
+        controllerAs: 'authorizationCtrl',
+        bodyClass: 'onboard'
       }).when(e2email.constants.Location.RESET, {
         pageTitle: 'E2EMail - Reset',
         templateUrl: 'pages/reset/reset.html',
         controller: 'ResetCtrl',
-        controllerAs: 'resetCtrl'
+        controllerAs: 'resetCtrl',
+        bodyClass: 'onboard'
       }).when(e2email.constants.Location.RECOVER, {
         pageTitle: 'E2EMail - Recover',
         templateUrl: 'pages/recover/recover.html',
         controller: 'RecoverCtrl',
-        controllerAs: 'recoverCtrl'
+        controllerAs: 'recoverCtrl',
+        bodyClass: 'onboard'
       }).when(e2email.constants.Location.SHOWSECRET, {
         pageTitle: 'E2EMail - Recovery code',
         templateUrl: 'pages/showsecret/showsecret.html',
@@ -101,12 +106,14 @@ e2email.application.routeProvider = function($routeProvider) {
         pageTitle: 'E2EMail - Introduction',
         templateUrl: 'pages/introduction/introduction.html',
         controller: 'IntroductionCtrl',
-        controllerAs: 'introductionCtrl'
+        controllerAs: 'introductionCtrl',
+        bodyClass: 'onboard'
       }).when(e2email.constants.Location.GETSTARTED, {
         pageTitle: 'E2EMail - Get Started',
         templateUrl: 'pages/getstarted/getstarted.html',
         controller: 'GetStartedCtrl',
-        controllerAs: 'getStartedCtrl'
+        controllerAs: 'getStartedCtrl',
+        bodyClass: 'onboard'
       }).when(e2email.constants.Location.THREADS, {
         pageTitle: 'E2EMail',
         templateUrl: 'pages/threads/threads.html',
@@ -187,5 +194,10 @@ e2email.application.module.run(
         if (goog.isDefAndNotNull($route.current.pageTitle)) {
           document.title = $route.current.pageTitle;
         }
+        if (goog.isDefAndNotNull($route.current.bodyClass)) {
+          $rootScope.bodyClass = $route.current.bodyClass;
+        } else {
+          $rootScope.bodyClass = '';
+        }
       });
     }]);
diff --git a/chrome/assets/css/bootstrap.css b/chrome/assets/css/bootstrap.css
@@ -309,7 +309,7 @@ body {
   font-size: 14px;
   line-height: 1.428571429;
   color: #333333;
-  background-color: #EEEEEE;
+  background-color: #ffffff;
 }
 
 input,

diff --git a/chrome/index.html b/chrome/index.html
@@ -6,8 +6,8 @@
 <link rel="stylesheet" media="all" href="assets/css/bootstrap.css">
 <link rel="stylesheet" media="all" href="assets/css/styles-bundle.css">
 </head>
-<body class="container">
-  <div ng-app="e2email.application" ng-csp class="row maincontent">
+<body ng-app="e2email.application" ng-csp ng-class="['container', $root.bodyClass]">
+  <div class="row maincontent">
 
     <div ng-view class="viewcontent col-xs-12">
 

diff --git a/chrome/pages/threads/threads.html b/chrome/pages/threads/threads.html
@@ -57,14 +57,16 @@
 
     <input tabindex="2" type="text" class="form-control ac-tabbable email-main-subject-input" placeholder="Subject" required="required" ng-hide="threadsCtrl.compose.missingRecipient" ng-model="threadsCtrl.compose.subject" ng-keypress="threadsCtrl.onSubjectKeyPress($event)"/>
     <div class="compose-content">
-    <div tabindex="3" id="textareaSpace">
-      <textarea id="textareaElement" class="form-control email-main-compose-textarea" placeholder="{{threadsCtrl.compose.validRecipient ? 'typeMessagePlaceholder' : 'invalidRecipientPlaceholder' | translate}}" rows="10" ng-disabled="!threadsCtrl.compose.validRecipient" ng-model="threadsCtrl.compose.message" ng-hide="threadsCtrl.compose.missingRecipient" required="required">
-      </textarea> </div>
-      <div id="attachmentRepeat">
-      <div ng-repeat="x in threadsCtrl.compose.attachments" class="single-attachment"><span id="attachName">{{ x.filename | limitTo: 20 }}{{x.filename.length > 20 ? '...' : ''}} </span> <span id="attachSize"> {{'(' + x.size + ')'}} </span> <span style="width:10%;">
-        <button ng-click="threadsCtrl.removeObj($index)" class="removeAttachment"> x </button> </span></div>
-      </div>
+      <div id="textareaSpace">
+        <textarea tabindex="3" id="textareaElement" class="form-control email-main-compose-textarea" placeholder="{{threadsCtrl.compose.validRecipient ? 'typeMessagePlaceholder' : 'invalidRecipientPlaceholder' | translate}}" rows="10" ng-disabled="!threadsCtrl.compose.validRecipient" ng-model="threadsCtrl.compose.message" ng-hide="threadsCtrl.compose.missingRecipient" required="required">
+        </textarea>
+        <div id="attachmentRepeat">
+          <div ng-repeat="x in threadsCtrl.compose.attachments" class="single-attachment"><span id="attachName">{{ x.filename | limitTo: 20 }}{{x.filename.length > 20 ? '...' : ''}} </span> <span id="attachSize"> {{'(' + x.size + ')'}} </span> <span style="width:10%;">
+            <button ng-click="threadsCtrl.removeObj($index)" class="removeAttachment"> x </button> </span>
+          </div>
+        </div>
       </div>
+    </div>
   <div class="row email-main-compose-form-button-row">
     <div class="col-xs-12">
       <button tabindex="4" type="submit" class="col-xs-3 btn btn-primary btn-focus sidebtn">{{'send' | translate}}</button>