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

Fix workspace logo (#9129)

Browse Source 
Follow up on:
https://github.com/twentyhq/twenty/issues/9042#issuecomment-2550886611
This commit is contained in:
Charles Bochet
2024-12-18 18:09:52 +01:00
committed by GitHub
parent 5586270df4
commit 71254bfca0
4 changed files with 27 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx
View File

@ -8,13 +8,10 @@ import {
NavigationDrawerProps, NavigationDrawerProps,
} from '@/ui/navigation/navigation-drawer/components/NavigationDrawer'; } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState'; import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
import { getImageAbsoluteURI } from 'twenty-shared';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer'; import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
import { MainNavigationDrawerItems } from '@/navigation/components/MainNavigationDrawerItems'; import { MainNavigationDrawerItems } from '@/navigation/components/MainNavigationDrawerItems';
import { isNonEmptyString } from '@sniptt/guards';
import { AdvancedSettingsToggle } from 'twenty-ui'; import { AdvancedSettingsToggle } from 'twenty-ui';
export type AppNavigationDrawerProps = { export type AppNavigationDrawerProps = {
@ -41,15 +38,11 @@ export const AppNavigationDrawer = ({
setIsAdvancedModeEnabled={setIsAdvancedModeEnabled} setIsAdvancedModeEnabled={setIsAdvancedModeEnabled}
/> />
), ),
logo: '',
} }
: { : {
logo: isNonEmptyString(currentWorkspace?.logo) logo: currentWorkspace?.logo ?? '',
? getImageAbsoluteURI({ title: currentWorkspace?.displayName ?? '',
imageUrl: currentWorkspace.logo,
baseUrl: REACT_APP_SERVER_BASE_URL,
})
: undefined,
title: currentWorkspace?.displayName ?? undefined,
children: <MainNavigationDrawerItems />, children: <MainNavigationDrawerItems />,
footer: <SupportDropdown />, footer: <SupportDropdown />,
}; };

21
packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx
View File

@ -1,12 +1,11 @@
import { SupportDropdown } from '@/support/components/SupportDropdown'; import { SupportDropdown } from '@/support/components/SupportDropdown';
import { import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
NavigationDrawer,
NavigationDrawerProps,
} from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
import { NavigationDrawerSectionForObjectMetadataItems } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems'; import { NavigationDrawerSectionForObjectMetadataItems } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems';
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 { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { IconSearch, IconSettings, useIsMobile } from 'twenty-ui'; import { IconSearch, IconSettings, useIsMobile } from 'twenty-ui';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
@ -62,14 +61,14 @@ export const SignInAppNavigationDrawerMock = ({
const footer = <SupportDropdown />; const footer = <SupportDropdown />;
const drawerProps: NavigationDrawerProps = {
children,
footer,
};
return ( return (
<NavigationDrawer className={className} footer={drawerProps.footer}> <NavigationDrawer
{drawerProps.children} className={className}
footer={footer}
logo={DEFAULT_WORKSPACE_LOGO}
title={DEFAULT_WORKSPACE_NAME}
>
{children}
</NavigationDrawer> </NavigationDrawer>
); );
}; };

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

@ -19,7 +19,7 @@ export type NavigationDrawerProps = {
className?: string; className?: string;
footer?: ReactNode; footer?: ReactNode;
logo?: string; logo?: string;
title?: string; title: string;
}; };
const StyledAnimatedContainer = styled(motion.div)<{ isSettings?: boolean }>` const StyledAnimatedContainer = styled(motion.div)<{ isSettings?: boolean }>`
@ -111,15 +111,15 @@ export const NavigationDrawer = ({
onMouseEnter={handleHover} onMouseEnter={handleHover}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
> >
{isSettingsDrawer && title ? ( {isSettingsDrawer && title
!isMobile && <NavigationDrawerBackButton title={title} /> ? !isMobile && <NavigationDrawerBackButton title={title} />
) : ( : logo && (
<NavigationDrawerHeader <NavigationDrawerHeader
name={title} name={title}
logo={logo} logo={logo}
showCollapseButton={isHovered} showCollapseButton={isHovered}
/> />
)} )}
<StyledItemsContainer isSettings={isSettingsDrawer}> <StyledItemsContainer isSettings={isSettingsDrawer}>
{children} {children}
</StyledItemsContainer> </StyledItemsContainer>

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

@ -3,8 +3,6 @@ import { useRecoilValue } from 'recoil';
import { workspacesState } from '@/auth/states/workspaces'; import { workspacesState } from '@/auth/states/workspaces';
import { MultiWorkspaceDropdownButton } from '@/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton'; import { MultiWorkspaceDropdownButton } from '@/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton';
import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState'; import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
@ -41,14 +39,14 @@ const StyledNavigationDrawerCollapseButton = styled(
`; `;
type NavigationDrawerHeaderProps = { type NavigationDrawerHeaderProps = {
name?: string; name: string;
logo?: string; logo: string;
showCollapseButton: boolean; showCollapseButton: boolean;
}; };
export const NavigationDrawerHeader = ({ export const NavigationDrawerHeader = ({
name = DEFAULT_WORKSPACE_NAME, name,
logo = DEFAULT_WORKSPACE_LOGO, logo,
showCollapseButton, showCollapseButton,
}: NavigationDrawerHeaderProps) => { }: NavigationDrawerHeaderProps) => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();