refactor(mail):apply code review notes, fix compose area height(add scroll)

src/app/pages/mail/composeBox/compose.html

@@ -5,22 +5,22 @@
   <span class="header-controls">
     <i class="ion-minus-round"></i>
     <i class="ion-arrow-resize"></i>
-    <i ng-click="close()" class="ion-close-round"></i>
+    <i ng-click="$dismiss()" class="ion-close-round"></i>
   </span>
 </div>
 <div >
-  <input type="text" class="form-control compose-input"  placeholder="To" ng-model="to">
-  <input type="text" class="form-control compose-input"  placeholder="Subject" ng-model="subject">
+  <input type="text" class="form-control compose-input"  placeholder="To" ng-model="boxCtrl.to">
+  <input type="text" class="form-control compose-input"  placeholder="Subject" ng-model="boxCtrl.subject">
   <div class="compose-container">
     <text-angular-toolbar ta-toolbar-class="toolbarMain" name="toolbarMain" ta-toolbar="[['h1','h2','h3','bold','italics', 'underline', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull']]"></text-angular-toolbar>
-    <text-angular name="htmlcontent" ta-target-toolbars='toolbarMain,toolbarFooter' ng-model="text"></text-angular>
+    <text-angular name="htmlcontent" ta-target-toolbars='toolbarMain,toolbarFooter' ng-model="boxCtrl.text"></text-angular>
   </div>
 </div>
 <div class="compose-footer">
-  <button type="button" ng-click="close()" class="btn btn-send">Send</button>
+  <button type="button" ng-click="$dismiss()" class="btn btn-send">Send</button>
   <text-angular-toolbar ta-toolbar-class="toolbarFooter" name="toolbarFooter" ta-toolbar="[['insertLink', 'insertImage', 'html', 'quote','insertVideo']]"></text-angular-toolbar>
   <div class="footer-controls">
     <i class="footer-control-first compose-footer-icon ion-arrow-down-b"></i>
-    <i ng-click="close()" class="compose-footer-icon ion-android-delete"></i>
+    <i ng-click="$dismiss()" class="compose-footer-icon ion-android-delete"></i>
   </div>
 </div>

src/app/pages/mail/composeBox/composeBoxCtrl.js

@@ -9,14 +9,10 @@
     .controller('composeBoxCtrl', composeBoxCtrl);
 
   /** @ngInject */
-  function composeBoxCtrl($scope, $uibModalInstance, subject, to, text) {
-
-    $scope.subject = subject;
-    $scope.to = to;
-    $scope.text = text;
-    console.log(subject, to , text);
-    $scope.close = function () {
-      $uibModalInstance.dismiss('cancel');
-    };
+  function composeBoxCtrl(subject, to, text) {
+    var vm = this;
+    vm.subject = subject;
+    vm.to = to;
+    vm.text = text;
   }
 })();

src/app/pages/mail/composeBox/composeModal.js

@@ -10,12 +10,12 @@
 
   /** @ngInject */
   function composeModal($uibModal) {
-    return {
-      open : function(options){
+      this.open = function(options){
         return $uibModal.open({
           animation: false,
           templateUrl: 'app/pages/mail/composeBox/compose.html',
           controller: 'composeBoxCtrl',
+          controllerAs: 'boxCtrl',
           size: 'slim',
           resolve: {
             subject: function () {
@@ -30,7 +30,7 @@
           }
         });
       }
-    }
+
   }
 
 })();

src/app/pages/mail/detail/MailDetailCtrl.js

@@ -9,14 +9,10 @@
     .controller('MailDetailCtrl', MailDetailCtrl);
 
   /** @ngInject */
-  function MailDetailCtrl($state, $stateParams, mailMessages) {
+  function MailDetailCtrl($stateParams, mailMessages) {
     var vm = this;
     vm.mail = mailMessages.getMessageById($stateParams.id);
-    vm.back = function(){
-      $state.go('mail.label', {
-        label: $stateParams.label
-      })
-    }
+    vm.label = $stateParams.label;
   }
 
 })();

src/app/pages/mail/detail/mailDetail.html

@@ -1,7 +1,7 @@
 <div class="message-container">
   <div class="message">
     <div class="row">
-      <button ng-click="detailCtrl.back()" type="button" class="back-button btn btn-default btn-with-icon"><i
+      <button ui-sref="mail.label({label : detailCtrl.label})"  type="button" class="back-button btn btn-default btn-with-icon"><i
           class="ion-chevron-left"></i>Back
       </button>
     </div>
@@ -64,8 +64,8 @@
     </div>
     <div class="line" ng-show="detailCtrl.mail.attachment"></div>
     <div class="answer-container">
-      <button type="button" class="btn btn-with-icon" ng-click="showCompose(detailCtrl.mail.subject,detailCtrl.mail.email,'')"><i class="ion-reply"></i>Reply</button>
-      <button type="button" class="btn btn-with-icon" ng-click="showCompose(detailCtrl.mail.subject,'',detailCtrl.mail.body)"><i class="ion-forward"></i>Forward</button>
+      <button type="button" class="btn btn-with-icon" ng-click="tabCtrl.showCompose(detailCtrl.mail.subject,detailCtrl.mail.email,'')"><i class="ion-reply"></i>Reply</button>
+      <button type="button" class="btn btn-with-icon" ng-click="tabCtrl.showCompose(detailCtrl.mail.subject,'',detailCtrl.mail.body)"><i class="ion-forward"></i>Forward</button>
       <button type="button" class="btn btn-with-icon"><i class="ion-printer"></i>Print</button>
       <button type="button" class="btn btn-with-icon"><i class="ion-android-remove-circle"></i>Spam</button>
       <button type="button" class="btn btn-with-icon"><i class="ion-android-delete"></i>Delete</button>

src/sass/app/_email.scss

@@ -55,7 +55,6 @@
   }
 }
 
-
 .labels, .add-label-container {
   margin-top: 16px;
   margin-left: 22px;
@@ -114,7 +113,6 @@
   }
 }
 
-
 .message-container, .side-message-navigation, .mail-navigation-container {
   float: left;
   padding: 0 15px;
@@ -434,7 +432,6 @@
   margin-top: -7px;
 }
 
-
 @keyframes rotateReturnAnimation {
   0% {
     transform: rotate(0deg);
@@ -463,7 +460,6 @@
 
 }
 
-
 @media screen and (max-width: 1199px) {
   .name-h {
     display: inline;
@@ -549,6 +545,7 @@
     width: 50px;
   }
 }
+
 @media screen and (max-width: 470px) {
   .little-human .little-human-picture {
     display: none;
@@ -592,8 +589,6 @@
 
 }
 
-
-
 .compose-header {
   padding: 8px 3px 8px 10px;
   color: white;
@@ -615,14 +610,18 @@
   }
 }
 
+.compose-container .ta-scroll-window > .ta-bind {
+  height: 290px;
+  overflow-y: scroll;
+
+}
+
 .compose-input {
   border-left: 0;
   border-right: 0;
   border-top: 0;
 }
 
-
-
 .compose-footer {
   padding: 2px 4px;
   background-color: whitesmoke;
@@ -648,6 +647,7 @@
   font-size: 18px;
   margin-right: 5px;
   cursor: pointer;
+  color: $help-text;
   &:hover {
     color: $primary-light;
   }