1259/add compact view in opportunities (#2182)

* 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

front/src/modules/ui/display/icon/index.ts

@@ -11,6 +11,7 @@ export {
   IconArrowRight,
   IconArrowUp,
   IconArrowUpRight,
+  IconBaselineDensitySmall,
   IconBell,
   IconBox,
   IconBrandGithub,

front/src/modules/ui/input/components/Toggle.tsx

@@ -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>
   );
 };

front/src/modules/ui/layout/board/components/BoardOptionsDropdown.tsx

@@ -35,6 +35,7 @@ export const BoardOptionsDropdown = ({
         }
         dropdownHotkeyScope={customHotkeyScope}
         onClickOutside={resetViewEditMode}
+        dropdownMenuWidth={170}
       />
     </DropdownScope>
   );

front/src/modules/ui/layout/board/components/BoardOptionsDropdownContent.tsx

@@ -15,6 +15,7 @@ import { currentViewScopedSelector } from '@/ui/data/view-bar/states/selectors/c
 import { viewsByIdScopedSelector } from '@/ui/data/view-bar/states/selectors/viewsByIdScopedSelector';
 import { viewEditModeState } from '@/ui/data/view-bar/states/viewEditModeState';
 import {
+  IconBaselineDensitySmall,
   IconChevronLeft,
   IconLayoutKanban,
   IconPlus,
@@ -28,6 +29,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate';
+import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle';
 import { ThemeColor } from '@/ui/theme/constants/colors';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@@ -37,6 +39,7 @@ import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilSco
 import { useBoardCardFields } from '../hooks/useBoardCardFields';
 import { boardCardFieldsScopedState } from '../states/boardCardFieldsScopedState';
 import { boardColumnsState } from '../states/boardColumnsState';
+import { isCompactViewEnabledState } from '../states/isCompactViewEnabledState';
 import { savedBoardCardFieldsFamilyState } from '../states/savedBoardCardFieldsFamilyState';
 import { hiddenBoardCardFieldsScopedSelector } from '../states/selectors/hiddenBoardCardFieldsScopedSelector';
 import { visibleBoardCardFieldsScopedSelector } from '../states/selectors/visibleBoardCardFieldsScopedSelector';
@@ -72,6 +75,9 @@ export const BoardOptionsDropdownContent = ({
   >();
 
   const [boardColumns, setBoardColumns] = useRecoilState(boardColumnsState);
+  const [isCompactViewEnabled, setIsCompactViewEnabled] = useRecoilState(
+    isCompactViewEnabledState,
+  );
 
   const hiddenBoardCardFields = useRecoilScopedValue(
     hiddenBoardCardFieldsScopedSelector,
@@ -194,6 +200,16 @@ export const BoardOptionsDropdownContent = ({
               text="Stages"
             />
           </DropdownMenuItemsContainer>
+          <DropdownMenuSeparator />
+          <DropdownMenuItemsContainer>
+            <MenuItemToggle
+              LeftIcon={IconBaselineDensitySmall}
+              onToggleChange={setIsCompactViewEnabled}
+              toggled={isCompactViewEnabled}
+              text="Compact view"
+              toggleSize="small"
+            />
+          </DropdownMenuItemsContainer>
         </>
       )}
       {currentMenu === 'stages' && (

front/src/modules/ui/layout/board/states/isCardInCompactViewState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const isCardInCompactViewState = atomFamily<boolean, string>({
+  key: 'isCardInCompactViewState',
+  default: true,
+});

front/src/modules/ui/layout/board/states/isCompactViewEnabledState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isCompactViewEnabledState = atom<boolean>({
+  key: 'isCompactViewEnabledState',
+  default: false,
+});

front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx

@@ -1,15 +1,19 @@
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { Toggle } from '@/ui/input/components/Toggle';
+import { Toggle, ToggleSize } from '@/ui/input/components/Toggle';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
-import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
+import {
+  StyledMenuItemBase,
+  StyledMenuItemRightContent,
+} from '../internals/components/StyledMenuItemBase';
 
 type MenuItemToggleProps = {
   LeftIcon?: IconComponent;
   toggled: boolean;
   text: string;
-  className: string;
+  className?: string;
   onToggleChange?: (toggled: boolean) => void;
+  toggleSize?: ToggleSize;
 };
 
 export const MenuItemToggle = ({
@@ -18,6 +22,7 @@ export const MenuItemToggle = ({
   toggled,
   className,
   onToggleChange,
+  toggleSize,
 }: MenuItemToggleProps) => {
   const handleOnClick = () => {
     onToggleChange?.(!toggled);
@@ -26,7 +31,13 @@ export const MenuItemToggle = ({
   return (
     <StyledMenuItemBase className={className} onClick={handleOnClick}>
       <MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
-      <Toggle value={toggled} onChange={onToggleChange} />
+      <StyledMenuItemRightContent>
+        <Toggle
+          value={toggled}
+          onChange={onToggleChange}
+          toggleSize={toggleSize}
+        />
+      </StyledMenuItemRightContent>
     </StyledMenuItemBase>
   );
 };

front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx

@@ -0,0 +1,45 @@
+import { useTheme } from '@emotion/react';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { AnimationDuration } from '@/ui/theme/constants/animation';
+
+type AnimatedEaseInOutProps = {
+  isOpen: boolean;
+  children: React.ReactNode;
+  duration?: AnimationDuration;
+  marginBottom?: string;
+  marginTop?: string;
+};
+
+export const AnimatedEaseInOut = ({
+  children,
+  isOpen,
+  marginBottom,
+  marginTop,
+  duration = 'normal',
+}: AnimatedEaseInOutProps) => {
+  const theme = useTheme();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{
+            marginBottom: marginBottom ?? 0,
+            marginTop: marginTop ?? 0,
+            height: 0,
+            opacity: 0,
+          }}
+          animate={{ height: 100, opacity: 1 }}
+          exit={{ height: 0, opacity: 0, marginBottom: 0, marginTop: 0 }}
+          transition={{
+            duration: theme.animation.duration[duration],
+            ease: 'easeInOut',
+          }}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};