iOS theme: Permanant background to attachment part of bubble

(this is to handle a quote making bubble wider, but a narrow image)
pull/1/head
Scott Nonnenberg 7 years ago
parent ba4b033db9
commit bd88407b78
No known key found for this signature in database
GPG Key ID: 5F82280C35134661

@ -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 // The browser doesn't always clip the border-radius properly, so we can get a
// browser doesn't always clip the border-radius properly, so we get a partial-pixel // partial-pixel halo effect. Sadly, it is still needed because a quote can force the
// halo effect. // bubble wider than an attached image, and we need a background color on the bottom
.outgoing .with-tail.tail-wrapper { // section if the image doesn't cover it all.
.outgoing .tail-wrapper {
.attachments { .attachments {
background-color: $blue; background-color: $blue;
} }
@ -377,7 +378,8 @@ $ios-border-color: rgba(0,0,0,0.1);
} }
} }
.incoming .with-tail.tail-wrapper { .incoming .tail-wrapper {
&.with-tail {
&:before { &:before {
left: -1px; left: -1px;
background-color: white; background-color: white;
@ -385,6 +387,7 @@ $ios-border-color: rgba(0,0,0,0.1);
&:after { &:after {
left: -6px; left: -6px;
} }
}
.inner-bubble { .inner-bubble {
background-color: white; background-color: white;

@ -814,6 +814,44 @@ const View = Whisper.MessageView;
</util.ConversationContext> </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 #### Quote, video attachment
```jsx ```jsx

Loading…
Cancel
Save