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

Feat: Add tooltips on new column menu (#1893)

Browse Source 
* implemented tooltip for view fields

* console.log
This commit is contained in:
Ayush Agrawal
2023-10-06 14:34:39 +05:30
committed by GitHub
parent 2ff35083fb
commit 53021dc64f
11 changed files with 132 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
front/src/modules/ui/button/components/FloatingIconButton.tsx
View File

@ -21,17 +21,21 @@ export type FloatingIconButtonProps = {
disabled?: boolean;
focus?: boolean;
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
isActive?: boolean;
};
const StyledButton = styled.button<
Pick<
FloatingIconButtonProps,
'size' | 'position' | 'applyShadow' | 'applyBlur' | 'focus'
'size' | 'position' | 'applyShadow' | 'applyBlur' | 'focus' | 'isActive'
>
>`
align-items: center;
backdrop-filter: ${({ applyBlur }) => (applyBlur ? 'blur(20px)' : 'none')};
background: ${({ theme }) => theme.background.primary};
background: ${({ theme, isActive }) =>
!!isActive
? theme.background.transparent.medium
: theme.background.primary};
border: ${({ focus, theme }) =>
focus ? `1px solid ${theme.color.blue}` : 'transparent'};
border-radius: ${({ position, theme }) => {
@ -87,7 +91,8 @@ const StyledButton = styled.button<
}}
&:hover {
background: ${({ theme }) => theme.background.transparent.lighter};
background: ${({ theme, isActive }) =>
!!isActive ?? theme.background.transparent.lighter};
}
&:active {
@ -110,6 +115,7 @@ export const FloatingIconButton = ({
disabled = false,
focus = false,
onClick,
isActive,
}: FloatingIconButtonProps) => {
const theme = useTheme();
return (
@ -122,6 +128,7 @@ export const FloatingIconButton = ({
className={className}
position={position}
onClick={onClick}
isActive={isActive}
>
{Icon && <Icon size={theme.icon.size.md} />}
</StyledButton>

7
front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx
View File

@ -27,15 +27,17 @@ export type FloatingIconButtonGroupProps = Pick<
iconButtons: {
Icon: IconComponent;
onClick?: (event: MouseEvent<any>) => void;
isActive?: boolean;
}[];
};
export const FloatingIconButtonGroup = ({
iconButtons,
size,
className,
}: FloatingIconButtonGroupProps) => (
<StyledFloatingIconButtonGroupContainer>
{iconButtons.map(({ Icon, onClick }, index) => {
<StyledFloatingIconButtonGroupContainer className={className}>
{iconButtons.map(({ Icon, onClick, isActive }, index) => {
const position: FloatingIconButtonPosition =
iconButtons.length === 1
? 'standalone'
@ -54,6 +56,7 @@ export const FloatingIconButtonGroup = ({
onClick={onClick}
position={position}
size={size}
isActive={isActive}
/>
);
})}

1
front/src/modules/ui/field/types/FieldDefinition.ts
View File

@ -11,4 +11,5 @@ export type FieldDefinition<T extends FieldMetadata> = {
metadata: T;
buttonIcon?: IconComponent;
basePathToShowPage?: string;
infoTooltipContent?: string;
};

3
front/src/modules/ui/menu-item/components/MenuItem.tsx
View File

@ -20,6 +20,7 @@ export type MenuItemProps = {
accent?: MenuItemAccent;
text: string;
iconButtons?: MenuItemIconButton[];
isTooltipOpen?: boolean;
className?: string;
testId?: string;
onClick?: () => void;
@ -30,6 +31,7 @@ export const MenuItem = ({
accent = 'default',
text,
iconButtons,
isTooltipOpen,
className,
testId,
onClick,
@ -42,6 +44,7 @@ export const MenuItem = ({
onClick={onClick}
className={className}
accent={accent}
isMenuOpen={!!isTooltipOpen}
>
<StyledMenuItemLeftContent>
<MenuItemLeftContent LeftIcon={LeftIcon ?? undefined} text={text} />

14
front/src/modules/ui/menu-item/components/MenuItemDraggable.tsx
View File

@ -11,6 +11,7 @@ export type MenuItemDraggableProps = {
LeftIcon: IconComponent | undefined;
accent?: MenuItemAccent;
iconButtons?: MenuItemIconButton[];
isTooltipOpen?: boolean;
onClick?: () => void;
text: string;
isDragDisabled?: boolean;
@ -20,6 +21,7 @@ export const MenuItemDraggable = ({
LeftIcon,
accent = 'default',
iconButtons,
isTooltipOpen,
onClick,
text,
isDragDisabled = false,
@ -32,17 +34,19 @@ export const MenuItemDraggable = ({
onClick={onClick}
accent={accent}
className={className}
isMenuOpen={!!isTooltipOpen}
>
<MenuItemLeftContent
LeftIcon={LeftIcon}
text={text}
showGrip={!isDragDisabled}
/>
<div className="hoverable-buttons">
{showIconButtons && (
<FloatingIconButtonGroup iconButtons={iconButtons} />
)}
</div>
{showIconButtons && (
<FloatingIconButtonGroup
className="hoverable-buttons"
iconButtons={iconButtons}
/>
)}
</StyledHoverableMenuItemBase>
);
};

6
front/src/modules/ui/menu-item/internals/components/StyledMenuItemBase.tsx
View File

@ -89,9 +89,11 @@ export const StyledMenuItemRightContent = styled.div`
flex-direction: row;
`;
export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)`
export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
isMenuOpen: boolean;
}>`
& .hoverable-buttons {
opacity: 0;
opacity: ${({ isMenuOpen }) => (isMenuOpen ? 1 : 0)};
pointer-events: none;
position: fixed;
right: ${({ theme }) => theme.spacing(2)};

84
front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx
View File

@ -1,3 +1,5 @@
import { useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import {
DropResult,
OnDragEndResponder,
@ -9,8 +11,12 @@ import { DraggableList } from '@/ui/draggable-list/components/DraggableList';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { StyledDropdownMenuSubheader } from '@/ui/dropdown/components/StyledDropdownMenuSubheader';
import { IconMinus, IconPlus } from '@/ui/icon';
import { IconInfoCircle } from '@/ui/input/constants/icons';
import { MenuItem } from '@/ui/menu-item/components/MenuItem';
import { MenuItemDraggable } from '@/ui/menu-item/components/MenuItemDraggable';
import { AppTooltip } from '@/ui/tooltip/AppTooltip';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { isDefined } from '~/utils/isDefined';
import { ViewFieldForVisibility } from '../types/ViewFieldForVisibility';
@ -33,8 +39,38 @@ export const ViewFieldsVisibilityDropdownSection = ({
onDragEnd?.(result, provided);
};
const [openToolTipIndex, setOpenToolTipIndex] = useState<number>();
const handleInfoButtonClick = (index: number) => {
if (index === openToolTipIndex) setOpenToolTipIndex(undefined);
else setOpenToolTipIndex(index);
};
const getIconButtons = (index: number, field: ViewFieldForVisibility) => {
if (index !== 0) {
const isFirstColumn = isDraggable && index === 0;
if (isFirstColumn && field.infoTooltipContent) {
return [
{
Icon: IconInfoCircle,
onClick: () => handleInfoButtonClick(index),
isActive: openToolTipIndex === index,
},
];
}
if (!isFirstColumn && field.infoTooltipContent) {
return [
{
Icon: IconInfoCircle,
onClick: () => handleInfoButtonClick(index),
isActive: openToolTipIndex === index,
},
{
Icon: field.isVisible ? IconMinus : IconPlus,
onClick: () => onVisibilityChange(field),
},
];
}
if (!isFirstColumn && !field.infoTooltipContent) {
return [
{
Icon: field.isVisible ? IconMinus : IconPlus,
@ -44,11 +80,20 @@ export const ViewFieldsVisibilityDropdownSection = ({
}
};
const ref = useRef<HTMLDivElement>(null);
useListenClickOutside({
refs: [ref],
callback: () => {
setOpenToolTipIndex(undefined);
},
});
return (
<>
<div ref={ref}>
<StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
<StyledDropdownMenuItemsContainer>
{isDraggable && (
{isDraggable ? (
<DraggableList
onDragEnd={handleOnDrag}
draggableItems={
@ -64,8 +109,10 @@ export const ViewFieldsVisibilityDropdownSection = ({
key={field.key}
LeftIcon={field.Icon}
iconButtons={getIconButtons(index, field)}
isTooltipOpen={openToolTipIndex === index}
text={field.name}
isDragDisabled={index === 0}
className={`${title}-draggable-item-tooltip-anchor-${index}`}
/>
}
/>
@ -73,22 +120,31 @@ export const ViewFieldsVisibilityDropdownSection = ({
</>
}
/>
)}
{!isDraggable &&
fields.map((field) => (
) : (
fields.map((field, index) => (
<MenuItem
key={field.key}
LeftIcon={field.Icon}
iconButtons={[
{
Icon: field.isVisible ? IconMinus : IconPlus,
onClick: () => onVisibilityChange(field),
},
]}
iconButtons={getIconButtons(index, field)}
isTooltipOpen={openToolTipIndex === index}
text={field.name}
className={`${title}-fixed-item-tooltip-anchor-${index}`}
/>
))}
))
)}
</StyledDropdownMenuItemsContainer>
</>
{isDefined(openToolTipIndex) &&
createPortal(
<AppTooltip
anchorSelect={`.${title}-${
isDraggable ? 'draggable' : 'fixed'
}-item-tooltip-anchor-${openToolTipIndex}`}
place="left"
content={fields[openToolTipIndex].infoTooltipContent}
isOpen={true}
/>,
document.body,
)}
</div>
);
};

2
front/src/modules/ui/view-bar/types/ViewFieldForVisibility.ts
View File

@ -3,7 +3,7 @@ import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
export type ViewFieldForVisibility = Pick<
FieldDefinition<FieldMetadata>,
'key' | 'name' | 'Icon'
'key' | 'name' | 'Icon' | 'infoTooltipContent'
> & {
isVisible?: boolean;
index: number;