feat: feature/mvp-sprint-1 Made seedling icon have permanent position and spacing just changed opacity

Browse Source
This commit is contained in:
Nikolaj Frey 2023-08-14 13:06:26 +10:00
parent fa2f03c52e
commit 9f6d270464
5 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
remix/app/Providers/Chakra/theme.tsx
View File

@ -18,7 +18,7 @@ export const theme = extendTheme({
global: { global: {
// make all elements padding and margin animate // make all elements padding and margin animate
"*": { "*": {
transition: "padding 0.2s ease, margin 0.2s ease", transition: "padding 0.2s ease, margin 0.2s ease-out",
}, },
// make all elements have a transparent focus border // make all elements have a transparent focus border
"input:focus": { "input:focus": {

4
remix/app/components/Commander/Commander.tsx
View File

@ -535,7 +535,7 @@ export const Commander = (props) => {
opacity={commanderActive ? 0.25 : 0} opacity={commanderActive ? 0.25 : 0}
repeats={rainbowRepeats} repeats={rainbowRepeats}
thickness={10} thickness={10}
opacityTransition="all 1000ms ease" opacityTransition="all 1000ms ease-out"
overflow="visible" overflow="visible"
> >
<Center <Center
@ -553,7 +553,7 @@ export const Commander = (props) => {
opacity={commanderActive ? 0.6 : 0} opacity={commanderActive ? 0.6 : 0}
position="absolute" position="absolute"
repeats={rainbowRepeats} repeats={rainbowRepeats}
opacityTransition="all 2500ms ease" opacityTransition="all 2500ms ease-out"
thickness={1} thickness={1}
> >
{/* <InputPartWrapper>{InputPart}</InputPartWrapper> */} {/* <InputPartWrapper>{InputPart}</InputPartWrapper> */}

4
remix/app/components/Commander/CommanderV1.tsx
View File

@ -518,7 +518,7 @@ export const CommanderV1 = (props) => {
opacity={commanderActive ? 0.25 : 0} opacity={commanderActive ? 0.25 : 0}
repeats={rainbowRepeats} repeats={rainbowRepeats}
thickness={8} thickness={8}
opacityTransition="all 1000ms ease" opacityTransition="all 1000ms ease-out"
overflow="visible" overflow="visible"
> >
<Center <Center
@ -536,7 +536,7 @@ export const CommanderV1 = (props) => {
opacity={commanderActive ? 0.6 : 0} opacity={commanderActive ? 0.6 : 0}
position="absolute" position="absolute"
repeats={rainbowRepeats} repeats={rainbowRepeats}
opacityTransition="all 2500ms ease" opacityTransition="all 2500ms ease-out"
thickness={10} thickness={10}
></Rainbow> ></Rainbow>
<Input <Input

2
remix/app/components/Rainbow/Rainbow.tsx
View File

@ -25,7 +25,7 @@ export const Rainbow = (allProps: any): JSX.Element => {
const [pathWidth, setPathWidth] = React.useState(props?.thickness || 1) const [pathWidth, setPathWidth] = React.useState(props?.thickness || 1)
const [overflow, setOverflow] = React.useState(props?.overflow || "hidden") const [overflow, setOverflow] = React.useState(props?.overflow || "hidden")
const [opacityTransition, setOpacityTransition] = React.useState( const [opacityTransition, setOpacityTransition] = React.useState(
props?.opacityTransition || "all 10000ms ease" props?.opacityTransition || "all 10000ms ease-out"
) )
const parentRef = React.useRef(null) const parentRef = React.useRef(null)

34
remix/app/components/Thingtime/Thingtime.tsx
View File

@ -612,24 +612,6 @@ export const Thingtime = (props) => {
setThingtime(newChildFullPath, newChild) setThingtime(newChildFullPath, newChild)
}, [fullPath, setThingtime, thing]) }, [fullPath, setThingtime, thing])
const addChildUi = React.useMemo(() => {
if (type === "object" && props?.edit) {
return (
<Flex
width="100%"
paddingLeft={multiplyPl(2)}
cursor="pointer"
onClick={addNewChild}
paddingY={2}
>
<Icon size={10} name="seedling"></Icon>
{/* <Icon size={7} name="plus"></Icon>
<Icon size={7} name="plus"></Icon> */}
</Flex>
)
}
}, [props?.edit, type, multiplyPl, addNewChild])
const [showContextIcon, setShowContextIcon] = React.useState(false) const [showContextIcon, setShowContextIcon] = React.useState(false)
return ( return (
@ -714,7 +696,21 @@ export const Thingtime = (props) => {
{!loading && thingtimeChildren && ( {!loading && thingtimeChildren && (
<Box className="thingtimeChildren"> <Box className="thingtimeChildren">
{thingtimeChildren} {thingtimeChildren}
{addChildUi} {type === "object" && (
<Flex
width="100%"
paddingLeft={multiplyPl(2)}
opacity={props?.edit ? 1 : 0}
cursor="pointer"
transition="all 0.2s ease-out"
onClick={addNewChild}
paddingY={2}
>
<Icon size={10} name="seedling"></Icon>
{/* <Icon size={7} name="plus"></Icon>
<Icon size={7} name="plus"></Icon> */}
</Flex>
)}
</Box> </Box>
)} )}
</Flex> </Flex>