admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Display a tooltip for actions without short labels (#11243)

Browse Source 
- Merge `RecordIndexActionMenuButtons` and `RecordShowActionMenuButtons`
into a single component `PageHeaderActionMenuButtons`
- Display tooltip after 1s for actions without short labels


https://github.com/user-attachments/assets/7649bed8-a1a9-4c1d-8fbe-f1bf3a51db56
This commit is contained in:
Raphaël Bosi
2025-03-28 11:01:55 +01:00
committed by GitHub
parent 8d35454dd8
commit b1c57edc90
10 changed files with 131 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx Normal file
View File

@ -0,0 +1,64 @@
import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
import { i18n } from '@lingui/core';
import {
AppTooltip,
Button,
IconButton,
TooltipDelay,
TooltipPosition,
} from 'twenty-ui';
const StyledWrapper = styled.div`
font-size: ${({ theme }) => theme.font.size.md};
`;
export const PageHeaderActionMenuButtons = () => {
const actionMenuEntries = useRecoilComponentValueV2(
actionMenuEntriesComponentSelector,
);
const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
return (
<>
{pinnedEntries.map((entry) =>
entry.shortLabel ? (
<Button
key={entry.key}
Icon={entry.Icon}
size="small"
variant="secondary"
accent="default"
title={entry.shortLabel ? i18n._(entry.shortLabel) : ''}
onClick={() => entry.onClick?.()}
ariaLabel={i18n._(entry.label)}
/>
) : (
<div id={`action-menu-entry-${entry.key}`} key={entry.key}>
<IconButton
Icon={entry.Icon}
size="small"
variant="secondary"
accent="default"
onClick={() => entry.onClick?.()}
ariaLabel={i18n._(entry.label)}
/>
<StyledWrapper>
<AppTooltip
// eslint-disable-next-line
anchorSelect={`#action-menu-entry-${entry.key}`}
content={i18n._(entry.label)}
delay={TooltipDelay.longDelay}
place={TooltipPosition.Bottom}
offset={5}
noArrow
/>
</StyledWrapper>
</div>
),
)}
</>
);
};

4
packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx
View File

@ -3,7 +3,7 @@ import { MultipleRecordsActionKeys } from '@/action-menu/actions/record-actions/
import { RecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionMenuEntriesSetter';
import { RunWorkflowRecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RunWorkflowRecordAgnosticActionMenuEntriesSetter';
import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
import { RecordIndexActionMenuButtons } from '@/action-menu/components/RecordIndexActionMenuButtons';
import { PageHeaderActionMenuButtons } from '@/action-menu/components/PageHeaderActionMenuButtons';
import { RecordIndexActionMenuDropdown } from '@/action-menu/components/RecordIndexActionMenuDropdown';
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
@ -48,7 +48,7 @@ export const RecordIndexActionMenu = ({ indexId }: { indexId: string }) => {
},
}}
>
{!isMobile && <RecordIndexActionMenuButtons />}
{!isMobile && <PageHeaderActionMenuButtons />}
<RecordIndexActionMenuDropdown />
<ActionMenuConfirmationModals />
<RecordActionMenuEntriesSetter />

29
packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuButtons.tsx
View File

@ -1,29 +0,0 @@
import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { i18n } from '@lingui/core';
import { Button } from 'twenty-ui';
export const RecordIndexActionMenuButtons = () => {
const actionMenuEntries = useRecoilComponentValueV2(
actionMenuEntriesComponentSelector,
);
const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
return (
<>
{pinnedEntries.map((entry, index) => (
<Button
key={index}
Icon={entry.Icon}
size="small"
variant="secondary"
accent="default"
title={entry.shortLabel ? i18n._(entry.shortLabel) : ''}
onClick={entry.onClick}
ariaLabel={i18n._(entry.label)}
/>
))}
</>
);
};

7
packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx
View File

@ -2,12 +2,13 @@ import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-acti
import { RecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionMenuEntriesSetter';
import { RunWorkflowRecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RunWorkflowRecordAgnosticActionMenuEntriesSetter';
import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
import { RecordShowActionMenuButtons } from '@/action-menu/components/RecordShowActionMenuButtons';
import { PageHeaderActionMenuButtons } from '@/action-menu/components/PageHeaderActionMenuButtons';
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useIsMobile } from 'twenty-ui';
import { FeatureFlagKey } from '~/generated/graphql';
export const RecordShowActionMenu = () => {
@ -27,6 +28,8 @@ export const RecordShowActionMenu = () => {
FeatureFlagKey.IsWorkflowEnabled,
);
const isMobile = useIsMobile();
return (
<>
{hasSelectedRecord && contextStoreCurrentObjectMetadataItemId && (
@ -36,7 +39,7 @@ export const RecordShowActionMenu = () => {
onActionExecutedCallback: () => {},
}}
>
<RecordShowActionMenuButtons />
{!isMobile && <PageHeaderActionMenuButtons />}
<ActionMenuConfirmationModals />
<RecordActionMenuEntriesSetter />
<RecordAgnosticActionMenuEntriesSetter />

46
packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx
View File

@ -1,46 +0,0 @@
import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { i18n } from '@lingui/core';
import { Button, IconButton, useIsMobile } from 'twenty-ui';
export const RecordShowActionMenuButtons = () => {
const actionMenuEntries = useRecoilComponentValueV2(
actionMenuEntriesComponentSelector,
);
const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
const isMobile = useIsMobile();
return (
<>
{!isMobile &&
pinnedEntries.map((entry) =>
entry.shortLabel ? (
<Button
key={entry.key}
Icon={entry.Icon}
size="small"
variant="secondary"
accent="default"
title={i18n._(entry.shortLabel)}
onClick={() => entry.onClick?.()}
ariaLabel={i18n._(entry.label)}
/>
) : (
<IconButton
key={entry.key}
Icon={entry.Icon}
size="small"
variant="secondary"
accent="default"
onClick={() => entry.onClick?.()}
ariaLabel={i18n._(entry.label)}
/>
),
)}
<PageHeaderOpenCommandMenuButton key="more" />
</>
);
};

4
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
View File

@ -2,7 +2,7 @@ import { RecordIndexActionMenu } from '@/action-menu/components/RecordIndexActio
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
import { PageHeaderToggleCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton';
import { PageHeader } from '@/ui/layout/page/components/PageHeader';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
@ -62,7 +62,7 @@ export const RecordIndexPageHeader = () => {
return (
<PageHeader title={pageHeaderTitle} Icon={Icon}>
<RecordIndexActionMenu indexId={recordIndexId} />
<PageHeaderOpenCommandMenuButton />
<PageHeaderToggleCommandMenuButton />
</PageHeader>
);
};

72
packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx → packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx
View File

@ -1,9 +1,17 @@
import { AnimatedButton, getOsControlSymbol, useIsMobile } from 'twenty-ui';
import {
AnimatedButton,
AppTooltip,
getOsControlSymbol,
TooltipDelay,
TooltipPosition,
useIsMobile,
} from 'twenty-ui';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { i18n } from '@lingui/core';
import { t } from '@lingui/core/macro';
import { motion } from 'framer-motion';
import { useRecoilValue } from 'recoil';
@ -12,6 +20,10 @@ const StyledButtonWrapper = styled.div`
z-index: 30;
`;
const StyledTooltipWrapper = styled.div`
font-size: ${({ theme }) => theme.font.size.md};
`;
const xPaths = {
topLeft: `M12 12 L6 6`,
topRight: `M12 12 L18 6`,
@ -98,7 +110,7 @@ const AnimatedIcon = ({
);
};
export const PageHeaderOpenCommandMenuButton = () => {
export const PageHeaderToggleCommandMenuButton = () => {
const { toggleCommandMenu } = useCommandMenu();
const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
@ -111,25 +123,41 @@ export const PageHeaderOpenCommandMenuButton = () => {
const theme = useTheme();
return (
<StyledButtonWrapper>
<AnimatedButton
animatedSvg={<AnimatedIcon isCommandMenuOpened={isCommandMenuOpened} />}
className="page-header-command-menu-button"
dataTestId="page-header-command-menu-button"
size={isMobile ? 'medium' : 'small'}
variant="secondary"
accent="default"
hotkeys={[getOsControlSymbol(), 'K']}
ariaLabel={ariaLabel}
onClick={toggleCommandMenu}
animate={{
rotate: isCommandMenuOpened ? 90 : 0,
}}
transition={{
duration: theme.animation.duration.normal,
ease: 'easeInOut',
}}
/>
</StyledButtonWrapper>
<>
<StyledButtonWrapper>
<div id="toggle-command-menu-button">
<AnimatedButton
animatedSvg={
<AnimatedIcon isCommandMenuOpened={isCommandMenuOpened} />
}
className="page-header-command-menu-button"
dataTestId="page-header-command-menu-button"
size={isMobile ? 'medium' : 'small'}
variant="secondary"
accent="default"
hotkeys={[getOsControlSymbol(), 'K']}
ariaLabel={ariaLabel}
onClick={toggleCommandMenu}
animate={{
rotate: isCommandMenuOpened ? 90 : 0,
}}
transition={{
duration: theme.animation.duration.normal,
ease: 'easeInOut',
}}
/>
</div>
</StyledButtonWrapper>
<StyledTooltipWrapper>
<AppTooltip
anchorSelect="#toggle-command-menu-button"
content={i18n._(ariaLabel)}
delay={TooltipDelay.longDelay}
place={TooltipPosition.Bottom}
offset={5}
noArrow
/>
</StyledTooltipWrapper>
</>
);
};

2
packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
View File

@ -13,6 +13,7 @@ import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordSh
import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { PageHeaderToggleCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton';
import { PageBody } from '@/ui/layout/page/components/PageBody';
import { PageContainer } from '@/ui/layout/page/components/PageContainer';
import { RecordShowPageHeader } from '~/pages/object-record/RecordShowPageHeader';
@ -57,6 +58,7 @@ export const RecordShowPage = () => {
objectRecordId={objectRecordId}
>
<RecordShowActionMenu />
<PageHeaderToggleCommandMenuButton />
</RecordShowPageHeader>
<PageBody>
<TimelineActivityContext.Provider

4
packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
View File

@ -3,7 +3,7 @@ import { PageFavoriteFoldersDropdown } from '@/favorites/components/PageFavorite
import { FAVORITE_FOLDER_PICKER_DROPDOWN_ID } from '@/favorites/favorite-folder-picker/constants/FavoriteFolderPickerDropdownId';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
import { PageHeaderToggleCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton';
import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
import { useIsMobile } from 'twenty-ui';
@ -51,7 +51,7 @@ export const RecordShowPageBaseHeader = ({
/>
</>
)}
<PageHeaderOpenCommandMenuButton key="more" />
<PageHeaderToggleCommandMenuButton key="more" />
</>
);
};

5
packages/twenty-ui/src/display/tooltip/AppTooltip.tsx
View File

@ -14,6 +14,7 @@ export enum TooltipDelay {
noDelay = '0ms',
shortDelay = '300ms',
mediumDelay = '500ms',
longDelay = '1000ms',
}
const StyledAppTooltip = styled(Tooltip)<{ width?: string }>`
@ -73,7 +74,9 @@ export const AppTooltip = ({
? 0
: delay === TooltipDelay.shortDelay
? 300
: 500;
: delay === TooltipDelay.mediumDelay
? 500
: 1000;
return (
<StyledAppTooltip