Tighten up CSS

- Remove extra padding at top of Android bubbles, via sibling selector
- Don't include .attachments, .quote-wrapper, .content in bubble unless
  we actually need them. This allows for sibling selectors.
- This is a different technique for adding the ReactWrapperView for
  quotes - it is now appended to the DOM instead of attaching to
  something already in the DOM. This allows us to use .remove(), so it's
  a bit cleaner.
- Users of ReactWrapperView can now specify tagName and className

background.html

@@ -279,11 +279,16 @@
           </div>
           <div class='tail-wrapper {{ innerBubbleClasses }}'>
             <div class='inner-bubble'>
-              <div class='quote-wrapper'></div>
-              <div class='attachments'></div>
-              <div class='content' dir='auto'>
-                {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
-              </div>
+              {{ #hasAttachments }}
+                <div class='attachments'></div>
+              {{ /hasAttachments }}
+              {{ #hasBody }}
+                <div class='content' dir='auto'>
+                  {{ #message }}
+                    <div class='body'>{{ message }}</div>
+                  {{ /message }}
+                </div>
+                {{ /hasBody }}
             </div>
           </div>
           <div class='meta'>

js/views/message_view.js

@@ -316,7 +316,6 @@
     renderErrors() {
       const errors = this.model.get('errors');
 
-
       this.$('.error-icon-container').remove();
       if (this.errorIconView) {
         this.errorIconView.remove();
@@ -437,16 +436,18 @@
       };
 
       if (this.replyView) {
+        this.replyView.remove();
         this.replyView = null;
       } else if (contact) {
         this.listenTo(contact, 'change:color', this.renderQuote);
       }
 
       this.replyView = new Whisper.ReactWrapperView({
-        el: this.$('.quote-wrapper'),
+        className: 'quote-wrapper',
         Component: window.Signal.Components.Quote,
         props,
       });
+      this.$('.inner-bubble').prepend(this.replyView.el);
     },
     isImageWithoutCaption() {
       const attachments = this.model.get('attachments');
@@ -469,16 +470,23 @@
     render() {
       const contact = this.model.isIncoming() ? this.model.getContact() : null;
       const errors = this.model.get('errors');
+      const attachments = this.model.get('attachments');
+
       const hasErrors = errors && errors.length > 0;
+      const hasAttachments = attachments && attachments.length > 0;
+      const message = this.model.get('body');
+      const hasBody = message || (this.model.isIncoming() && hasErrors);
 
       this.$el.html(Mustache.render(_.result(this, 'template', ''), {
-        message: this.model.get('body'),
+        message,
+        hasBody,
         timestamp: this.model.get('sent_at'),
         sender: (contact && contact.getTitle()) || '',
         avatar: (contact && contact.getAvatar()),
         profileName: (contact && contact.getProfileName()),
         innerBubbleClasses: this.isImageWithoutCaption() ? '' : 'with-tail',
         hoverIcon: !hasErrors,
+        hasAttachments,
       }, this.render_partials()));
       this.timeStampView.setElement(this.$('.timestamp'));
       this.timeStampView.update();

js/views/react_wrapper_view.js

@@ -17,6 +17,8 @@
       const { Component, props, onClose } = options;
       this.render();
 
+      this.tagName = options.tagName;
+      this.className = options.className;
       this.Component = Component;
       this.onClose = onClose;
 

stylesheets/_conversation.scss

@@ -622,7 +622,6 @@ span.status {
     }
 
     .body {
-      margin-top: 0.5em;
       white-space: pre-wrap;
 
       a {
@@ -630,6 +629,13 @@ span.status {
       }
     }
 
+    .attachments + .content {
+      margin-top: 0.5em;
+    }
+    .quote-wrapper + .content {
+      margin-top: 0.5em;
+    }
+
     p {
       margin: 0;
     }

stylesheets/_ios.scss

@@ -108,6 +108,10 @@ $ios-border-color: rgba(0,0,0,0.1);
 
   .message-container,
   .message-list {
+    .bubble .content {
+      margin-top: 0px;
+    }
+
     .quote {
       border-top-left-radius: 15px;
       border-top-right-radius: 15px;

test/index.html

@@ -214,11 +214,16 @@
           </div>
           <div class='tail-wrapper {{ innerBubbleClasses }}'>
             <div class='inner-bubble'>
-              <div class='quote-wrapper'></div>
-              <div class='attachments'></div>
-              <div class='content' dir='auto'>
-                {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
-              </div>
+              {{ #hasAttachments }}
+                <div class='attachments'></div>
+              {{ /hasAttachments }}
+              {{ #hasBody }}
+                <div class='content' dir='auto'>
+                  {{ #message }}
+                    <div class='body'>{{ message }}</div>
+                  {{ /message }}
+                </div>
+                {{ /hasBody }}
             </div>
           </div>
           <div class='meta'>

test/styleguide/legacy_templates.js

@@ -34,11 +34,16 @@ window.Whisper.View.Templates = {
           </div>
           <div class='tail-wrapper {{ innerBubbleClasses }}'>
             <div class='inner-bubble'>
-              <div class='quote-wrapper'></div>
-              <div class='attachments'></div>
-              <div class='content' dir='auto'>
-                {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
-              </div>
+              {{ #hasAttachments }}
+                <div class='attachments'></div>
+              {{ /hasAttachments }}
+              {{ #hasBody }}
+                <div class='content' dir='auto'>
+                  {{ #message }}
+                    <div class='body'>{{ message }}</div>
+                  {{ /message }}
+                </div>
+                {{ /hasBody }}
             </div>
           </div>
           <div class='meta'>

ts/components/conversation/Message.tsx

@@ -15,7 +15,6 @@ export class Message extends React.Component<{}, {}> {
           <div className="sender" dir="auto" />
           <div className="tail-wrapper with-tail">
             <div className="inner-bubble">
-              <div className="attachments" />
               <p className="content" dir="auto">
                 <span className="body">
                   Hi there. How are you doing? Feeling pretty good? Awesome.