iOS theme: Permanant background to attachment part of bubble

(this is to handle a quote making bubble wider, but a narrow image)
This commit is contained in:
Scott Nonnenberg 2018-04-20 16:02:33 -07:00
parent ba4b033db9
commit bd88407b78
No known key found for this signature in database
GPG key ID: 5F82280C35134661
2 changed files with 52 additions and 11 deletions

View file

@ -361,10 +361,11 @@ $ios-border-color: rgba(0,0,0,0.1);
}
}
// We don't add a background to the attachments div unless there's also text. The
// browser doesn't always clip the border-radius properly, so we get a partial-pixel
// halo effect.
.outgoing .with-tail.tail-wrapper {
// The browser doesn't always clip the border-radius properly, so we can get a
// partial-pixel halo effect. Sadly, it is still needed because a quote can force the
// bubble wider than an attached image, and we need a background color on the bottom
// section if the image doesn't cover it all.
.outgoing .tail-wrapper {
.attachments {
background-color: $blue;
}
@ -377,13 +378,15 @@ $ios-border-color: rgba(0,0,0,0.1);
}
}
.incoming .with-tail.tail-wrapper {
&:before {
left: -1px;
background-color: white;
}
&:after {
left: -6px;
.incoming .tail-wrapper {
&.with-tail {
&:before {
left: -1px;
background-color: white;
}
&:after {
left: -6px;
}
}
.inner-bubble {

View file

@ -814,6 +814,44 @@ const View = Whisper.MessageView;
</util.ConversationContext>
```
#### Quote, portrait image attachment
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
sent_at: Date.now() - 18000000,
quote: {
text: 'How many ferrets do you have?',
author: '+12025550011',
id: Date.now() - 1000,
},
attachments: [{
data: util.portraitYellow,
fileName: 'pi.gif',
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;
<util.ConversationContext theme={util.theme}>
<util.BackboneWrapper
View={View}
options={{ model: incoming }}
/>
<util.BackboneWrapper
View={View}
options={{ model: outgoing }}
/>
</util.ConversationContext>
```
#### Quote, video attachment
```jsx