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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
remix/app/components/Thingtime/SettingsMenu.tsx
View File

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

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

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