Raphaël Bosi
c596a5e342
## Description Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name **`twenty-ui`** (v0.1.0, publishable) and renames the old package to **`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports → `twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates twenty-front's `Toggle` to the new package (first consumer) as a drop-in. ## Next steps - Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` + `.yarnrc.yml`), then tag `ui/v0.1.0` to publish. - Continue migrating components from `twenty-ui-deprecated` → `twenty-ui`.
68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
import { useLingui } from '@lingui/react/macro';
|
|
import { IconDotsVertical, IconReload } from 'twenty-ui-deprecated/display';
|
|
import { LightIconButton } from 'twenty-ui-deprecated/input';
|
|
import { MenuItem } from 'twenty-ui-deprecated/navigation';
|
|
import { GRAY_SCALE_LIGHT } from 'twenty-ui-deprecated/theme';
|
|
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
|
|
|
|
import { LAYOUT_CUSTOMIZATION_BAR_DROPDOWN_ID } from '@/layout-customization/constants/LayoutCustomizationBarDropdownId';
|
|
import { RESET_RECORD_PAGE_LAYOUT_MODAL_ID } from '@/layout-customization/constants/ResetRecordPageLayoutModalId';
|
|
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
|
|
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
|
|
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
|
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
|
|
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
|
|
import { useModal } from '@/ui/layout/modal/hooks/useModal';
|
|
|
|
const StyledInvertedIconButtonWrapper = styled.span`
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
button {
|
|
color: ${GRAY_SCALE_LIGHT.gray1};
|
|
}
|
|
|
|
button:hover {
|
|
background: ${themeCssVariables.background.transparent.light};
|
|
}
|
|
`;
|
|
|
|
export const LayoutCustomizationBarMenuDropdown = () => {
|
|
const { t } = useLingui();
|
|
const { closeDropdown } = useCloseDropdown();
|
|
const { openModal } = useModal();
|
|
|
|
const handleResetClick = () => {
|
|
closeDropdown(LAYOUT_CUSTOMIZATION_BAR_DROPDOWN_ID);
|
|
openModal(RESET_RECORD_PAGE_LAYOUT_MODAL_ID);
|
|
};
|
|
|
|
return (
|
|
<Dropdown
|
|
dropdownId={LAYOUT_CUSTOMIZATION_BAR_DROPDOWN_ID}
|
|
dropdownPlacement="bottom-start"
|
|
clickableComponent={
|
|
<StyledInvertedIconButtonWrapper>
|
|
<LightIconButton
|
|
Icon={IconDotsVertical}
|
|
accent="tertiary"
|
|
aria-label={t`Layout customization menu`}
|
|
/>
|
|
</StyledInvertedIconButtonWrapper>
|
|
}
|
|
dropdownComponents={
|
|
<DropdownContent widthInPixels={GenericDropdownContentWidth.Large}>
|
|
<DropdownMenuItemsContainer>
|
|
<MenuItem
|
|
LeftIcon={IconReload}
|
|
text={t`Reset record page layout`}
|
|
onClick={handleResetClick}
|
|
/>
|
|
</DropdownMenuItemsContainer>
|
|
</DropdownContent>
|
|
}
|
|
/>
|
|
);
|
|
};
|