OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

use the Delicious font for more character!

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-22 01:29:07 -07:00
parent dcebc5c690
commit ff4c29f91e
2 changed files with 43 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/dev-todos.txt Normal file
View file

@ -0,0 +1 @@
* Embed Delicious font, right now it just uses the locally installed one!

72
app/src/WardrobePage.js
View file

@ -63,35 +63,7 @@ function ItemsPanel() {
return ( return (
<Box color="green.800"> <Box color="green.800">
<PseudoBox role="group" d="inline-block"> <OutfitHeading />
<Heading size="xl" mb="6" wordBreak="break-word">
<Editable defaultValue="roopal27">
{({ isEditing, onRequestEdit }) => (
<>
<EditablePreview d="inline" />
<EditableInput />
{!isEditing && (
<PseudoBox
d="inline-block"
opacity="0"
transition="opacity 0.5s"
_groupHover={{ opacity: "1" }}
onClick={onRequestEdit}
>
<IconButton
icon="edit"
variant="link"
color="green.600"
aria-label="Edit outfit name"
title="Edit outfit name"
/>
</PseudoBox>
)}
</>
)}
</Editable>
</Heading>
</PseudoBox>
<Stack spacing="10"> <Stack spacing="10">
{zonesAndItems.map(({ zoneName, items, wornItemId }) => ( {zonesAndItems.map(({ zoneName, items, wornItemId }) => (
<Box key={zoneName}> <Box key={zoneName}>
@ -108,10 +80,50 @@ function ItemsPanel() {
); );
} }
function OutfitHeading() {
return (
<PseudoBox role="group" d="inline-block">
<Heading
size="2xl"
mb="6"
wordBreak="break-word"
fontFamily="Delicious"
fontWeight="800"
>
<Editable defaultValue="roopal27">
{({ isEditing, onRequestEdit }) => (
<>
<EditablePreview d="inline" />
<EditableInput />
{!isEditing && (
<PseudoBox
d="inline-block"
opacity="0"
transition="opacity 0.5s"
_groupHover={{ opacity: "1" }}
onClick={onRequestEdit}
>
<IconButton
icon="edit"
variant="link"
color="green.600"
aria-label="Edit outfit name"
title="Edit outfit name"
/>
</PseudoBox>
)}
</>
)}
</Editable>
</Heading>
</PseudoBox>
);
}
function ItemsForZone({ zoneName, items, wornItemId, onWearItem }) { function ItemsForZone({ zoneName, items, wornItemId, onWearItem }) {
return ( return (
<Box> <Box>
<Heading size="lg" color="green.900" mb="3"> <Heading size="xl" color="green.800" mb="3" fontFamily="Delicious">
{zoneName} {zoneName}
</Heading> </Heading>
<Stack spacing="3"> <Stack spacing="3">