scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-31 20:57:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Lucas Bordeau
2024-11-20 11:01:06 +01:00
parent 78d7914c57
commit 381da399b1
7 changed files with 110 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx
View File

@@ -22,10 +22,17 @@ import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableIt
import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList'; import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper'; import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle'; import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection'; import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import styled from '@emotion/styled';
const StyledFavoriteContainer = styled.div`
border: 1px solid ${({ theme }) => theme.border.color.light};
display: flex;
flex-direction: column;
`;
export const CurrentWorkspaceMemberFavoritesFolders = () => { export const CurrentWorkspaceMemberFavoritesFolders = () => {
const currentPath = useLocation().pathname; const currentPath = useLocation().pathname;
@@ -72,7 +79,7 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
} }
return ( return (
<NavigationDrawerSection> <>
<NavigationDrawerAnimatedCollapseWrapper> <NavigationDrawerAnimatedCollapseWrapper>
<NavigationDrawerSectionTitle <NavigationDrawerSectionTitle
label="Favorites" label="Favorites"
@@ -87,7 +94,6 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
} }
/> />
</NavigationDrawerAnimatedCollapseWrapper> </NavigationDrawerAnimatedCollapseWrapper>
{isNavigationSectionOpen && ( {isNavigationSectionOpen && (
<> <>
{isFavoriteFolderEnabled && ( {isFavoriteFolderEnabled && (
@@ -97,41 +103,43 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
)} )}
{orphanFavorites.length > 0 && ( {orphanFavorites.length > 0 && (
<DraggableList <StyledFavoriteContainer>
onDragEnd={handleReorderFavorite} <DraggableList
draggableItems={orphanFavorites.map((favorite, index) => ( onDragEnd={handleReorderFavorite}
<DraggableItem draggableItems={orphanFavorites.map((favorite, index) => (
key={favorite.id} <DraggableItem
draggableId={favorite.id} key={favorite.id}
index={index} draggableId={favorite.id}
itemComponent={ index={index}
<NavigationDrawerItem itemComponent={
key={favorite.id} <NavigationDrawerItem
className="navigation-drawer-item" key={favorite.id}
label={favorite.labelIdentifier} className="navigation-drawer-item"
Icon={() => <FavoriteIcon favorite={favorite} />} label={favorite.labelIdentifier}
active={isLocationMatchingFavorite( Icon={() => <FavoriteIcon favorite={favorite} />}
currentPath, active={isLocationMatchingFavorite(
currentViewPath, currentPath,
favorite, currentViewPath,
)} favorite,
to={favorite.link} )}
rightOptions={ to={favorite.link}
<LightIconButton rightOptions={
Icon={IconHeartOff} <LightIconButton
onClick={() => deleteFavorite(favorite.id)} Icon={IconHeartOff}
accent="tertiary" onClick={() => deleteFavorite(favorite.id)}
/> accent="tertiary"
} />
isDraggable={true} }
/> isDraggable={true}
} />
/> }
))} />
/> ))}
/>
</StyledFavoriteContainer>
)} )}
</> </>
)} )}
</NavigationDrawerSection> </>
); );
}; };

22
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
View File

@@ -1,6 +1,6 @@
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { useRecoilState, useSetRecoilState } from 'recoil'; import { useRecoilState, useSetRecoilState } from 'recoil';
import { IconSearch, IconSettings } from 'twenty-ui'; import { IconSearch, IconSettings, MOBILE_VIEWPORT } from 'twenty-ui';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState'; import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
@@ -19,14 +19,16 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useEffect } from 'react'; import { useEffect } from 'react';
const StyledMainSection = styled(NavigationDrawerSection)` const StyledContainer = styled.div`
min-height: fit-content; display: flex;
flex-direction: column;
@media (max-width: ${MOBILE_VIEWPORT}px) {
flex-direction: row;
height: ${({ theme }) => theme.spacing(8)};
}
`; `;
const StyledContainer = styled.div`
overflow-x: hidden;
overflow-y: auto;
`;
export const MainNavigationDrawerItems = () => { export const MainNavigationDrawerItems = () => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const { toggleCommandMenu } = useCommandMenu(); const { toggleCommandMenu } = useCommandMenu();
@@ -54,14 +56,12 @@ export const MainNavigationDrawerItems = () => {
: 'main'; : 'main';
useEffect(() => { useEffect(() => {
if (isMobile) { setIsNavigationDrawerExpanded(!isMobile);
setIsNavigationDrawerExpanded(false);
}
}, [isMobile, setIsNavigationDrawerExpanded]); }, [isMobile, setIsNavigationDrawerExpanded]);
return ( return (
<> <>
<NavigationDrawerSection isMobile={isMobile}> <NavigationDrawerSection>
<NavigationDrawerItem <NavigationDrawerItem
label="Search" label="Search"
Icon={IconSearch} Icon={IconSearch}

26
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
View File

@@ -29,36 +29,37 @@ const StyledAnimatedContainer = styled(motion.div)<{ isSettings?: boolean }>`
const StyledContainer = styled.div<{ const StyledContainer = styled.div<{
isSettings?: boolean; isSettings?: boolean;
isMobile?: boolean;
}>` }>`
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: ${({ isMobile }) => (isMobile ? 'row' : 'column')}; flex-direction: column;
width: ${NAV_DRAWER_WIDTHS.menu.desktop.expanded}px; width: ${NAV_DRAWER_WIDTHS.menu.desktop.expanded}px;
gap: ${({ theme }) => theme.spacing(3)}; gap: ${({ theme }) => theme.spacing(3)};
height: 100%; height: 100%;
padding: ${({ theme, isSettings, isMobile }) => padding: ${({ theme, isSettings }) =>
isSettings isSettings ? theme.spacing(3, 8, 4, 0) : theme.spacing(3, 2, 2)};
? isMobile
? theme.spacing(3, 8)
: theme.spacing(3, 8, 4, 0)
: theme.spacing(3, 2, 2)};
@media (max-width: ${MOBILE_VIEWPORT}px) { @media (max-width: ${MOBILE_VIEWPORT}px) {
width: 100%; width: 100%;
padding-left: 20px;
padding-right: 20px; flex-direction: row;
padding: ${({ theme }) => theme.spacing(3)};
} }
`; `;
const StyledItemsContainer = styled.div<{ const StyledItemsContainer = styled.div<{
isMobile?: boolean; isMobile?: boolean;
}>` }>`
display: flex; display: flex;
flex-direction: ${({ isMobile }) => (isMobile ? 'row' : 'column')}; flex-direction: column;
margin-bottom: auto;
overflow: hidden; overflow: hidden;
gap: ${({ theme }) => theme.spacing(3)}; gap: ${({ theme }) => theme.spacing(3)};
flex: 1; flex: 1;
@media (max-width: ${MOBILE_VIEWPORT}px) {
flex-direction: row;
}
`; `;
export const NavigationDrawer = ({ export const NavigationDrawer = ({
@@ -109,7 +110,6 @@ export const NavigationDrawer = ({
> >
<StyledContainer <StyledContainer
isSettings={isSettingsDrawer} isSettings={isSettingsDrawer}
isMobile={isMobile}
onMouseEnter={handleHover} onMouseEnter={handleHover}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
> >

12
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
View File

@@ -10,14 +10,24 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper'; import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { isNonEmptyString } from '@sniptt/guards'; import { isNonEmptyString } from '@sniptt/guards';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton'; import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton';
const StyledContainer = styled.div` const StyledContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
height: ${({ theme }) => theme.spacing(7)}; height: ${({ theme }) => theme.spacing(8)};
user-select: none; user-select: none;
@media (max-width: ${MOBILE_VIEWPORT}px) {
height: ${({ theme }) => theme.spacing(8)};
width: ${({ theme }) => theme.spacing(8)};
align-items: center;
justify-content: center;
}
`; `;
const StyledSingleWorkspaceContainer = styled(StyledContainer)` const StyledSingleWorkspaceContainer = styled(StyledContainer)`
gap: ${({ theme }) => theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};

21
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
View File

@@ -158,8 +158,16 @@ const StyledNavigationDrawerItemContainer = styled.div<{
isMobile?: boolean; isMobile?: boolean;
}>` }>`
display: flex; display: flex;
width: ${({ isMobile }) => (isMobile ? 'auto' : '100%')}; width: 100%;
flex-grow: ${({ isMobile }) => (isMobile ? 1 : 0)}; flex-grow: 0;
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: ${({ theme }) => theme.spacing(8)};
height: ${({ theme }) => theme.spacing(8)};
align-items: center;
justify-content: center;
}
`; `;
const StyledSpacer = styled.span` const StyledSpacer = styled.span`
@@ -167,12 +175,10 @@ const StyledSpacer = styled.span`
`; `;
const StyledRightOptionsContainer = styled.div<{ const StyledRightOptionsContainer = styled.div<{
isMobile: boolean;
active: boolean; active: boolean;
}>` }>`
margin-left: auto; margin-left: auto;
visibility: ${({ isMobile, active }) => visibility: ${({ active }) => (active ? 'visible' : 'hidden')};
isMobile || active ? 'visible' : 'hidden'};
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -185,6 +191,10 @@ const StyledRightOptionsContainer = styled.div<{
.navigation-drawer-item:hover & { .navigation-drawer-item:hover & {
visibility: visible; visibility: visible;
} }
@media (max-width: ${MOBILE_VIEWPORT}px) {
visibility: 'visible';
}
`; `;
export const NavigationDrawerItem = ({ export const NavigationDrawerItem = ({
@@ -283,7 +293,6 @@ export const NavigationDrawerItem = ({
<NavigationDrawerAnimatedCollapseWrapper> <NavigationDrawerAnimatedCollapseWrapper>
{rightOptions && ( {rightOptions && (
<StyledRightOptionsContainer <StyledRightOptionsContainer
isMobile={isMobile}
active={active || false} active={active || false}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();

5
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx
View File

@@ -32,10 +32,11 @@ export const NavigationDrawerItemsCollapsableContainer = ({
flexGrow: 1, flexGrow: 1,
}; };
if (!isExpanded) { if (!isExpanded) {
animate = { width: 24, flexGrow: 1 }; animate = { width: 32, flexGrow: 1 };
if (isGroup) { if (isGroup) {
animate = { animate = {
width: isMobile ? 'auto' : 24, width: isMobile ? 'auto' : 32,
flexGrow: isMobile ? 0 : 1,
backgroundColor: theme.background.transparent.lighter, backgroundColor: theme.background.transparent.lighter,
border: `1px solid ${theme.background.transparent.lighter}`, border: `1px solid ${theme.background.transparent.lighter}`,
borderRadius: theme.border.radius.sm, borderRadius: theme.border.radius.sm,

21
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
View File

@@ -1,16 +1,21 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { MOBILE_VIEWPORT } from 'twenty-ui';
const StyledSection = styled.div<{ const StyledSection = styled.div`
isMobile?: boolean;
}>`
display: flex; display: flex;
gap: ${({ theme, isMobile }) => gap: ${({ theme }) => theme.betweenSiblingsGap};
isMobile ? theme.spacing(3) : theme.betweenSiblingsGap};
margin-bottom: ${({ theme }) => theme.spacing(3)};
overflow: hidden; overflow: hidden;
flex-direction: ${({ isMobile }) => (isMobile ? 'row' : 'column')}; flex-direction: column;
min-width: ${({ isMobile }) => (isMobile ? '20%' : '')};
flex-shrink: 1; flex-shrink: 1;
min-height: fit-content;
@media (max-width: ${MOBILE_VIEWPORT}px) {
gap: ${({ theme }) => theme.spacing(0.5)};
flex-direction: row;
min-width: fit-content;
height: ${({ theme }) => theme.spacing(8)};
}
`; `;
export { StyledSection as NavigationDrawerSection }; export { StyledSection as NavigationDrawerSection };