Added new view to select types for objects (#6700)

Issue #6496 Hi team, Is this the right approach for handling type selection with states and conditional rendering, or should these be managed on separate pages altogether? Please let me know Ill make changes accordingly :) I’m also working on styling the buttons according to the Figma design and will be moving constants like categoryDescriptions and categories to the constants folder. Thanks for your guidance! https://github.com/user-attachments/assets/452bea9f-4d0a-4472-9941-421b54cda47f --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
2024-09-07 02:17:40 +05:30
parent 99f8f8fedb
commit 79aba75649
17 changed files with 597 additions and 264 deletions
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
@ -0,0 +1,103 @@
+import { Button } from '@/ui/input/button/components/Button';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { IconChevronDown } from 'twenty-ui';
+
+type SettingsDataModelNewFieldBreadcrumbDropDownProps = {
+  isConfigureStep: boolean;
+  onBreadcrumbClick: (isConfigureStep: boolean) => void;
+};
+
+const StyledContainer = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.secondary};
+  cursor: pointer;
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.md};
+`;
+const StyledButtonContainer = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const StyledDownChevron = styled(IconChevronDown)`
+  color: ${({ theme }) => theme.font.color.primary};
+  position: absolute;
+  right: ${({ theme }) => theme.spacing(1.5)};
+  top: 50%;
+  transform: translateY(-50%);
+`;
+
+const StyledMenuItem = styled(MenuItem)<{ selected?: boolean }>`
+  background: ${({ theme, selected }) =>
+    selected ? theme.background.quaternary : 'transparent'};
+  cursor: pointer;
+`;
+
+const StyledSpan = styled.span`
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledButton = styled(Button)`
+  color: ${({ theme }) => theme.font.color.primary};
+  padding-right: ${({ theme }) => theme.spacing(6)};
+`;
+
+export const SettingsDataModelNewFieldBreadcrumbDropDown = ({
+  isConfigureStep,
+  onBreadcrumbClick,
+}: SettingsDataModelNewFieldBreadcrumbDropDownProps) => {
+  const dropdownId = `settings-object-new-field-breadcrumb-dropdown`;
+
+  const { closeDropdown } = useDropdown(dropdownId);
+
+  const handleClick = (step: boolean) => {
+    onBreadcrumbClick(step);
+    closeDropdown();
+  };
+  const theme = useTheme();
+
+  return (
+    <StyledContainer>
+      New Field <StyledSpan>-</StyledSpan>
+      <Dropdown
+        dropdownPlacement="bottom-start"
+        dropdownId={dropdownId}
+        clickableComponent={
+          <StyledButtonContainer>
+            <StyledDownChevron size={theme.icon.size.md} />
+            {isConfigureStep ? (
+              <StyledButton variant="tertiary" title="2. Configure" />
+            ) : (
+              <StyledButton variant="tertiary" title="1. Type" />
+            )}
+          </StyledButtonContainer>
+        }
+        dropdownComponents={
+          <DropdownMenu>
+            <DropdownMenuItemsContainer>
+              <StyledMenuItem
+                text="1. Type"
+                onClick={() => handleClick(false)}
+                selected={!isConfigureStep}
+              />
+              <StyledMenuItem
+                text="2. Configure"
+                onClick={() => handleClick(true)}
+                selected={isConfigureStep}
+              />
+            </DropdownMenuItemsContainer>
+          </DropdownMenu>
+        }
+        dropdownHotkeyScope={{
+          scope: dropdownId,
+        }}
+      />
+    </StyledContainer>
+  );
+};