mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Add style guide examples for portrait/landscape images

Browse source
This commit is contained in:
Scott Nonnenberg 2018-04-16 16:23:05 -07:00
parent 89d3078e2a
commit 5af5bbdb0f
No known key found for this signature in database
GPG key ID: 5F82280C35134661
8 changed files with 147 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

119
ts/components/conversation/Message.md
View file

@ -120,6 +120,125 @@ const View = Whisper.MessageView;
</util.ConversationContext>
```
#### Image with portrait aspect ratio
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
sent_at: Date.now() - 18000000,
attachments: [{
data: util.portraitYellow,
fileName: 'portraitYellow.png',
contentType: 'image/png',
}],
});
const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
source: '+12025550003',
type: 'incoming',
}));
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>
```
#### Image with portrait aspect ratio and caption
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
body: 'This is an odd yellow bar. Cool, huh?',
sent_at: Date.now() - 18000000,
attachments: [{
data: util.portraitYellow,
fileName: 'portraitYellow.png',
contentType: 'image/png',
}],
});
const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
source: '+12025550003',
type: 'incoming',
}));
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>
```
#### Image with landscape aspect ratio
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
sent_at: Date.now() - 18000000,
attachments: [{
data: util.landscapePurple,
fileName: 'landscapePurple.jpg',
contentType: 'image/jpeg',
}],
});
const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
source: '+12025550003',
type: 'incoming',
}));
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>
```
#### Image with landscape aspect ratio and caption
```jsx
const outgoing = new Whisper.Message({
type: 'outgoing',
body: "An interesting horizontal bar. It's art.",
sent_at: Date.now() - 18000000,
attachments: [{
data: util.landscapePurple,
fileName: 'landscapePurple.jpg',
contentType: 'image/jpeg',
}],
});
const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
source: '+12025550003',
type: 'incoming',
}));
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>
```
#### Video with caption
```jsx