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

Data settings new layout - anchor navigation (#8334)

Browse Source 
Follow-up of https://github.com/twentyhq/twenty/pull/7979
Navigation between settings and fields tabs is now reflected in URL. 
<img width="1106" alt="Capture d’écran 2024-11-07 à 18 38 57"
src="https://github.com/user-attachments/assets/24b153ef-9e68-4aa2-8e3a-6bf70834c5ad">

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Weiko <corentin@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Marie
2024-11-11 14:06:38 +01:00
committed by GitHub
parent 9d6a850ee8
commit bec4da496d
13 changed files with 143 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
View File

@ -1,6 +1,7 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ReactElement } from 'react';
import { Link } from 'react-router-dom';
import { IconComponent, Pill } from 'twenty-ui';
type TabProps = {
@ -12,9 +13,14 @@ type TabProps = {
onClick?: () => void;
disabled?: boolean;
pill?: string | ReactElement;
to?: string;
};
const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
const StyledTab = styled.button<{
active?: boolean;
disabled?: boolean;
to?: string;
}>`
align-items: center;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-color: ${({ theme, active }) =>
@ -26,6 +32,10 @@ const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
? theme.font.color.light
: theme.font.color.secondary};
cursor: pointer;
background-color: transparent;
border-left: none;
border-right: none;
border-top: none;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
@ -33,6 +43,7 @@ const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
margin-bottom: 0;
padding: ${({ theme }) => theme.spacing(2) + ' 0'};
pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
text-decoration: none;
`;
const StyledHover = styled.span`
@ -61,6 +72,7 @@ export const Tab = ({
className,
disabled,
pill,
to,
}: TabProps) => {
const theme = useTheme();
return (
@ -70,6 +82,8 @@ export const Tab = ({
className={className}
disabled={disabled}
data-testid={'tab-' + id}
as={to ? Link : 'button'}
to={to}
>
<StyledHover>
{Icon && <Icon size={theme.icon.size.md} />}