mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
signal-desktop/ts/components/stickers/StickerButton.md
Ken Powers 1c906e76f9 Handle non-square stickers via 'contain'
2020-01-15 11:19:56 -08:00

12 KiB
Raw Blame History

Default

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}
      blessedPacks={[]}
      knownPacks={[]}
      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.

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={packs}
      installedPacks={[]}
      blessedPacks={[]}
      knownPacks={[]}
      onPickSticker={(packId, stickerId) =>
        console.log('onPickSticker', { packId, stickerId })
      }
      clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
      onClickAddPack={() => console.log('onClickAddPack')}
      recentStickers={[abeSticker, sticker1, sticker2, sticker3]}
    />
  </div>
</util.ConversationContext>;

Just known packs

Even with just known packs, the button should render.

const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };

const packs = [
  {
    id: 'foo',
    cover: sticker1,
    stickers: Array(101)
      .fill(0)
      .map((n, id) => ({ ...sticker1, id })),
  },
];

<util.ConversationContext theme={util.theme}>
  <StickerButton
    i18n={util.i18n}
    receivedPacks={[]}
    installedPacks={[]}
    knownPacks={packs}
    blessedPacks={[]}
    onPickSticker={(packId, stickerId) =>
      console.log('onPickSticker', { packId, stickerId })
    }
    clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
    onClickAddPack={() => console.log('onClickAddPack')}
    recentStickers={[]}
  />
</util.ConversationContext>;

Just blessed packs

Even with just blessed packs, the button should render.

const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };

const packs = [
  {
    id: 'foo',
    cover: sticker1,
    stickers: Array(101)
      .fill(0)
      .map((n, id) => ({ ...sticker1, id })),
  },
];

<util.ConversationContext theme={util.theme}>
  <StickerButton
    i18n={util.i18n}
    receivedPacks={[]}
    installedPacks={[]}
    blessedPacks={packs}
    knownPacks={[]}
    onPickSticker={(packId, stickerId) =>
      console.log('onPickSticker', { packId, stickerId })
    }
    clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
    onClickAddPack={() => console.log('onClickAddPack')}
    recentStickers={[]}
  />
</util.ConversationContext>;

No packs at all

When there are no advertised packs and no installed packs the button should not render anything.

<util.ConversationContext theme={util.theme}>
  <StickerButton
    i18n={util.i18n}
    receivedPacks={[]}
    installedPacks={[]}
    blessedPacks={[]}
    knownPacks={[]}
    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.

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}
      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 (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.

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.

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 showing the user the sticker button.

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}
      blessedPacks={[]}
      knownPacks={[]}
      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>;