twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-22 03:17:40 +03: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
Show Stats 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 { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
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 { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
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 = () => {
const currentPath = useLocation().pathname;
@ -72,7 +79,7 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
}
return (
<NavigationDrawerSection>
<>
<NavigationDrawerAnimatedCollapseWrapper>
<NavigationDrawerSectionTitle
label="Favorites"
@ -87,7 +94,6 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
}
/>
</NavigationDrawerAnimatedCollapseWrapper>
{isNavigationSectionOpen && (
<>
{isFavoriteFolderEnabled && (
@ -97,41 +103,43 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
)}
{orphanFavorites.length > 0 && (
<DraggableList
onDragEnd={handleReorderFavorite}
draggableItems={orphanFavorites.map((favorite, index) => (
<DraggableItem
key={favorite.id}
draggableId={favorite.id}
index={index}
itemComponent={
<NavigationDrawerItem
key={favorite.id}
className="navigation-drawer-item"
label={favorite.labelIdentifier}
Icon={() => <FavoriteIcon favorite={favorite} />}
active={isLocationMatchingFavorite(
currentPath,
currentViewPath,
favorite,
)}
to={favorite.link}
rightOptions={
<LightIconButton
Icon={IconHeartOff}
onClick={() => deleteFavorite(favorite.id)}
accent="tertiary"
/>
}
isDraggable={true}
/>
}
/>
))}
/>
<StyledFavoriteContainer>
<DraggableList
onDragEnd={handleReorderFavorite}
draggableItems={orphanFavorites.map((favorite, index) => (
<DraggableItem
key={favorite.id}
draggableId={favorite.id}
index={index}
itemComponent={
<NavigationDrawerItem
key={favorite.id}
className="navigation-drawer-item"
label={favorite.labelIdentifier}
Icon={() => <FavoriteIcon favorite={favorite} />}
active={isLocationMatchingFavorite(
currentPath,
currentViewPath,
favorite,
)}
to={favorite.link}
rightOptions={
<LightIconButton
Icon={IconHeartOff}
onClick={() => deleteFavorite(favorite.id)}
accent="tertiary"
/>
}
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 { 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 { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
@ -19,14 +19,16 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import styled from '@emotion/styled';
import { useEffect } from 'react';
const StyledMainSection = styled(NavigationDrawerSection)`
min-height: fit-content;
const StyledContainer = styled.div`
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 = () => {
const isMobile = useIsMobile();
const { toggleCommandMenu } = useCommandMenu();
@ -54,14 +56,12 @@ export const MainNavigationDrawerItems = () => {
: 'main';
useEffect(() => {
if (isMobile) {
setIsNavigationDrawerExpanded(false);
}
setIsNavigationDrawerExpanded(!isMobile);
}, [isMobile, setIsNavigationDrawerExpanded]);
return (
<>
<NavigationDrawerSection isMobile={isMobile}>
<NavigationDrawerSection>
<NavigationDrawerItem
label="Search"
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<{
isSettings?: boolean;
isMobile?: boolean;
}>`
box-sizing: border-box;
display: flex;
flex-direction: ${({ isMobile }) => (isMobile ? 'row' : 'column')};
flex-direction: column;
width: ${NAV_DRAWER_WIDTHS.menu.desktop.expanded}px;
gap: ${({ theme }) => theme.spacing(3)};
height: 100%;
padding: ${({ theme, isSettings, isMobile }) =>
isSettings
? isMobile
? theme.spacing(3, 8)
: theme.spacing(3, 8, 4, 0)
: theme.spacing(3, 2, 2)};
padding: ${({ theme, isSettings }) =>
isSettings ? theme.spacing(3, 8, 4, 0) : theme.spacing(3, 2, 2)};
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 100%;
padding-left: 20px;
padding-right: 20px;
flex-direction: row;
padding: ${({ theme }) => theme.spacing(3)};
}
`;
const StyledItemsContainer = styled.div<{
isMobile?: boolean;
}>`
display: flex;
flex-direction: ${({ isMobile }) => (isMobile ? 'row' : 'column')};
margin-bottom: auto;
flex-direction: column;
overflow: hidden;
gap: ${({ theme }) => theme.spacing(3)};
flex: 1;
@media (max-width: ${MOBILE_VIEWPORT}px) {
flex-direction: row;
}
`;
export const NavigationDrawer = ({
@ -109,7 +110,6 @@ export const NavigationDrawer = ({
>
<StyledContainer
isSettings={isSettingsDrawer}
isMobile={isMobile}
onMouseEnter={handleHover}
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 { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { isNonEmptyString } from '@sniptt/guards';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton';
const StyledContainer = styled.div`
align-items: center;
display: flex;
height: ${({ theme }) => theme.spacing(7)};
height: ${({ theme }) => theme.spacing(8)};
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)`
gap: ${({ theme }) => theme.spacing(2)};
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;
}>`
display: flex;
width: ${({ isMobile }) => (isMobile ? 'auto' : '100%')};
flex-grow: ${({ isMobile }) => (isMobile ? 1 : 0)};
width: 100%;
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`
@ -167,12 +175,10 @@ const StyledSpacer = styled.span`
`;
const StyledRightOptionsContainer = styled.div<{
isMobile: boolean;
active: boolean;
}>`
margin-left: auto;
visibility: ${({ isMobile, active }) =>
isMobile || active ? 'visible' : 'hidden'};
visibility: ${({ active }) => (active ? 'visible' : 'hidden')};
display: flex;
align-items: center;
justify-content: center;
@ -185,6 +191,10 @@ const StyledRightOptionsContainer = styled.div<{
.navigation-drawer-item:hover & {
visibility: visible;
}
@media (max-width: ${MOBILE_VIEWPORT}px) {
visibility: 'visible';
}
`;
export const NavigationDrawerItem = ({
@ -283,7 +293,6 @@ export const NavigationDrawerItem = ({
<NavigationDrawerAnimatedCollapseWrapper>
{rightOptions && (
<StyledRightOptionsContainer
isMobile={isMobile}
active={active || false}
onClick={(e) => {
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,
};
if (!isExpanded) {
animate = { width: 24, flexGrow: 1 };
animate = { width: 32, flexGrow: 1 };
if (isGroup) {
animate = {
width: isMobile ? 'auto' : 24,
width: isMobile ? 'auto' : 32,
flexGrow: isMobile ? 0 : 1,
backgroundColor: theme.background.transparent.lighter,
border: `1px solid ${theme.background.transparent.lighter}`,
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 { MOBILE_VIEWPORT } from 'twenty-ui';
const StyledSection = styled.div<{
isMobile?: boolean;
}>`
const StyledSection = styled.div`
display: flex;
gap: ${({ theme, isMobile }) =>
isMobile ? theme.spacing(3) : theme.betweenSiblingsGap};
margin-bottom: ${({ theme }) => theme.spacing(3)};
gap: ${({ theme }) => theme.betweenSiblingsGap};
overflow: hidden;
flex-direction: ${({ isMobile }) => (isMobile ? 'row' : 'column')};
min-width: ${({ isMobile }) => (isMobile ? '20%' : '')};
flex-direction: column;
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 };