forked from twentyhq/twenty
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Settings Option Card component (twentyhq#8456)
fixes - twentyhq#8195 --------- Co-authored-by: Charles Bochet <[email protected]>
- Loading branch information
1 parent
ade1c57
commit 2f5dc26
Showing
56 changed files
with
931 additions
and
920 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 68 additions & 0 deletions
68
packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { useExpandedAnimation } from '@/settings/hooks/useExpandedAnimation'; | ||
| import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState'; | ||
| import styled from '@emotion/styled'; | ||
| import { AnimatePresence, motion } from 'framer-motion'; | ||
| import { useRecoilValue } from 'recoil'; | ||
| import { IconTool, MAIN_COLORS } from 'twenty-ui'; | ||
|
|
||
| const StyledAdvancedWrapper = styled.div` | ||
| position: relative; | ||
| width: 100%; | ||
| `; | ||
|
|
||
| const StyledIconContainer = styled.div` | ||
| border-right: 1px solid ${MAIN_COLORS.yellow}; | ||
| display: flex; | ||
| height: 100%; | ||
| left: ${({ theme }) => theme.spacing(-6)}; | ||
| position: absolute; | ||
| top: 0; | ||
| `; | ||
|
|
||
| const StyledContent = styled.div` | ||
| width: 100%; | ||
| `; | ||
| const StyledIconTool = styled(IconTool)` | ||
| margin-right: ${({ theme }) => theme.spacing(0.5)}; | ||
| `; | ||
|
|
||
| type AdvancedSettingsWrapperProps = { | ||
| children: React.ReactNode; | ||
| dimension?: 'width' | 'height'; | ||
| hideIcon?: boolean; | ||
| }; | ||
|
|
||
| export const AdvancedSettingsWrapper = ({ | ||
| children, | ||
| dimension = 'height', | ||
| hideIcon = false, | ||
| }: AdvancedSettingsWrapperProps) => { | ||
| const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState); | ||
| const { contentRef, motionAnimationVariants } = useExpandedAnimation( | ||
| isAdvancedModeEnabled, | ||
| dimension, | ||
| ); | ||
|
|
||
| return ( | ||
| <AnimatePresence> | ||
| {isAdvancedModeEnabled && ( | ||
| <motion.div | ||
| ref={contentRef} | ||
| initial="initial" | ||
| animate="animate" | ||
| exit="exit" | ||
| variants={motionAnimationVariants} | ||
| > | ||
| <StyledAdvancedWrapper> | ||
| {!hideIcon && ( | ||
| <StyledIconContainer> | ||
| <StyledIconTool size={12} color={MAIN_COLORS.yellow} /> | ||
| </StyledIconContainer> | ||
| )} | ||
| <StyledContent>{children}</StyledContent> | ||
| </StyledAdvancedWrapper> | ||
| </motion.div> | ||
| )} | ||
| </AnimatePresence> | ||
| ); | ||
| }; |
103 changes: 103 additions & 0 deletions
103
packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import { TextInput } from '@/ui/input/components/TextInput'; | ||
| import styled from '@emotion/styled'; | ||
| import { Button, IconMinus, IconPlus } from 'twenty-ui'; | ||
| import { castAsNumberOrNull } from '~/utils/cast-as-number-or-null'; | ||
|
|
||
| type SettingsCounterProps = { | ||
| value: number; | ||
| onChange: (value: number) => void; | ||
| minValue?: number; | ||
| maxValue?: number; | ||
| disabled?: boolean; | ||
| }; | ||
|
|
||
| const StyledCounterContainer = styled.div` | ||
| align-items: center; | ||
| display: flex; | ||
| gap: ${({ theme }) => theme.spacing(1)}; | ||
| margin-left: auto; | ||
| width: ${({ theme }) => theme.spacing(30)}; | ||
| `; | ||
|
|
||
| const StyledTextInput = styled(TextInput)` | ||
| width: ${({ theme }) => theme.spacing(16)}; | ||
| input { | ||
| width: ${({ theme }) => theme.spacing(16)}; | ||
| height: ${({ theme }) => theme.spacing(6)}; | ||
| text-align: center; | ||
| font-weight: ${({ theme }) => theme.font.weight.medium}; | ||
| } | ||
| `; | ||
|
|
||
| const StyledControlButton = styled(Button)` | ||
| height: ${({ theme }) => theme.spacing(6)}; | ||
| width: ${({ theme }) => theme.spacing(6)}; | ||
| padding: 0; | ||
| justify-content: center; | ||
| svg { | ||
| height: ${({ theme }) => theme.spacing(4)}; | ||
| width: ${({ theme }) => theme.spacing(4)}; | ||
| } | ||
| `; | ||
|
|
||
| export const SettingsCounter = ({ | ||
| value, | ||
| onChange, | ||
| minValue = 0, | ||
| maxValue = 100, | ||
| disabled = false, | ||
| }: SettingsCounterProps) => { | ||
| const handleIncrementCounter = () => { | ||
| if (value < maxValue) { | ||
| onChange(value + 1); | ||
| } | ||
| }; | ||
|
|
||
| const handleDecrementCounter = () => { | ||
| if (value > minValue) { | ||
| onChange(value - 1); | ||
| } | ||
| }; | ||
|
|
||
| const handleTextInputChange = (value: string) => { | ||
| const castedNumber = castAsNumberOrNull(value); | ||
| if (castedNumber === null) { | ||
| onChange(minValue); | ||
| return; | ||
| } | ||
|
|
||
| if (castedNumber < minValue) { | ||
| return; | ||
| } | ||
|
|
||
| if (castedNumber > maxValue) { | ||
| onChange(maxValue); | ||
| return; | ||
| } | ||
| onChange(castedNumber); | ||
| }; | ||
|
|
||
| return ( | ||
| <StyledCounterContainer> | ||
| <StyledControlButton | ||
| variant="secondary" | ||
| onClick={handleDecrementCounter} | ||
| Icon={IconMinus} | ||
| disabled={disabled} | ||
| /> | ||
| <StyledTextInput | ||
| name="counter" | ||
| fullWidth | ||
| value={value.toString()} | ||
| onChange={handleTextInputChange} | ||
| disabled={disabled} | ||
| /> | ||
| <StyledControlButton | ||
| variant="secondary" | ||
| onClick={handleIncrementCounter} | ||
| Icon={IconPlus} | ||
| disabled={disabled} | ||
| /> | ||
| </StyledCounterContainer> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
95 changes: 0 additions & 95 deletions
95
packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.