From f44f42e9a03e1a649e4a81ee65f2cbebb4b3d362 Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Fri, 14 Mar 2025 22:58:14 +0530 Subject: [PATCH] Advanced toggle alignment (#10844) This PR address advanced toggle alignment, especially the left yellow dot placement. In other advanced settings navigation drawer, the dot appears -20px to left, while this was not the case for advanced toggle's dot. Matched the height and paddings to that of NavigationDrawerItem. @Bonapara FYI before: Screenshot 2025-03-13 at 15 49 21 after: Screenshot 2025-03-13 at 15 47 43 --------- Co-authored-by: Charles Bochet --- .../components/AdvancedSettingsWrapper.tsx | 36 +++++++++---------- .../SettingsNavigationDrawerItem.tsx | 2 +- .../SettingsNavigationDrawerItems.tsx | 2 +- .../SettingsDataModelFieldSelectForm.tsx | 4 +-- ...tingsDataModelFieldSelectFormOptionRow.tsx | 4 +-- .../SettingsDataModelObjectAboutForm.tsx | 5 ++- .../components/AdvancedSettingsToggle.tsx | 16 ++++----- 7 files changed, 35 insertions(+), 34 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx b/packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx index d8ec22bf8..9eca18122 100644 --- a/packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx +++ b/packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx @@ -4,26 +4,27 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; import { AnimatedExpandableContainer, IconPoint, MAIN_COLORS } from 'twenty-ui'; +type DotPosition = 'top' | 'centered'; + const StyledAdvancedWrapper = styled.div` position: relative; width: 100%; `; -const StyledIconContainer = styled.div<{ navigationDrawerItem: boolean }>` +const StyledDotContainer = styled.div<{ dotPosition: DotPosition }>` display: flex; position: absolute; + height: 100%; + left: ${({ theme }) => theme.spacing(-5)}; - ${({ navigationDrawerItem, theme }) => { - if (navigationDrawerItem) { + ${({ dotPosition }) => { + if (dotPosition === 'top') { return ` - height: 100%; - left: ${theme.spacing(-5)}; - align-items: center; + top: 0; `; } return ` - left: ${theme.spacing(-4)}; - top: ${theme.spacing(1)}; + align-items: center; `; }} `; @@ -38,36 +39,35 @@ const StyledIconPoint = styled(IconPoint)` type AdvancedSettingsWrapperProps = { children: React.ReactNode; - dimension?: 'width' | 'height'; - hideIcon?: boolean; - navigationDrawerItem?: boolean; + animationDimension?: 'width' | 'height'; + hideDot?: boolean; + dotPosition?: DotPosition; }; export const AdvancedSettingsWrapper = ({ children, - dimension = 'height', - hideIcon = false, - navigationDrawerItem = false, + hideDot = false, + dotPosition = 'centered', }: AdvancedSettingsWrapperProps) => { const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState); return ( - {!hideIcon && ( - + {!hideDot && ( + - + )} {children} diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx index 579c73bd8..c59678ef4 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx @@ -29,7 +29,7 @@ export const SettingsNavigationDrawerItem = ({ if (isDefined(item.isAdvanced) && item.isAdvanced) { return ( - + { return ( {section.isAdvanced ? ( - + ) : ( diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx index 3553f9b5b..78e90be93 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx @@ -30,9 +30,9 @@ import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToStr import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper'; import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState'; +import { t } from '@lingui/core/macro'; import { useRecoilValue } from 'recoil'; import { SettingsDataModelFieldSelectFormOptionRow } from './SettingsDataModelFieldSelectFormOptionRow'; -import { t } from '@lingui/core/macro'; export const settingsDataModelFieldSelectFormSchema = z.object({ defaultValue: selectFieldDefaultValueSchema(), @@ -251,7 +251,7 @@ export const SettingsDataModelFieldSelectForm = ({ <> - + - + diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx index b053eb5a5..9030da49e 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx @@ -246,7 +246,10 @@ export const SettingsDataModelObjectAboutForm = ({ tooltip, defaultValue, }) => ( - + theme.spacing(2)}; position: relative; + height: ${({ theme }) => theme.spacing(5)}; + padding: ${({ theme }) => theme.spacing(1)}; `; const StyledText = styled.div` color: ${({ theme }) => theme.font.color.secondary}; font-size: ${({ theme }) => theme.font.size.sm}; font-weight: ${({ theme }) => theme.font.weight.medium}; - padding: ${({ theme }) => theme.spacing(1)}; `; const StyledIconContainer = styled.div` - height: 16px; + align-items: center; + display: flex; + left: ${({ theme }) => theme.spacing(-5)}; position: absolute; - left: ${({ theme }) => theme.spacing(-3)}; `; const StyledToggleContainer = styled.label` @@ -33,10 +35,6 @@ const StyledToggleContainer = styled.label` width: 100%; `; -const StyledIconPoint = styled(IconPoint)` - margin-right: 0; -`; - type AdvancedSettingsToggleProps = { isAdvancedModeEnabled: boolean; setIsAdvancedModeEnabled: (enabled: boolean) => void; @@ -55,7 +53,7 @@ export const AdvancedSettingsToggle = ({ return ( -