feat: feature/mvp-sprint-1 Made settings menu hide type selection when on readonly mode

This commit is contained in:
Nikolaj Frey 2023-08-14 13:13:23 +10:00
parent 9f6d270464
commit 180608a8b8
2 changed files with 60 additions and 52 deletions

View File

@ -67,59 +67,62 @@ export const SettingsMenu = (props) => {
cursor="pointer" cursor="pointer"
paddingY={basePadding} paddingY={basePadding}
> >
<Flex {!props?.readonly && (
alignItems="center" <Flex
flexDirection="row" alignItems="center"
_hover={{ flexDirection="row"
background: "greys.light", _hover={{
}} background: "greys.light",
paddingX={basePadding * 1} }}
paddingY={basePadding / 2} paddingX={basePadding * 1}
> paddingY={basePadding / 2}
<Icon marginBottom="-2px" name="cyclone" size={iconSize}></Icon> >
<Text marginTop="-2px" paddingLeft={2} fontSize="xs"> <Icon marginBottom="-2px" name="cyclone" size={iconSize}></Icon>
Types <Text marginTop="-2px" paddingLeft={2} fontSize="xs">
</Text> Types
</Flex> </Text>
</Flex>
)}
<Flex <Flex
flexDirection="column" flexDirection="column"
// rowGap={basePadding} // rowGap={basePadding}
background="greys.lightt" background="greys.lightt"
cursor="pointer" cursor="pointer"
> >
{types.map((type, idx) => { {!props?.readonly &&
const ret = ( types.map((type, idx) => {
<Flex const ret = (
key={props?.uuid + props?.fullPath + "-type-menu-" + idx}
width="100%"
_hover={{
"&>div": {
background: "greys.light",
},
}}
onClick={() => onChangeType(type?.key || type)}
paddingY={1}
>
<Flex <Flex
alignItems="center" key={props?.uuid + props?.fullPath + "-type-menu-" + idx}
flexDirection="row"
width="100%" width="100%"
paddingX={basePadding * 2} _hover={{
paddingY={basePadding / 2} "&>div": {
background: "greys.light",
},
}}
onClick={() => onChangeType(type?.key || type)}
paddingY={1}
> >
<Icon <Flex
marginBottom="-2px" alignItems="center"
name={type?.icon || type?.key || type?.label || type} flexDirection="row"
size={iconSize} width="100%"
></Icon> paddingX={basePadding * 2}
<Text marginTop="-2px" paddingLeft={2} fontSize="xs"> paddingY={basePadding / 2}
{type?.label || type?.key || type} >
</Text> <Icon
marginBottom="-2px"
name={type?.icon || type?.key || type?.label || type}
size={iconSize}
></Icon>
<Text marginTop="-2px" paddingLeft={2} fontSize="xs">
{type?.label || type?.key || type}
</Text>
</Flex>
</Flex> </Flex>
</Flex> )
) return ret
return ret })}
})}
</Flex> </Flex>
</Flex> </Flex>
</Flex> </Flex>

View File

@ -564,17 +564,21 @@ export const Thingtime = (props) => {
const pathDom = React.useMemo(() => { const pathDom = React.useMemo(() => {
if (renderedPath) { if (renderedPath) {
return ( return (
<Flex <>
maxWidth="100%" <MagicInput
paddingLeft={props?.pathPl || pl} value={renderedPath}
fontSize="12px" readonly={!props?.edit}
wordBreak="break-all" chakras={{
> maxWidth: "100%",
{renderedPath} paddingLeft: props?.pathPl || pl,
</Flex> fontSize: "12px",
wordBreak: "break-all",
}}
></MagicInput>
</>
) )
} }
}, [renderedPath, pl, props?.pathPl]) }, [renderedPath, pl, props?.edit, props?.pathPl])
const handleMouseEvent = React.useCallback( const handleMouseEvent = React.useCallback(
(e) => { (e) => {
@ -674,6 +678,7 @@ export const Thingtime = (props) => {
opacity={showContextIcon ? 1 : 0} opacity={showContextIcon ? 1 : 0}
uuid={uuid} uuid={uuid}
fullPath={fullPath} fullPath={fullPath}
readonly={!props?.edit}
onChangeType={onChangeType} onChangeType={onChangeType}
></SettingsMenu> ></SettingsMenu>
<Flex <Flex