Message bubble: Larger stickers; handle non-square aspect ratios

* Sticker picker: Handle non-square stickers
* Message bubble: Larger stickers; handle non-square aspect ratios
This commit is contained in:
Scott Nonnenberg
2020-01-09 11:26:49 -08:00
committed by Ken Powers
parent 84ea41958c
commit 744d1b5295
5 changed files with 100 additions and 10 deletions

View File

@@ -997,6 +997,92 @@ First set is in a 1:1 conversation, second set is in a group.
</util.ConversationContext>
```
#### Sticker with non-square aspect ratio
First set is in a 1:1 conversation, second set is in a group.
```jsx
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
isSticker={true}
timestamp={Date.now()}
i18n={util.i18n}
attachments={[
{
url: util.landscapePurpleObjectUrl,
contentType: 'image/png',
width: 200,
height: 50,
},
]}
showVisualAttachment={() => console.log('showVisualAttachment')}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
isSticker={true}
status="sent"
timestamp={Date.now()}
i18n={util.i18n}
attachments={[
{
url: util.landscapePurpleObjectUrl,
contentType: 'image/png',
width: 200,
height: 50,
},
]}
showVisualAttachment={() => console.log('showVisualAttachment')}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
isSticker={true}
authorName="Mr. Sticker"
conversationType="group"
timestamp={Date.now()}
i18n={util.i18n}
attachments={[
{
url: util.landscapePurpleObjectUrl,
contentType: 'image/png',
width: 200,
height: 50,
},
]}
showVisualAttachment={() => console.log('showVisualAttachment')}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
isSticker={true}
conversationType="group"
status="sent"
timestamp={Date.now()}
i18n={util.i18n}
attachments={[
{
url: util.landscapePurpleObjectUrl,
contentType: 'image/png',
width: 200,
height: 50,
},
]}
showVisualAttachment={() => console.log('showVisualAttachment')}
/>
</div>
</util.ConversationContext>
```
#### Sticker with pending image
A sticker with no attachments (what our selectors produce for a pending sticker) is not displayed at all.