[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;
-    flex-direction: column;
+    height: 100%;
     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,67 +3,58 @@
     <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>
-          <button wo-touch="showBCC = true;" ng-hide="showBCC">Bcc</button>
-        </div>
-        <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'">
-          </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)">
-          </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)">
-          </span>
-        </p>
-      </div><!--/.mail-addresses-->
-
-      <div class="subject-box">
-        <input class="input-text" ng-model="subject" spellcheck="true" tabindex="2" placeholder="Subject" ng-change="updatePreview()">
-        <input id="attachment-input" type="file" multiple attachment-input>
-        <button class="btn btn-attachment" data-icon="&#xe003;" ng-class="{'btn-primary': sendBtnSecure === false}" attachment-btn></button>
-      </div><!--/.subject-box-->
-
-      <div class="attachments-box" ng-show="attachments.length > 0">
-        <span ng-repeat="attachment in attachments" class="attachment">
-          <span data-icon="&#xe003;"></span>
-          {{attachment.filename}}
-          <span class="close" data-icon="&#xe000;" wo-touch="remove(attachment)"></span>
-        </span><!--/.attachment-->
-      </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>
-
-        <div class="encrypt-preview" ng-show="ciphertextPreview && sendBtnSecure">
-          <p>-----BEGIN ENCRYPTED PREVIEW-----<br>{{ciphertextPreview}}<br>-----END ENCRYPTED PREVIEW-----</p>
-        </div><!--/.encrypt-preview-->
-      </div><!--/.body-->
-
-      <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 class="mail-addresses">
+      <div class="mail-addresses-more">
+        <button wo-touch="showCC = true;" ng-hide="showCC">Cc</button>
+        <button wo-touch="showBCC = true;" ng-hide="showBCC">Bcc</button>
       </div>
-    </div><!--/.write-view-->
+      <p field="to">
+        <label>To:</label>
+        <span ng-repeat="recipient in to track by $index">
+          <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 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 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-->
+
+    <div class="subject-box">
+      <input class="input-text" ng-model="subject" spellcheck="true" tabindex="2" placeholder="Subject" ng-change="updatePreview()">
+      <input id="attachment-input" type="file" multiple attachment-input>
+      <button class="btn btn-attachment" data-icon="&#xe003;" ng-class="{'btn-primary': sendBtnSecure === false}" attachment-btn></button>
+    </div><!--/.subject-box-->
+
+    <div class="attachments-box" ng-show="attachments.length > 0">
+      <span ng-repeat="attachment in attachments" class="attachment">
+        <span data-icon="&#xe003;"></span>
+        {{attachment.filename}}
+        <span class="close" data-icon="&#xe000;" wo-touch="remove(attachment)"></span>
+      </span><!--/.attachment-->
+    </div><!--/.attachments-box-->
+
+    <div class="body" focus-child>
+      <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>
+      </div><!--/.encrypt-preview-->
+    </div><!--/.body-->
+
+    <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><!--/.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-->