diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 9aeb17a4b..3e56d985f 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -525,6 +525,7 @@ span.status {
.icon-container {
flex: initial;
+ min-width: 48px;
width: 48px;
height: 48px;
position: relative;
diff --git a/ts/components/conversation/Quote.md b/ts/components/conversation/Quote.md
index a15790f39..609e12cdb 100644
--- a/ts/components/conversation/Quote.md
+++ b/ts/components/conversation/Quote.md
@@ -72,7 +72,7 @@ const View = Whisper.MessageView;
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
- body: 'About six',
+ body: 'Woo, otters!',
sent_at: Date.now() - 18000000,
quote: {
text:
@@ -104,7 +104,50 @@ const View = Whisper.MessageView;
```
-#### Image with caption
+#### A lot of text in quotation, with icon
+
+```jsx
+const outgoing = new Whisper.Message({
+ type: 'outgoing',
+ body: 'Woo, otters!',
+ sent_at: Date.now() - 18000000,
+ quote: {
+ text:
+ 'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
+ 'After that, probably dogs. And then, you know, reptiles of all types. ' +
+ 'Then birds. They are dinosaurs, after all. Then cephalapods, because they are ' +
+ 'really smart.',
+ author: '+12025550011',
+ id: Date.now() - 1000,
+ attachments: [
+ {
+ contentType: 'text/plain',
+ fileName: 'lorum_ipsum.txt',
+ },
+ ],
+ },
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+ source: '+12025550011',
+ type: 'incoming',
+ quote: Object.assign({}, outgoing.attributes.quote, {
+ author: '+12025550005',
+ }),
+}));
+const View = Whisper.MessageView;
+
+
+
+
+```
+
+#### A lot of text in quotation, with image
```jsx
const quotedMessage = {
@@ -113,10 +156,14 @@ const quotedMessage = {
};
const outgoing = new Whisper.Message({
type: 'outgoing',
- body: "Totally, it's a pretty unintuitive concept.",
+ body: 'Woo, otters!',
sent_at: Date.now() - 18000000,
quote: {
- text: 'I am pretty confused about Pi.',
+ text:
+ 'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
+ 'After that, probably dogs. And then, you know, reptiles of all types. ' +
+ 'Then birds. They are dinosaurs, after all. Then cephalapods, because they are ' +
+ 'really smart.',
author: '+12025550011',
id: Date.now() - 1000,
attachments: [
@@ -154,6 +201,53 @@ const View = Whisper.MessageView;
```
+#### Image with caption
+
+```jsx
+const quotedMessage = {
+ imageUrl: util.gifObjectUrl,
+ id: '3234-23423-2342',
+};
+const outgoing = new Whisper.Message({
+ type: 'outgoing',
+ body: "Totally, it's a pretty unintuitive concept.",
+ sent_at: Date.now() - 18000000,
+ quote: {
+ text: 'I am pretty confused about Pi.',
+ author: '+12025550011',
+ id: Date.now() - 1000,
+ attachments: [
+ {
+ contentType: 'image/gif',
+ fileName: 'pi.gif',
+ thumbnail: {
+ contentType: 'image/gif',
+ },
+ },
+ ],
+ },
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+ source: '+12025550011',
+ type: 'incoming',
+ quote: Object.assign({}, outgoing.attributes.quote, {
+ author: '+12025550005',
+ }),
+}));
+
+const View = Whisper.MessageView;
+
+
+
+
+```
+
#### Image
```jsx