[WO-443] Fix writer bugs

* Fix writer body height in mobile mode
* User input type email in writer headers
* Only show and process encrypted preview for encrypted mails

src/js/controller/write.js

@@ -341,11 +341,15 @@ define(function(require) {
             iv = util.random(128);
 
         $scope.updatePreview = function() {
-            var body = $scope.body.trim();
+            if (!$scope.sendBtnSecure || !$scope.body.trim()) {
+                $scope.ciphertextPreview = undefined;
+                return;
+            }
 
             // Although this does encrypt live using AES, this is just for show. The plaintext is encrypted seperately before sending the email.
-            $scope.ciphertextPreview = (body) ? aes.encrypt(body, key, iv) : '';
+            $scope.ciphertextPreview = aes.encrypt($scope.body, key, iv);
         };
+        $scope.$watch('sendBtnSecure', $scope.updatePreview);
 
         $scope.sendToOutbox = function() {
             var email;
@@ -544,7 +548,7 @@ define(function(require) {
 
     ngModule.directive('field', function() {
         return {
-            //scope: true,   // optionally create a child scope
+            scope: true,
             link: function(scope, element, attrs) {
                 element.on('click', function(e) {
                     if (e.target.nodeName === 'INPUT') {
@@ -568,7 +572,7 @@ define(function(require) {
 
     ngModule.directive('addressInput', function() {
         return {
-            //scope: true,   // optionally create a child scope
+            scope: true,
             link: function(scope, element, attrs) {
                 // get prefix for id
                 var fieldName = attrs.addressInput;

src/sass/components/_lightbox.scss

@@ -23,12 +23,15 @@
         padding: $lightbox-padding;
         background: #fff;
         backface-visibility: hidden;
+        display: flex;
+        flex-direction: column;
 
         @include respond-to(desktop) {
             max-height: $lightbox-min-height;
         }
 
         header {
+            flex-shrink: 0;
             text-align: center;
             position: relative;
             button.close {
@@ -59,6 +62,7 @@
             }
         }
         .content {
+            flex-grow: 1;
             overflow: hidden;
         }
     }

src/sass/views/_write.scss

@@ -1,12 +1,12 @@
 .view-write {
-    display: flex;
+    height: 100%;
-    flex-direction: column;
     margin: 0px;
     padding: 0px;
     color: $color-grey-dark;
     overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
 
-    height: 100%;
     @include respond-to(desktop) {
         // this number depends on max-height set on .lightbox
         height: 590px; // magic number
@@ -132,8 +132,12 @@
     .body {
         flex-grow: 1;
         line-height: 1.5em;
-        overflow-y: scroll;
         user-select: text;
+        overflow-y: scroll;
+        // allow scrolling on iOS
+        -webkit-overflow-scrolling: touch;
+        // put layer on GPU
+        transform: translatez(0);
 
         *[contentEditable] {
             outline: 0px;

src/tpl/write.html

@@ -3,9 +3,8 @@
     <h2>{{writerTitle}}</h2>
     <button class="close" wo-touch="state.writer.close()" data-action="lightbox-close">&#xe007;</button>
   </header>
-  <div class="content">
+  <div class="content view-write">
 
-    <div class="view-write">
     <div class="mail-addresses">
       <div class="mail-addresses-more">
         <button wo-touch="showCC = true;" ng-hide="showCC">Cc</button>
@@ -14,19 +13,19 @@
       <p field="to">
         <label>To:</label>
         <span ng-repeat="recipient in to track by $index">
-            <input id="to{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(to, $index)" address-input="to" tabindex="1" ng-mouseover="getKeyId(recipient)" focus-me="$index === 0 && state.lightbox === 'write' && writerTitle !== 'Reply'">
+          <input type="email" id="to{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(to, $index)" address-input="to" tabindex="1" ng-mouseover="getKeyId(recipient)" focus-me="$index === 0 && state.lightbox === 'write' && writerTitle !== 'Reply'">
         </span>
       </p>
       <p field="cc" ng-show="showCC === true">
         <label>Cc:</label>
         <span ng-repeat="recipient in cc track by $index">
-            <input id="cc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(cc, $index)" address-input="cc" tabindex="1" ng-mouseover="getKeyId(recipient)">
+          <input type="email" id="cc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(cc, $index)" address-input="cc" tabindex="1" ng-mouseover="getKeyId(recipient)">
         </span>
       </p>
       <p field="bcc" ng-show="showBCC === true">
         <label>Bcc:</label>
         <span ng-repeat="recipient in bcc track by $index">
-            <input id="bcc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(bcc, $index)" address-input="bcc" tabindex="1" ng-mouseover="getKeyId(recipient)">
+          <input type="email" id="bcc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(bcc, $index)" address-input="bcc" tabindex="1" ng-mouseover="getKeyId(recipient)">
         </span>
       </p>
     </div><!--/.mail-addresses-->
@@ -46,7 +45,7 @@
     </div><!--/.attachments-box-->
 
     <div class="body" focus-child>
-        <p ng-model="body" contentEditable="true" spellcheck="false" ng-change="updatePreview()" tabindex="3" focus-me="state.lightbox === 'write' && writerTitle === 'Reply'"></p>
+      <p ng-model="body" contentEditable="true" ng-change="updatePreview()" tabindex="3" focus-me="state.lightbox === 'write' && writerTitle === 'Reply'"></p>
 
       <div class="encrypt-preview" ng-show="ciphertextPreview && sendBtnSecure">
         <p>-----BEGIN ENCRYPTED PREVIEW-----<br>{{ciphertextPreview}}<br>-----END ENCRYPTED PREVIEW-----</p>
@@ -56,14 +55,6 @@
     <div class="send-control">
       <button wo-touch="sendToOutbox()" class="btn" ng-class="{'btn-primary': sendBtnSecure === false}" ng-disabled="!okToSend" tabindex="4">{{sendBtnText || 'Send'}}</button>
     </div>
-    </div><!--/.write-view-->
 
   </div><!--/.content-->
-
-  <!-- popovers -->
-  <div id="fingerprint-writer" class="popover right" ng-controller="PopoverCtrl">
-    <div class="arrow"></div>
-    <div class="popover-title"><b>PGP key ID</b></div>
-    <div class="popover-content">{{keyId}}</div>
-  </div><!--/.popover-->
 </div><!--/.lightbox-body-->