diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss index b12e01dd3..aa2282e3c 100644 --- a/stylesheets/_ios.scss +++ b/stylesheets/_ios.scss @@ -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 { diff --git a/ts/components/conversation/Quote.md b/ts/components/conversation/Quote.md index 3caefe9fa..dce198604 100644 --- a/ts/components/conversation/Quote.md +++ b/ts/components/conversation/Quote.md @@ -814,6 +814,44 @@ const View = Whisper.MessageView; ``` +#### 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; + + + + +``` + + #### Quote, video attachment ```jsx