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

Fix advanced settings tool icon alignment (#8935)

Browse Source 
Followup of @bosiraphael's design

<img width="333" alt="Screenshot 2024-12-06 at 17 25 45"
src="https://github.com/user-attachments/assets/b744a7a6-99cb-4d4c-b9da-df0661536208">
<img width="614" alt="Screenshot 2024-12-06 at 17 26 19"
src="https://github.com/user-attachments/assets/e9f31fed-66b2-4ed7-a5cd-97a9bc526752">

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
This commit is contained in:
Félix Malfait
2024-12-06 18:07:37 +01:00
committed by GitHub
parent 9bbb963a08
commit b2be2fb398
7 changed files with 108 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx
View File

@ -3,7 +3,7 @@ import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/st
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { IconTool, MAIN_COLORS } from 'twenty-ui'; import { IconPoint, MAIN_COLORS } from 'twenty-ui';
const StyledAdvancedWrapper = styled.div` const StyledAdvancedWrapper = styled.div`
position: relative; position: relative;
@ -11,10 +11,9 @@ const StyledAdvancedWrapper = styled.div`
`; `;
const StyledIconContainer = styled.div` const StyledIconContainer = styled.div`
border-right: 1px solid ${MAIN_COLORS.yellow};
display: flex; display: flex;
height: 100%; height: 100%;
left: ${({ theme }) => theme.spacing(-6)}; left: ${({ theme }) => theme.spacing(-4)};
position: absolute; position: absolute;
top: 0; top: 0;
`; `;
@ -22,8 +21,8 @@ const StyledIconContainer = styled.div`
const StyledContent = styled.div` const StyledContent = styled.div`
width: 100%; width: 100%;
`; `;
const StyledIconTool = styled(IconTool)` const StyledIconPoint = styled(IconPoint)`
margin-right: ${({ theme }) => theme.spacing(0.5)}; margin-right: 0;
`; `;
type AdvancedSettingsWrapperProps = { type AdvancedSettingsWrapperProps = {
@ -56,7 +55,11 @@ export const AdvancedSettingsWrapper = ({
<StyledAdvancedWrapper> <StyledAdvancedWrapper>
{!hideIcon && ( {!hideIcon && (
<StyledIconContainer> <StyledIconContainer>
<StyledIconTool size={12} color={MAIN_COLORS.yellow} /> <StyledIconPoint
size={12}
color={MAIN_COLORS.yellow}
fill={MAIN_COLORS.yellow}
/>
</StyledIconContainer> </StyledIconContainer>
)} )}
<StyledContent>{children}</StyledContent> <StyledContent>{children}</StyledContent>

50
packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
View File

@ -12,10 +12,10 @@ import {
IconHierarchy2, IconHierarchy2,
IconKey, IconKey,
IconMail, IconMail,
IconPoint,
IconRocket, IconRocket,
IconServer, IconServer,
IconSettings, IconSettings,
IconTool,
IconUserCircle, IconUserCircle,
IconUsers, IconUsers,
MAIN_COLORS, MAIN_COLORS,
@ -51,18 +51,19 @@ type SettingsNavigationItem = {
}; };
const StyledIconContainer = styled.div` const StyledIconContainer = styled.div`
border-right: 1px solid ${MAIN_COLORS.yellow};
position: absolute; position: absolute;
left: ${({ theme }) => theme.spacing(-5)}; left: ${({ theme }) => theme.spacing(-5)};
height: 100%; height: 100%;
display: flex;
align-items: center;
`; `;
const StyledContainer = styled.div` const StyledContainer = styled.div`
position: relative; position: relative;
`; `;
const StyledIconTool = styled(IconTool)` const StyledIconPoint = styled(IconPoint)`
margin-right: ${({ theme }) => theme.spacing(0.5)}; margin-right: 0;
`; `;
export const SettingsNavigationDrawerItems = () => { export const SettingsNavigationDrawerItems = () => {
@ -190,7 +191,11 @@ export const SettingsNavigationDrawerItems = () => {
{isAdvancedModeEnabled && ( {isAdvancedModeEnabled && (
<StyledContainer> <StyledContainer>
<StyledIconContainer> <StyledIconContainer>
<StyledIconTool size={12} color={MAIN_COLORS.yellow} /> <StyledIconPoint
size={12}
color={MAIN_COLORS.yellow}
fill={MAIN_COLORS.yellow}
/>
</StyledIconContainer> </StyledIconContainer>
<SettingsNavigationDrawerItem <SettingsNavigationDrawerItem
label="Security" label="Security"
@ -210,26 +215,41 @@ export const SettingsNavigationDrawerItems = () => {
exit="exit" exit="exit"
variants={motionAnimationVariants} variants={motionAnimationVariants}
> >
<StyledContainer> <NavigationDrawerSection>
<StyledIconContainer> <NavigationDrawerSectionTitle label="Developers" />
<StyledIconTool size={12} color={MAIN_COLORS.yellow} /> <StyledContainer>
</StyledIconContainer> <StyledIconContainer>
<NavigationDrawerSection> <StyledIconPoint
<NavigationDrawerSectionTitle label="Developers" /> size={12}
color={MAIN_COLORS.yellow}
fill={MAIN_COLORS.yellow}
/>
</StyledIconContainer>
<SettingsNavigationDrawerItem <SettingsNavigationDrawerItem
label="API & Webhooks" label="API & Webhooks"
path={SettingsPath.Developers} path={SettingsPath.Developers}
Icon={IconCode} Icon={IconCode}
/> />
{isFunctionSettingsEnabled && ( </StyledContainer>
{isFunctionSettingsEnabled && (
<StyledContainer>
<StyledIconContainer>
<StyledIconPoint
size={12}
color={MAIN_COLORS.yellow}
fill={MAIN_COLORS.yellow}
/>
</StyledIconContainer>
<SettingsNavigationDrawerItem <SettingsNavigationDrawerItem
label="Functions" label="Functions"
path={SettingsPath.ServerlessFunctions} path={SettingsPath.ServerlessFunctions}
Icon={IconFunction} Icon={IconFunction}
/> />
)} </StyledContainer>
</NavigationDrawerSection> )}
</StyledContainer> </NavigationDrawerSection>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>

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

@ -5,7 +5,7 @@ import {
CardContent, CardContent,
CardFooter, CardFooter,
IconPlus, IconPlus,
IconTool, IconPoint,
LightButton, LightButton,
MAIN_COLORS, MAIN_COLORS,
} from 'twenty-ui'; } from 'twenty-ui';
@ -104,7 +104,7 @@ const StyledIconContainer = styled.div`
margin-top: ${({ theme }) => theme.spacing(1)}; margin-top: ${({ theme }) => theme.spacing(1)};
`; `;
const StyledIconTool = styled(IconTool)` const StyledIconPoint = styled(IconPoint)`
margin-right: ${({ theme }) => theme.spacing(0.5)}; margin-right: ${({ theme }) => theme.spacing(0.5)};
`; `;
@ -253,7 +253,11 @@ export const SettingsDataModelFieldSelectForm = ({
<AdvancedSettingsWrapper dimension="width" hideIcon={true}> <AdvancedSettingsWrapper dimension="width" hideIcon={true}>
<StyledApiKeyContainer> <StyledApiKeyContainer>
<StyledIconContainer> <StyledIconContainer>
<StyledIconTool size={12} color={MAIN_COLORS.yellow} /> <StyledIconPoint
size={12}
color={MAIN_COLORS.yellow}
fill={MAIN_COLORS.yellow}
/>
</StyledIconContainer> </StyledIconContainer>
<StyledApiKey>API values</StyledApiKey> <StyledApiKey>API values</StyledApiKey>
</StyledApiKeyContainer> </StyledApiKeyContainer>

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

@ -223,36 +223,36 @@ export const SettingsDataModelObjectAboutForm = ({
)} )}
/> />
<StyledAdvancedSettingsOuterContainer> <StyledAdvancedSettingsOuterContainer>
<AdvancedSettingsWrapper> <StyledAdvancedSettingsContainer>
<StyledAdvancedSettingsContainer> <StyledAdvancedSettingsSectionInputWrapper>
<StyledAdvancedSettingsSectionInputWrapper> {[
{[ {
{ label: 'API Name (Singular)',
label: 'API Name (Singular)', fieldName: 'nameSingular' as const,
fieldName: 'nameSingular' as const, placeholder: 'listing',
placeholder: 'listing', defaultValue: objectMetadataItem?.nameSingular,
defaultValue: objectMetadataItem?.nameSingular, disableEdition: disableEdition || isLabelSyncedWithName,
disableEdition: disableEdition || isLabelSyncedWithName, tooltip: apiNameTooltipText,
tooltip: apiNameTooltipText, },
}, {
{ label: 'API Name (Plural)',
label: 'API Name (Plural)', fieldName: 'namePlural' as const,
fieldName: 'namePlural' as const, placeholder: 'listings',
placeholder: 'listings', defaultValue: objectMetadataItem?.namePlural,
defaultValue: objectMetadataItem?.namePlural, disableEdition: disableEdition || isLabelSyncedWithName,
disableEdition: disableEdition || isLabelSyncedWithName, tooltip: apiNameTooltipText,
tooltip: apiNameTooltipText, },
}, ].map(
].map( ({
({ defaultValue,
defaultValue, fieldName,
fieldName, label,
label, placeholder,
placeholder, disableEdition,
disableEdition, tooltip,
tooltip, }) => (
}) => ( <AdvancedSettingsWrapper key={`object-${fieldName}-text-input`}>
<StyledInputContainer key={`object-${fieldName}-text-input`}> <StyledInputContainer>
<Controller <Controller
name={fieldName} name={fieldName}
control={control} control={control}
@ -294,8 +294,10 @@ export const SettingsDataModelObjectAboutForm = ({
)} )}
/> />
</StyledInputContainer> </StyledInputContainer>
), </AdvancedSettingsWrapper>
)} ),
)}
<AdvancedSettingsWrapper>
<Controller <Controller
name={IS_LABEL_SYNCED_WITH_NAME_LABEL} name={IS_LABEL_SYNCED_WITH_NAME_LABEL}
control={control} control={control}
@ -324,9 +326,9 @@ export const SettingsDataModelObjectAboutForm = ({
</Card> </Card>
)} )}
/> />
</StyledAdvancedSettingsSectionInputWrapper> </AdvancedSettingsWrapper>
</StyledAdvancedSettingsContainer> </StyledAdvancedSettingsSectionInputWrapper>
</AdvancedSettingsWrapper> </StyledAdvancedSettingsContainer>
</StyledAdvancedSettingsOuterContainer> </StyledAdvancedSettingsOuterContainer>
</> </>
); );

10
packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx
View File

@ -24,8 +24,8 @@ import {
IconCodeCircle, IconCodeCircle,
IconListDetails, IconListDetails,
IconPlus, IconPlus,
IconPoint,
IconSettings, IconSettings,
IconTool,
MAIN_COLORS, MAIN_COLORS,
UndecoratedLink, UndecoratedLink,
isDefined, isDefined,
@ -119,7 +119,13 @@ export const SettingsObjectDetailPage = () => {
title: 'Indexes', title: 'Indexes',
Icon: IconCodeCircle, Icon: IconCodeCircle,
hide: !isAdvancedModeEnabled || !isUniqueIndexesEnabled, hide: !isAdvancedModeEnabled || !isUniqueIndexesEnabled,
pill: <IconTool size={12} color={MAIN_COLORS.yellow} />, pill: (
<IconPoint
size={12}
color={MAIN_COLORS.yellow}
fill={MAIN_COLORS.yellow}
/>
),
}, },
]; ];

6
packages/twenty-ui/src/display/icon/components/TablerIcons.ts
View File

@ -188,6 +188,7 @@ export {
IconNumber9, IconNumber9,
IconNumbers, IconNumbers,
IconPaperclip, IconPaperclip,
IconPassword,
IconPencil, IconPencil,
IconPercentage, IconPercentage,
IconPhone, IconPhone,
@ -201,6 +202,7 @@ export {
IconPlaystationSquare, IconPlaystationSquare,
IconPlug, IconPlug,
IconPlus, IconPlus,
IconPoint,
IconPower, IconPower,
IconPresentation, IconPresentation,
IconPrinter, IconPrinter,
@ -241,7 +243,6 @@ export {
IconTextSize, IconTextSize,
IconTextWrap, IconTextWrap,
IconTimelineEvent, IconTimelineEvent,
IconTool,
IconTrash, IconTrash,
IconUnlink, IconUnlink,
IconUpload, IconUpload,
@ -253,8 +254,7 @@ export {
IconVideo, IconVideo,
IconWand, IconWand,
IconWorld, IconWorld,
IconX, IconX
IconPassword,
} from '@tabler/icons-react'; } from '@tabler/icons-react';
export type { TablerIconsProps } from '@tabler/icons-react'; export type { TablerIconsProps } from '@tabler/icons-react';

15
packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
View File

@ -1,5 +1,5 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { IconTool } from '@ui/display'; import { IconPoint } from '@ui/display';
import { Toggle } from '@ui/input'; import { Toggle } from '@ui/input';
import { MAIN_COLORS } from '@ui/theme'; import { MAIN_COLORS } from '@ui/theme';
import { useId } from 'react'; import { useId } from 'react';
@ -20,10 +20,9 @@ const StyledLabel = styled.label`
`; `;
const StyledIconContainer = styled.div` const StyledIconContainer = styled.div`
border-right: 1px solid ${MAIN_COLORS.yellow};
height: 16px; height: 16px;
position: absolute; position: absolute;
left: ${({ theme }) => theme.spacing(-5)}; left: ${({ theme }) => theme.spacing(-3)};
`; `;
const StyledToggleContainer = styled.div` const StyledToggleContainer = styled.div`
@ -33,8 +32,8 @@ const StyledToggleContainer = styled.div`
width: 100%; width: 100%;
`; `;
const StyledIconTool = styled(IconTool)` const StyledIconPoint = styled(IconPoint)`
margin-right: ${({ theme }) => theme.spacing(0.5)}; margin-right: 0;
`; `;
type AdvancedSettingsToggleProps = { type AdvancedSettingsToggleProps = {
@ -54,7 +53,11 @@ export const AdvancedSettingsToggle = ({
return ( return (
<StyledContainer> <StyledContainer>
<StyledIconContainer> <StyledIconContainer>
<StyledIconTool size={12} color={MAIN_COLORS.yellow} /> <StyledIconPoint
size={12}
color={MAIN_COLORS.yellow}
fill={MAIN_COLORS.yellow}
/>
</StyledIconContainer> </StyledIconContainer>
<StyledToggleContainer> <StyledToggleContainer>
<StyledLabel htmlFor={inputId}>Advanced:</StyledLabel> <StyledLabel htmlFor={inputId}>Advanced:</StyledLabel>