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:
parent
ba4b033db9
commit
bd88407b78
2 changed files with 52 additions and 11 deletions
|
@ -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,13 +378,15 @@ $ios-border-color: rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.incoming .with-tail.tail-wrapper {
|
.incoming .tail-wrapper {
|
||||||
&:before {
|
&.with-tail {
|
||||||
left: -1px;
|
&:before {
|
||||||
background-color: white;
|
left: -1px;
|
||||||
}
|
background-color: white;
|
||||||
&:after {
|
}
|
||||||
left: -6px;
|
&:after {
|
||||||
|
left: -6px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner-bubble {
|
.inner-bubble {
|
||||||
|
|
|
@ -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…
Add table
Add a link
Reference in a new issue