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

1259/add compact view in opportunities (#2182)

Browse Source 
* icons added

* recoil family state added for checking compact view in each card

* recoil state added for toggle button. Wether compact view show or not

* menu item modifed for right side content

* compact view toggle added in dropdown options

* dropdown width increased because compact view text was  overflowing

* compact view added in boardcard

* new animation added for in and out

* compact view enabled state added

* old state deleted

* sizes added in toggle component

* removed extra added code form navigation

* toggle size added in menuitem toggle

* MenuItemToggle added instead of MenuItemNavigate

* Compact view improved
This commit is contained in:
Abhishek Thory
2023-10-24 19:54:25 +05:30
committed by GitHub
parent 350410b0fe
commit bd0b886081
9 changed files with 216 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
front/src/modules/ui/input/components/Toggle.tsx
View File

@ -1,10 +1,13 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
export type ToggleSize = 'small' | 'medium';
type ContainerProps = {
isOn: boolean;
color?: string;
toggleSize: ToggleSize;
};
const StyledContainer = styled.div<ContainerProps>`
@ -14,32 +17,40 @@ const StyledContainer = styled.div<ContainerProps>`
border-radius: 10px;
cursor: pointer;
display: flex;
height: 20px;
height: ${({ toggleSize }) => (toggleSize === 'small' ? 16 : 20)}px;
transition: background-color 0.3s ease;
width: 32px;
width: ${({ toggleSize }) => (toggleSize === 'small' ? 24 : 32)}px;
`;
const StyledCircle = styled(motion.div)`
const StyledCircle = styled(motion.div)<{
toggleSize: ToggleSize;
}>`
background-color: ${({ theme }) => theme.background.primary};
border-radius: 50%;
height: 16px;
width: 16px;
height: ${({ toggleSize }) => (toggleSize === 'small' ? 12 : 16)}px;
width: ${({ toggleSize }) => (toggleSize === 'small' ? 12 : 16)}px;
`;
const circleVariants = {
on: { x: 14 },
off: { x: 2 },
};
export type ToggleProps = {
value?: boolean;
onChange?: (value: boolean) => void;
color?: string;
toggleSize?: ToggleSize;
};
export const Toggle = ({ value, onChange, color }: ToggleProps) => {
export const Toggle = ({
value,
onChange,
color,
toggleSize = 'medium',
}: ToggleProps) => {
const [isOn, setIsOn] = useState(value ?? false);
const circleVariants = {
on: { x: toggleSize === 'small' ? 10 : 14 },
off: { x: 2 },
};
const handleChange = () => {
setIsOn(!isOn);
@ -56,8 +67,17 @@ export const Toggle = ({ value, onChange, color }: ToggleProps) => {
}, [value]);
return (
<StyledContainer onClick={handleChange} isOn={isOn} color={color}>
<StyledCircle animate={isOn ? 'on' : 'off'} variants={circleVariants} />
<StyledContainer
onClick={handleChange}
isOn={isOn}
color={color}
toggleSize={toggleSize}
>
<StyledCircle
animate={isOn ? 'on' : 'off'}
variants={circleVariants}
toggleSize={toggleSize}
/>
</StyledContainer>
);
};