New Settings Layout (#6867)
#### \ Description - **Added "Exit Settings" Back Button**: Introduced a new back button labeled "Exit Settings" for easy navigation back to the app content. - **Implemented Settings Navbar Breadcrumb**: A breadcrumb navigation bar for each settings page has been added to improve navigation within the settings. This ensures users can easily trace their location within the settings. - **Persistent CTA Zone**: The Call-to-Action (CTA) zone at the top of the page now remains visible even when the user scrolls down, preventing unresponsive behavior and improving accessibility. - **Page Title**: The page title has been added to each settings page and separated from the breadcrumb, following the app's layout standards. - we could not reproduce the Billing and CMR Migrations settings on the app, but we updated the files according, please let's us know if is there any way to log in with access to these pages, or if is everything ok. - Some breadcrumbs are not following the Figma, are following the current app sections isntead, because we would need to change the sidebar structure, and we should not do it on this PR ### Demo <https://www.loom.com/share/21b20a2cd2f3471e94d61563c9901b19?sid=9dc49456-6cae-48e1-9149-8d706f00ab65> ### Refs: #6144 Fixes #6144 --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
gitstart-app[bot]
committed by
GitHub
GitHub
parent
fe4ca2133d
commit
c42ea57b97
@ -42,7 +42,7 @@ export const AppNavigationDrawer = ({
|
||||
const drawerProps: NavigationDrawerProps = isSettingsDrawer
|
||||
? {
|
||||
isSubMenu: true,
|
||||
title: 'Settings',
|
||||
title: 'Exit Settings',
|
||||
children: <SettingsNavigationDrawerItems />,
|
||||
footer: <GithubVersionLink />,
|
||||
}
|
||||
|
||||
@ -96,7 +96,7 @@ export const SettingsNavigationDrawerItems = () => {
|
||||
Icon={IconUserCircle}
|
||||
/>
|
||||
<SettingsNavigationDrawerItem
|
||||
label="Appearance"
|
||||
label="Experience"
|
||||
path={SettingsPath.Appearance}
|
||||
Icon={IconColorSwatch}
|
||||
/>
|
||||
|
||||
@ -10,7 +10,7 @@ const StyledSettingsPageContainer = styled.div<{ width?: number }>`
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(8)};
|
||||
overflow: auto;
|
||||
padding: ${({ theme }) => theme.spacing(8)};
|
||||
padding: ${({ theme }) => theme.spacing(6, 8, 8)};
|
||||
width: ${({ width }) => {
|
||||
if (isDefined(width)) {
|
||||
return width + 'px';
|
||||
|
||||
@ -6,7 +6,7 @@ export const SettingsReadDocumentationButton = () => {
|
||||
return (
|
||||
<Button
|
||||
title="Read documentation"
|
||||
variant="primary"
|
||||
variant="secondary"
|
||||
accent="default"
|
||||
size="small"
|
||||
Icon={IconBook2}
|
||||
|
||||
@ -89,7 +89,7 @@ type PageHeaderProps = {
|
||||
hasNextRecord?: boolean;
|
||||
navigateToPreviousRecord?: () => void;
|
||||
navigateToNextRecord?: () => void;
|
||||
Icon: IconComponent;
|
||||
Icon?: IconComponent;
|
||||
children?: ReactNode;
|
||||
width?: number;
|
||||
};
|
||||
|
||||
@ -9,6 +9,7 @@ const StyledPanel = styled.div`
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
padding-bottom: ${({ theme }) => theme.spacing(10)};
|
||||
`;
|
||||
|
||||
type PagePanelProps = {
|
||||
|
||||
@ -2,48 +2,52 @@ import styled from '@emotion/styled';
|
||||
import { JSX, ReactNode } from 'react';
|
||||
import { IconComponent } from 'twenty-ui';
|
||||
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
|
||||
import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSettings';
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbProps,
|
||||
} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
|
||||
import { PageBody } from './PageBody';
|
||||
import { PageHeader } from './PageHeader';
|
||||
|
||||
type SubMenuTopBarContainerProps = {
|
||||
children: JSX.Element | JSX.Element[];
|
||||
title: string | ReactNode;
|
||||
title?: string;
|
||||
actionButton?: ReactNode;
|
||||
Icon: IconComponent;
|
||||
className?: string;
|
||||
links: BreadcrumbProps['links'];
|
||||
};
|
||||
|
||||
const StyledContainer = styled.div<{ isMobile: boolean }>`
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: ${({ theme, isMobile }) => (!isMobile ? theme.spacing(3) : 0)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledTitle = styled.h3`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
font-size: ${({ theme }) => theme.font.size.lg};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
line-height: 1.2;
|
||||
margin: ${({ theme }) => theme.spacing(8, 8, 2)};
|
||||
`;
|
||||
|
||||
export const SubMenuTopBarContainer = ({
|
||||
children,
|
||||
title,
|
||||
actionButton,
|
||||
Icon,
|
||||
className,
|
||||
links,
|
||||
}: SubMenuTopBarContainerProps) => {
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<StyledContainer isMobile={isMobile} className={className}>
|
||||
<PageHeader
|
||||
title={title}
|
||||
Icon={Icon}
|
||||
width={OBJECT_SETTINGS_WIDTH + 4 * 8}
|
||||
>
|
||||
<StyledContainer className={className}>
|
||||
<PageHeader title={<Breadcrumb links={links} />}>
|
||||
{actionButton}
|
||||
</PageHeader>
|
||||
<PageBody>
|
||||
<InformationBannerWrapper />
|
||||
{title && <StyledTitle>{title}</StyledTitle>}
|
||||
{children}
|
||||
</PageBody>
|
||||
</StyledContainer>
|
||||
|
||||
@ -1,27 +1,22 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { CSSProperties, Fragment, ReactNode } from 'react';
|
||||
import { Fragment, ReactNode } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
type BreadcrumbProps = {
|
||||
export type BreadcrumbProps = {
|
||||
className?: string;
|
||||
links: {
|
||||
href?: string;
|
||||
styles?: CSSProperties;
|
||||
children?: string | ReactNode;
|
||||
}[];
|
||||
links: { children: string | ReactNode; href?: string }[];
|
||||
};
|
||||
|
||||
const StyledWrapper = styled.nav`
|
||||
align-items: center;
|
||||
color: ${({ theme }) => theme.font.color.secondary};
|
||||
display: flex;
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
display: grid;
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
// font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
line-height: ${({ theme }) => theme.text.lineHeight.lg};
|
||||
white-space: nowrap;
|
||||
grid-auto-flow: column;
|
||||
grid-column-gap: ${({ theme }) => theme.spacing(1)};
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
height: ${({ theme }) => theme.spacing(8)};
|
||||
`;
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
@ -39,7 +34,10 @@ const StyledText = styled.span`
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
// TODO: not sure that passing styles to the link is a good idea
|
||||
const StyledDivider = styled.span`
|
||||
width: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
export const Breadcrumb = ({ className, links }: BreadcrumbProps) => {
|
||||
return (
|
||||
<StyledWrapper className={className}>
|
||||
@ -49,15 +47,13 @@ export const Breadcrumb = ({ className, links }: BreadcrumbProps) => {
|
||||
return (
|
||||
<Fragment key={index}>
|
||||
{link.href ? (
|
||||
<StyledLink style={link.styles} title={text} to={link.href}>
|
||||
<StyledLink title={text} to={link.href}>
|
||||
{link.children}
|
||||
</StyledLink>
|
||||
) : (
|
||||
<StyledText style={link.styles} title={text}>
|
||||
{link.children}
|
||||
</StyledText>
|
||||
<StyledText title={text}>{link.children}</StyledText>
|
||||
)}
|
||||
{index < links.length - 1 && '/'}
|
||||
{index < links.length - 1 && <StyledDivider>/</StyledDivider>}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { ReactNode, useState } from 'react';
|
||||
import { css, useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ReactNode, useState } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { MOBILE_VIEWPORT } from 'twenty-ui';
|
||||
|
||||
@ -32,7 +32,7 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(3.5)};
|
||||
gap: ${({ theme }) => theme.spacing(3)};
|
||||
height: 100%;
|
||||
min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px;
|
||||
padding: ${({ theme }) => theme.spacing(3, 2, 4)};
|
||||
@ -41,7 +41,6 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
|
||||
isSubMenu
|
||||
? css`
|
||||
padding-right: ${theme.spacing(8)};
|
||||
padding-top: 41px;
|
||||
`
|
||||
: ''}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { IconChevronLeft } from 'twenty-ui';
|
||||
import { IconX } from 'twenty-ui';
|
||||
|
||||
import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
|
||||
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
|
||||
@ -18,17 +18,22 @@ const StyledIconAndButtonContainer = styled.button`
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: ${({ theme }) => theme.font.size.lg};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
line-height: ${({ theme }) => theme.text.lineHeight.md};
|
||||
padding: ${({ theme }) => theme.spacing(1)};
|
||||
padding: ${({ theme }) => theme.spacing(1.5, 1)};
|
||||
width: 100%;
|
||||
font-family: ${({ theme }) => theme.font.family};
|
||||
&:hover {
|
||||
background: ${({ theme }) => theme.background.transparent.light};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: ${({ theme }) => theme.spacing(8)};
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
@ -42,9 +47,10 @@ export const NavigationDrawerBackButton = ({
|
||||
<StyledContainer>
|
||||
<UndecoratedLink to={navigationMemorizedUrl} replace>
|
||||
<StyledIconAndButtonContainer>
|
||||
<IconChevronLeft
|
||||
<IconX
|
||||
size={theme.icon.size.md}
|
||||
stroke={theme.icon.stroke.lg}
|
||||
color={theme.font.color.tertiary}
|
||||
/>
|
||||
<span>{title}</span>
|
||||
</StyledIconAndButtonContainer>
|
||||
|
||||
Reference in New Issue
Block a user