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

Handle non-square stickers via 'contain'

Browse source
This commit is contained in:
Ken Powers 2020-01-15 14:16:21 -05:00 • committed by Scott Nonnenberg
parent 490abb09af
commit 1c906e76f9
5 changed files with 217 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
stylesheets/_modules.scss
View file

@ -5146,10 +5146,9 @@ button.module-image__border-overlay:focus {
}
.module-sticker-picker__header__button__image {
min-width: 20px;
min-height: 20px;
max-width: 20px;
max-height: 20px;
width: 20px;
height: 20px;
object-fit: contain;
}
.module-sticker-picker__header__button__image--placeholder {
@ -5199,7 +5198,8 @@ button.module-image__border-overlay:focus {
&__image,
&__placeholder {
width: 100%;
height: auto;
height: 100%;
object-fit: contain;
}
&__placeholder {
@ -5385,6 +5385,7 @@ button.module-image__border-overlay:focus {
&__cover {
width: 48px;
height: 48px;
object-fit: contain;
}
&__cover-placeholder {
width: 48px;
@ -5590,7 +5591,8 @@ button.module-image__border-overlay:focus {
&__image {
width: 100%;
height: auto;
height: 100%;
object-fit: contain;
}
&--placeholder {
@ -5787,6 +5789,7 @@ button.module-image__border-overlay:focus {
&__image {
width: 20px;
height: 20px;
object-fit: contain;
}
&__image-placeholder {
width: 20px;

146
ts/components/stickers/StickerButton.md
View file

@ -276,6 +276,152 @@ const packs = [
</util.ConversationContext>;
```
#### Installed Pack Tooltip (Wide Sticker)
When a pack is installed there should be a tooltip saying as such and the sticker should appear in its original aspect ratio.
```jsx
const landscapeGreenSticker = {
id: 4,
url: util.landscapeGreenObjectUrl,
packId: 'green',
};
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: 'Green',
cover: landscapeGreenSticker,
stickers: Array(101)
.fill(0)
.map((n, id) => ({ ...landscapeGreenSticker, 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}
blessedPacks={[]}
knownPacks={[]}
installedPack={packs[0]}
onPickSticker={(packId, stickerId) =>
console.log('onPickSticker', { packId, stickerId })
}
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
onClickAddPack={() => console.log('onClickAddPack')}
recentStickers={[]}
/>
</div>
</util.ConversationContext>;
```
#### Installed Pack Tooltip (Tall Sticker)
When a pack is installed there should be a tooltip saying as such and the sticker should appear in its original aspect ratio.
```jsx
const portraitTealSticker = {
id: 4,
url: util.portraitTealObjectUrl,
packId: 'teal',
};
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: 'Teal',
cover: portraitTealSticker,
stickers: Array(101)
.fill(0)
.map((n, id) => ({ ...portraitTealSticker, 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}
blessedPacks={[]}
knownPacks={[]}
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

24
ts/components/stickers/StickerManager.md
View file

@ -4,6 +4,12 @@
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 wideSticker = {
id: 4,
url: util.landscapeGreenObjectUrl,
packId: 'wide',
};
const tallSticker = { id: 4, url: util.portraitTealObjectUrl, packId: 'tall' };
const packs = [
{
@ -33,6 +39,24 @@ const packs = [
.fill(0)
.map((n, id) => ({ ...sticker3, id })),
},
{
id: 'wide',
cover: wideSticker,
title: 'Wide',
author: 'Wide',
stickers: Array(101)
.fill(0)
.map((n, id) => ({ ...wideSticker, id })),
},
{
id: 'tall',
cover: tallSticker,
title: 'Tall',
author: 'Tall',
stickers: Array(101)
.fill(0)
.map((n, id) => ({ ...tallSticker, id })),
},
];
const receivedPacks = packs.map(p => ({ ...p, status: 'downloaded' }));

24
ts/components/stickers/StickerPicker.md
View file

@ -5,8 +5,30 @@ 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 wideSticker = {
id: 4,
url: util.landscapeGreenObjectUrl,
packId: 'wide',
};
const tallSticker = { id: 4, url: util.portraitTealObjectUrl, packId: 'tall' };
const packs = [
{
id: 'tall',
cover: tallSticker,
stickerCount: 101,
stickers: Array(101)
.fill(0)
.map((n, id) => ({ ...tallSticker, id })),
},
{
id: 'wide',
cover: wideSticker,
stickerCount: 101,
stickers: Array(101)
.fill(0)
.map((n, id) => ({ ...wideSticker, id })),
},
{
id: 'foo',
cover: sticker1,
@ -154,6 +176,8 @@ const packs = [
sticker1,
sticker2,
sticker3,
tallSticker,
wideSticker,
{ ...sticker2, id: 9999 },
]}
onClose={() => console.log('onClose')}

17
ts/components/stickers/StickerPreviewModal.md
View file

@ -2,6 +2,12 @@
```jsx
const abeSticker = { url: util.squareStickerObjectUrl, packId: 'abe' };
const wideSticker = {
id: 4,
url: util.landscapeGreenObjectUrl,
packId: 'wide',
};
const tallSticker = { id: 4, url: util.portraitTealObjectUrl, packId: 'tall' };
const pack = {
id: 'foo',
@ -10,9 +16,14 @@ const pack = {
isBlessed: true,
author: 'Foo McBarrington',
status: 'downloaded',
stickers: Array(101)
.fill(0)
.map((n, id) => ({ ...abeSticker, id })),
stickerCount: 101,
stickers: [
wideSticker,
tallSticker,
...Array(101)
.fill(0)
.map((n, id) => ({ ...abeSticker, id })),
],
};
<util.ConversationContext theme={util.theme}>