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" />
</>
);
};