Fix problem of squished quote icons and images

This commit is contained in:
Scott Nonnenberg 2018-04-12 12:02:35 -07:00
parent 127a90c4f6
commit 644bc9e6fb
No known key found for this signature in database
GPG key ID: 5F82280C35134661
2 changed files with 99 additions and 4 deletions

View file

@ -525,6 +525,7 @@ span.status {
.icon-container {
flex: initial;
min-width: 48px;
width: 48px;
height: 48px;
position: relative;

View file

@ -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,6 +104,103 @@ const View = Whisper.MessageView;
</util.ConversationContext>
```
#### 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;
<util.ConversationContext theme={util.theme}>
<util.BackboneWrapper
View={View}
options={{ model: incoming }}
/>
<util.BackboneWrapper
View={View}
options={{ model: outgoing }}
/>
</util.ConversationContext>
```
#### A lot of text in quotation, with image
```jsx
const quotedMessage = {
imageUrl: util.gifObjectUrl,
id: '3234-23423-2342',
};
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: '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',
}),
}));
outgoing.quotedMessage = quotedMessage;
incoming.quotedMessage = quotedMessage;
const View = Whisper.MessageView;
<util.ConversationContext theme={util.theme}>
<util.BackboneWrapper
View={View}
options={{ model: incoming }}
/>
<util.BackboneWrapper
View={View}
options={{ model: outgoing }}
/>
</util.ConversationContext>
```
#### Image with caption
```jsx
@ -138,9 +235,6 @@ const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
}),
}));
outgoing.quotedMessage = quotedMessage;
incoming.quotedMessage = quotedMessage;
const View = Whisper.MessageView;
<util.ConversationContext theme={util.theme}>
<util.BackboneWrapper