cursor: hint for stickers

This commit is contained in:
muerwre 2018-12-07 14:00:07 +07:00
parent 45fd758c1d
commit d248b679ed
9 changed files with 80 additions and 24 deletions

View file

@ -1,9 +1,13 @@
import React from 'react';
import { Icon } from '$components/panels/Icon';
import { MODES } from '$constants/modes';
import { STICKERS } from '$constants/stickers';
import { StickerIcon } from '$components/StickerIcon';
type Props = {
mode: String,
sticker: String,
set: String,
}
export class Cursor extends React.PureComponent<Props, void> {
@ -20,12 +24,14 @@ export class Cursor extends React.PureComponent<Props, void> {
};
render() {
const { mode } = this.props;
const { mode, set, sticker } = this.props;
const activeSticker = (sticker && set && STICKERS[set] && STICKERS[set].layers[sticker]);
return (
<div className="cursor-tooltip" ref={el => { this.cursor = el; }}>
{ mode === MODES.ROUTER && <Icon icon="icon-router" />}
{ mode === MODES.POLY && <Icon icon="icon-poly" />}
{ mode === MODES.STICKERS && activeSticker && <StickerIcon sticker={sticker} set={set} /> }
</div>
);
}

View file

@ -0,0 +1,19 @@
import React from 'react';
import { STICKERS } from '$constants/stickers';
type Props = {
set: String,
sticker: String,
};
export const StickerIcon = ({ set, sticker }: Props) => (
<div
className="cursor-icon-sticker"
style={{
backgroundImage: `url(${STICKERS[set].url}`,
backgroundPosition: `-${STICKERS[set].layers[sticker].off * 100}% 50%`,
}}
/>
);
//

View file

@ -41,7 +41,7 @@ export const Component = (props: Props) => {
const showDialog = (
mode === MODES.ROUTER
|| (mode === MODES.STICKERS && !activeSticker)
|| (mode === MODES.STICKERS && !activeSticker.set)
|| mode === MODES.TRASH
|| mode === MODES.LOGO
|| mode === MODES.SAVE