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