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: {
// 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
"input:focus": {

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

@ -535,7 +535,7 @@ export const Commander = (props) => {
opacity={commanderActive ? 0.25 : 0}
repeats={rainbowRepeats}
thickness={10}
opacityTransition="all 1000ms ease"
opacityTransition="all 1000ms ease-out"
overflow="visible"
>
<Center
@ -553,7 +553,7 @@ export const Commander = (props) => {
opacity={commanderActive ? 0.6 : 0}
position="absolute"
repeats={rainbowRepeats}
opacityTransition="all 2500ms ease"
opacityTransition="all 2500ms ease-out"
thickness={1}
>
{/* <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}
repeats={rainbowRepeats}
thickness={8}
opacityTransition="all 1000ms ease"
opacityTransition="all 1000ms ease-out"
overflow="visible"
>
<Center
@ -536,7 +536,7 @@ export const CommanderV1 = (props) => {
opacity={commanderActive ? 0.6 : 0}
position="absolute"
repeats={rainbowRepeats}
opacityTransition="all 2500ms ease"
opacityTransition="all 2500ms ease-out"
thickness={10}
></Rainbow>
<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 [overflow, setOverflow] = React.useState(props?.overflow || "hidden")
const [opacityTransition, setOpacityTransition] = React.useState(
props?.opacityTransition || "all 10000ms ease"
props?.opacityTransition || "all 10000ms ease-out"
)
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)
}, [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)
return (
@ -714,7 +696,21 @@ export const Thingtime = (props) => {
{!loading && thingtimeChildren && (
<Box className="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>
)}
</Flex>