mirror of
https://github.com/signalapp/Signal-Desktop.git
synced 2026-04-27 11:53:23 +01:00
Stickers
Co-authored-by: scott@signal.org Co-authored-by: ken@signal.org
This commit is contained in:
Ken Powers
committed by
Scott Nonnenberg
Scott Nonnenberg
parent
8c8856785b
commit
29de50c12a
271
ts/components/stickers/StickerButton.md
Normal file
271
ts/components/stickers/StickerButton.md
Normal file
@@ -0,0 +1,271 @@
|
||||
#### Default
|
||||
|
||||
```jsx
|
||||
const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
cover: sticker1,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker2,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker3,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<div
|
||||
style={{
|
||||
height: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={[]}
|
||||
installedPacks={packs}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[abeSticker, sticker1, sticker2, sticker3]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### No Installed Packs
|
||||
|
||||
When there are no installed packs the button should call the `onClickAddPack`
|
||||
callback.
|
||||
|
||||
```jsx
|
||||
const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
cover: sticker1,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker2,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker3,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<div
|
||||
style={{
|
||||
height: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={[]}
|
||||
installedPacks={packs}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[abeSticker, sticker1, sticker2, sticker3]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### No Advertised Packs and No Installed Packs
|
||||
|
||||
When there are no advertised packs and no installed packs the button should not render anything.
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={[]}
|
||||
installedPacks={[]}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[]}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Installed Pack Tooltip
|
||||
|
||||
When a pack is installed there should be a tooltip saying as such.
|
||||
|
||||
```jsx
|
||||
const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
title: 'Abe',
|
||||
cover: abeSticker,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...abeSticker, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker1,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker2,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'qux',
|
||||
cover: sticker3,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<div
|
||||
style={{
|
||||
height: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={[]}
|
||||
installedPacks={packs}
|
||||
installedPack={packs[0]}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### New Installation Splash Tooltip
|
||||
|
||||
When the application is updated or freshly installed there should be a tooltip
|
||||
showing the user the sticker button.
|
||||
|
||||
```jsx
|
||||
const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
title: 'Abe',
|
||||
cover: abeSticker,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...abeSticker, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker1,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker2,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'qux',
|
||||
cover: sticker3,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<div
|
||||
style={{
|
||||
height: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={[]}
|
||||
installedPacks={packs}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[]}
|
||||
showIntroduction
|
||||
clearShowIntroduction={() => console.log('clearShowIntroduction')}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
Reference in New Issue
Block a user