Make record name editable on show page (#9172)

When fields are not displayed in show page, title should be editable



https://github.com/user-attachments/assets/049c2998-6944-46c7-9e9e-f6d29da06c6c
This commit is contained in:
Thomas Trompette
2024-12-26 10:59:17 +01:00
committed by GitHub
parent 29d364fa7b
commit f63b0a235a
6 changed files with 137 additions and 10 deletions

View File

@ -17,7 +17,7 @@ import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
type NavigationDrawerInputProps = {
className?: string;
Icon: IconComponent | ((props: TablerIconsProps) => JSX.Element);
Icon?: IconComponent | ((props: TablerIconsProps) => JSX.Element);
value: string;
onChange: (value: string) => void;
onSubmit: (value: string) => void;

View File

@ -32,7 +32,7 @@ export type NavigationDrawerItemProps = {
subItemState?: NavigationDrawerSubItemState;
to?: string;
onClick?: () => void;
Icon: IconComponent | ((props: TablerIconsProps) => JSX.Element);
Icon?: IconComponent | ((props: TablerIconsProps) => JSX.Element);
active?: boolean;
danger?: boolean;
soon?: boolean;
@ -257,6 +257,7 @@ export const NavigationDrawerItem = ({
const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] =
useRecoilState(isNavigationDrawerExpandedState);
const showBreadcrumb = indentationLevel === 2;
const showStyledSpacer = !!soon || !!count || !!keyboard || !!rightOptions;
const handleItemClick = () => {
if (isMobile) {
@ -320,7 +321,7 @@ export const NavigationDrawerItem = ({
</StyledEllipsisContainer>
</StyledLabelParent>
<StyledSpacer />
{showStyledSpacer && <StyledSpacer />}
{soon && (
<NavigationDrawerAnimatedCollapseWrapper>
@ -341,8 +342,9 @@ export const NavigationDrawerItem = ({
</StyledKeyBoardShortcut>
</NavigationDrawerAnimatedCollapseWrapper>
)}
<NavigationDrawerAnimatedCollapseWrapper>
{rightOptions && (
{rightOptions && (
<NavigationDrawerAnimatedCollapseWrapper>
<StyledRightOptionsContainer
onClick={(e) => {
e.stopPropagation();
@ -358,8 +360,8 @@ export const NavigationDrawerItem = ({
{rightOptions}
</StyledRightOptionsVisbility>
</StyledRightOptionsContainer>
)}
</NavigationDrawerAnimatedCollapseWrapper>
</NavigationDrawerAnimatedCollapseWrapper>
)}
</StyledItemElementsContainer>
</StyledItem>
</StyledNavigationDrawerItemContainer>