muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 19:16:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

stickers: fixed sticker dialog listing

Browse source
This commit is contained in:
muerwre 2018-12-03 18:11:23 +07:00
parent 89a64e244d
commit 93e05b7efe
5 changed files with 10801 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/dialogs/StickersDialog.jsx
View file

@ -1,7 +1,7 @@
// @flow
import React from 'react';
import { stickers } from '$constants/stickers';
import { STICKERS } from '$constants/stickers';
import sprite from '$sprites/stickers.svg';
type Props = {
@ -11,12 +11,17 @@ type Props = {
export const StickersDialog = ({ setActiveSticker }: Props) => (
<div className="helper stickers-helper">
{
stickers.map(sticker => (
<div className="sticker-preview" key={sticker}>
<svg width={48} height={48} viewBox="0 0 64 64" onClick={() => setActiveSticker(sticker)}>
<use xlinkHref={`${sprite}#sticker-${sticker}`} x="0" y="0" width="64" height="64" />
</svg>
</div>
Object.keys(STICKERS).map(set => (
STICKERS[set].layers.map((sticker, i) => (
<div
style={{
backgroundImage: `url(${STICKERS[set].url})`,
backgroundPosition: `${-sticker.off * 48}px 50%`,
}}
className="sticker-preview"
key={`${set}-${i}`}
/>
))
))
}
</div>