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

Feat : Introduced Delay Options for Tooltip (#5766)

Browse Source 
Fixes https://github.com/twentyhq/twenty/issues/5727

---------

Co-authored-by: Rushikesh Tarapure <rushikeshtarapure@gofynd.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Rushikesh Tarapure
2024-06-19 20:07:44 +05:30
committed by GitHub
parent 86f95c0870
commit bc8c895b0e
8 changed files with 98 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/twenty-front/src/modules/activities/comment/CommentHeader.tsx
View File

@ -1,6 +1,5 @@
import { Tooltip } from 'react-tooltip';
import styled from '@emotion/styled';
import { Avatar } from 'twenty-ui';
import { AppTooltip, Avatar } from 'twenty-ui';
import { Comment } from '@/activities/types/Comment';
import {
@ -42,21 +41,6 @@ const StyledDate = styled.div`
margin-left: ${({ theme }) => theme.spacing(1)};
`;
const StyledTooltip = styled(Tooltip)`
background-color: ${({ theme }) => theme.background.primary};
box-shadow: 0px 2px 4px 3px
${({ theme }) => theme.background.transparent.light};
box-shadow: 2px 4px 16px 6px
${({ theme }) => theme.background.transparent.light};
color: ${({ theme }) => theme.font.color.primary};
opacity: 1;
padding: 8px;
`;
type CommentHeaderProps = {
comment: Pick<Comment, 'id' | 'author' | 'createdAt'>;
actionBar?: React.ReactNode;
@ -87,7 +71,7 @@ export const CommentHeader = ({ comment, actionBar }: CommentHeaderProps) => {
<StyledDate id={`id-${commentId}`}>
{beautifiedCreatedAt}
</StyledDate>
<StyledTooltip
<AppTooltip
anchorSelect={`#id-${commentId}`}
content={exactCreatedAt}
clickable

20
packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx
View File

@ -1,8 +1,7 @@
import { Tooltip } from 'react-tooltip';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { Avatar, IconCheckbox, IconNotes } from 'twenty-ui';
import { AppTooltip, Avatar, IconCheckbox, IconNotes } from 'twenty-ui';
import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
import { timelineActivityWithoutTargetsFamilyState } from '@/activities/timeline/states/timelineActivityWithoutTargetsFamilyState';
@ -109,21 +108,6 @@ const StyledVerticalLine = styled.div`
width: 2px;
`;
const StyledTooltip = styled(Tooltip)`
background-color: ${({ theme }) => theme.background.primary};
box-shadow: 0px 2px 4px 3px
${({ theme }) => theme.background.transparent.light};
box-shadow: 2px 4px 16px 6px
${({ theme }) => theme.background.transparent.light};
color: ${({ theme }) => theme.font.color.primary};
opacity: 1;
padding: ${({ theme }) => theme.spacing(2)};
`;
const StyledTimelineItemContainer = styled.div<{ isGap?: boolean }>`
align-items: center;
align-self: stretch;
@ -217,7 +201,7 @@ export const TimelineActivity = ({
<StyledItemTitleDate id={`id-${activityForTimeline.id}`}>
{beautifiedCreatedAt}
</StyledItemTitleDate>
<StyledTooltip
<AppTooltip
anchorSelect={`#id-${activityForTimeline.id}`}
content={exactCreatedAt}
clickable

16
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
View File

@ -1,8 +1,7 @@
import React, { ReactElement, useContext } from 'react';
import { Tooltip } from 'react-tooltip';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from 'twenty-ui';
import { AppTooltip, IconComponent } from 'twenty-ui';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
@ -55,17 +54,6 @@ const StyledInlineCellBaseContainer = styled.div`
user-select: none;
`;
const StyledTooltip = styled(Tooltip)`
background-color: ${({ theme }) => theme.background.primary};
box-shadow: ${({ theme }) => theme.boxShadow.light};
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
padding: ${({ theme }) => theme.spacing(2)};
`;
export const StyledSkeletonDiv = styled.div`
height: 24px;
`;
@ -141,7 +129,7 @@ export const RecordInlineCellContainer = ({
)}
{/* TODO: Displaying Tooltips on the board is causing performance issues https://react-tooltip.com/docs/examples/render */}
{!showLabel && !fieldDefinition?.disableTooltip && (
<StyledTooltip
<AppTooltip
anchorSelect={`#${labelId}`}
content={label}
clickable

16
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
View File

@ -1,9 +1,8 @@
import { ChangeEvent, ReactNode, useRef } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { Tooltip } from 'react-tooltip';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Avatar, AvatarType } from 'twenty-ui';
import { AppTooltip, Avatar, AvatarType } from 'twenty-ui';
import { v4 as uuidV4 } from 'uuid';
import {
@ -55,17 +54,6 @@ const StyledTitle = styled.div`
justify-content: center;
`;
const StyledTooltip = styled(Tooltip)`
background-color: ${({ theme }) => theme.background.primary};
box-shadow: ${({ theme }) => theme.boxShadow.light};
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
padding: ${({ theme }) => theme.spacing(2)};
`;
const StyledAvatarWrapper = styled.div`
cursor: pointer;
`;
@ -153,7 +141,7 @@ export const ShowPageSummaryCard = ({
Added {beautifiedCreatedAt}
</StyledDate>
)}
<StyledTooltip
<AppTooltip
anchorSelect={`#${dateElementId}`}
content={exactCreatedAt}
clickable