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

Advanced toggle alignment (#10844)

Browse Source 
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:
<img width="399" alt="Screenshot 2025-03-13 at 15 49 21"
src="https://github.com/user-attachments/assets/6dd60b3a-1b2e-43a0-ad28-dc44437460ab"
/>

after:
<img width="401" alt="Screenshot 2025-03-13 at 15 47 43"
src="https://github.com/user-attachments/assets/86e51b07-e84a-413a-8a49-1820c165dc68"
/>

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2025-03-14 22:58:14 +05:30
committed by GitHub
parent c833b1c449
commit f44f42e9a0
7 changed files with 35 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
View File

@ -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 = ({
<>
<StyledContainer>
<StyledLabelContainer>
<AdvancedSettingsWrapper dimension="width" hideIcon={true}>
<AdvancedSettingsWrapper animationDimension="width" hideDot>
<StyledApiKeyContainer>
<StyledIconContainer>
<StyledIconPoint

4
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
View File

@ -8,6 +8,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { t } from '@lingui/core/macro';
import {
ColorSample,
IconCheck,
@ -21,7 +22,6 @@ import {
MenuItemSelectColor,
} from 'twenty-ui';
import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
import { t } from '@lingui/core/macro';
type SettingsDataModelFieldSelectFormOptionRowProps = {
className?: string;
@ -102,7 +102,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
stroke={theme.icon.stroke.sm}
color={theme.font.color.extraLight}
/>
<AdvancedSettingsWrapper dimension="width" hideIcon={true}>
<AdvancedSettingsWrapper animationDimension="width" hideDot>
<StyledOptionInput
value={option.value}
onChange={(input) =>

5
packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
View File

@ -246,7 +246,10 @@ export const SettingsDataModelObjectAboutForm = ({
tooltip,
defaultValue,
}) => (
<AdvancedSettingsWrapper key={`object-${fieldName}-text-input`}>
<AdvancedSettingsWrapper
key={`object-${fieldName}-text-input`}
dotPosition="top"
>
<StyledInputContainer>
<Controller
name={fieldName}