diff --git a/front/src/modules/ui/layout/components/PageAddButton.tsx b/front/src/modules/ui/layout/components/PageAddButton.tsx new file mode 100644 index 0000000000..80e093675c --- /dev/null +++ b/front/src/modules/ui/layout/components/PageAddButton.tsx @@ -0,0 +1,19 @@ +import { IconButton } from '@/ui/button/components/IconButton'; +import { IconPlus } from '@/ui/icon'; + +type OwnProps = { + onClick: () => void; +}; + +export function PageAddButton({ onClick }: OwnProps) { + return ( + } + size="medium" + variant="secondary" + data-testid="add-button" + accent="default" + onClick={onClick} + /> + ); +} diff --git a/front/src/modules/ui/layout/components/PageBody.tsx b/front/src/modules/ui/layout/components/PageBody.tsx index bc8e1757c1..201381e99f 100644 --- a/front/src/modules/ui/layout/components/PageBody.tsx +++ b/front/src/modules/ui/layout/components/PageBody.tsx @@ -1,5 +1,4 @@ -import { PAGE_BAR_MIN_HEIGHT } from '../page-bar/components/PageBar'; - +import { PAGE_BAR_MIN_HEIGHT } from './PageHeader'; import { RightDrawerContainer } from './RightDrawerContainer'; type OwnProps = { diff --git a/front/src/modules/ui/layout/components/PageFavoriteButton.tsx b/front/src/modules/ui/layout/components/PageFavoriteButton.tsx new file mode 100644 index 0000000000..ac9a4b203b --- /dev/null +++ b/front/src/modules/ui/layout/components/PageFavoriteButton.tsx @@ -0,0 +1,20 @@ +import { IconButton } from '@/ui/button/components/IconButton'; +import { IconHeart } from '@/ui/icon'; + +type OwnProps = { + isFavorite: boolean; + onClick: () => void; +}; + +export function PageFavoriteButton({ isFavorite, onClick }: OwnProps) { + return ( + } + size="medium" + variant="secondary" + data-testid="add-button" + accent={isFavorite ? 'danger' : 'default'} + onClick={onClick} + /> + ); +} diff --git a/front/src/modules/ui/layout/components/PageHeader.tsx b/front/src/modules/ui/layout/components/PageHeader.tsx index 82a4beebdc..b2bec82eef 100644 --- a/front/src/modules/ui/layout/components/PageHeader.tsx +++ b/front/src/modules/ui/layout/components/PageHeader.tsx @@ -67,7 +67,7 @@ type OwnProps = { title: string; hasBackButton?: boolean; icon: ReactNode; - children: JSX.Element | JSX.Element[]; + children?: JSX.Element | JSX.Element[]; }; export function PageHeader({ title, hasBackButton, icon, children }: OwnProps) { diff --git a/front/src/modules/ui/layout/page-bar/components/PageBarHotkeys.tsx b/front/src/modules/ui/layout/components/PageHotkeys.tsx similarity index 83% rename from front/src/modules/ui/layout/page-bar/components/PageBarHotkeys.tsx rename to front/src/modules/ui/layout/components/PageHotkeys.tsx index d5dc003022..b915bb2ad1 100644 --- a/front/src/modules/ui/layout/page-bar/components/PageBarHotkeys.tsx +++ b/front/src/modules/ui/layout/components/PageHotkeys.tsx @@ -5,7 +5,7 @@ type OwnProps = { onAddButtonClick?: () => void; }; -export function PageBarHotkeys({ onAddButtonClick }: OwnProps) { +export function PageHotkeys({ onAddButtonClick }: OwnProps) { useScopedHotkeys('c', () => onAddButtonClick?.(), TableHotkeyScope.Table, [ onAddButtonClick, ]); diff --git a/front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx b/front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx index ee4635b5c6..701b3f4eec 100644 --- a/front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx +++ b/front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx @@ -2,8 +2,7 @@ import styled from '@emotion/styled'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; -import { PageBar } from '../page-bar/components/PageBar'; - +import { PageHeader } from './PageHeader'; import { RightDrawerContainer } from './RightDrawerContainer'; type OwnProps = { @@ -24,7 +23,7 @@ export function SubMenuTopBarContainer({ children, title, icon }: OwnProps) { return ( - {isMobile && } + {isMobile && } {children} ); diff --git a/front/src/modules/ui/layout/components/WithTopBarContainer.tsx b/front/src/modules/ui/layout/components/WithTopBarContainer.tsx deleted file mode 100644 index 23e790b339..0000000000 --- a/front/src/modules/ui/layout/components/WithTopBarContainer.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { ReactNode } from 'react'; -import styled from '@emotion/styled'; - -import { PAGE_BAR_MIN_HEIGHT, PageBar } from '../page-bar/components/PageBar'; -import { PageBarHotkeys } from '../page-bar/components/PageBarHotkeys'; - -import { RightDrawerContainer } from './RightDrawerContainer'; - -type OwnProps = { - children: JSX.Element | JSX.Element[]; - title: string; - hasBackButton?: boolean; - isFavorite?: boolean; - icon: ReactNode; - onAddButtonClick?: () => void; - onFavoriteButtonClick?: () => void; - extraButtons?: ReactNode[]; -}; - -const StyledContainer = styled.div` - display: flex; - flex-direction: column; - width: 100%; -`; - -export function WithTopBarContainer({ - children, - title, - hasBackButton, - isFavorite, - icon, - onAddButtonClick, - onFavoriteButtonClick, - extraButtons, -}: OwnProps) { - return ( - - - - - {children} - - - ); -} diff --git a/front/src/modules/ui/layout/page-bar/components/PageBar.tsx b/front/src/modules/ui/layout/page-bar/components/PageBar.tsx deleted file mode 100644 index 864166d7f8..0000000000 --- a/front/src/modules/ui/layout/page-bar/components/PageBar.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import { ReactNode, useCallback } from 'react'; -import { useNavigate } from 'react-router-dom'; -import styled from '@emotion/styled'; -import { useRecoilValue } from 'recoil'; - -import { IconButton } from '@/ui/button/components/IconButton'; -import { LightIconButton } from '@/ui/button/components/LightIconButton'; -import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; -import { IconChevronLeft, IconHeart, IconPlus } from '@/ui/icon/index'; -import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton'; -import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; - -import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip'; -import { isNavbarOpenedState } from '../../states/isNavbarOpenedState'; - -export const PAGE_BAR_MIN_HEIGHT = 40; - -const StyledTopBarContainer = styled.div` - align-items: center; - background: ${({ theme }) => theme.background.noisy}; - color: ${({ theme }) => theme.font.color.primary}; - display: flex; - flex-direction: row; - font-size: ${({ theme }) => theme.font.size.lg}; - justify-content: space-between; - min-height: ${PAGE_BAR_MIN_HEIGHT}px; - padding: ${({ theme }) => theme.spacing(2)}; - padding-left: 0; - padding-right: ${({ theme }) => theme.spacing(3)}; -`; - -const StyledLeftContainer = styled.div` - align-items: center; - display: flex; - flex-direction: row; - width: 100%; -`; - -const StyledTitleContainer = styled.div` - display: flex; - font-size: ${({ theme }) => theme.font.size.md}; - margin-left: ${({ theme }) => theme.spacing(1)}; - max-width: 50%; -`; - -const StyledTopBarButtonContainer = styled.div` - margin-right: ${({ theme }) => theme.spacing(1)}; -`; - -const StyledTopBarIconTitleContainer = styled.div` - align-items: center; - display: flex; - flex-direction: row; - padding-left: ${({ theme }) => theme.spacing(2)}; - width: 100%; -`; - -const StyledActionButtonsContainer = styled.div` - display: inline-flex; - gap: ${({ theme }) => theme.spacing(2)}; -`; - -type OwnProps = { - title: string; - hasBackButton?: boolean; - isFavorite?: boolean; - icon: ReactNode; - onAddButtonClick?: () => void; - onFavoriteButtonClick?: () => void; - extraButtons?: ReactNode[]; -}; - -export function PageBar({ - title, - hasBackButton, - isFavorite, - icon, - onAddButtonClick, - onFavoriteButtonClick, - extraButtons, -}: OwnProps) { - const navigate = useNavigate(); - const navigateBack = useCallback(() => navigate(-1), [navigate]); - - const isNavbarOpened = useRecoilValue(isNavbarOpenedState); - - return ( - <> - - - {!isNavbarOpened && ( - - - - )} - {hasBackButton && ( - - } - onClick={navigateBack} - /> - - )} - - {icon} - - - - - - - - - {onFavoriteButtonClick && ( - } - size="medium" - variant="secondary" - data-testid="add-button" - accent={isFavorite ? 'danger' : 'default'} - onClick={onFavoriteButtonClick} - /> - )} - {onAddButtonClick && ( - } - size="medium" - variant="secondary" - data-testid="add-button" - accent="default" - onClick={onAddButtonClick} - /> - )} - {extraButtons} - - - - - ); -} diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx index fca6e77393..9114bf0152 100644 --- a/front/src/pages/companies/Companies.tsx +++ b/front/src/pages/companies/Companies.tsx @@ -6,8 +6,13 @@ import { v4 } from 'uuid'; import { CompanyTable } from '@/companies/table/components/CompanyTable'; import { SEARCH_COMPANY_QUERY } from '@/search/graphql/queries/searchCompanyQuery'; import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider'; +import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; import { IconBuildingSkyscraper } from '@/ui/icon'; -import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; +import { PageAddButton } from '@/ui/layout/components/PageAddButton'; +import { PageBody } from '@/ui/layout/components/PageBody'; +import { PageContainer } from '@/ui/layout/components/PageContainer'; +import { PageHeader } from '@/ui/layout/components/PageHeader'; +import { PageHotkeys } from '@/ui/layout/components/PageHotkeys'; import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu'; import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem'; @@ -66,22 +71,29 @@ export function Companies() { return ( - } - onAddButtonClick={handleAddButtonClick} - > - + } > - - - - - - - + + + + + + + + + + + + + + + ); } diff --git a/front/src/pages/companies/CompaniesMockMode.tsx b/front/src/pages/companies/CompaniesMockMode.tsx index 9d70e82c7a..bf7178b2a7 100644 --- a/front/src/pages/companies/CompaniesMockMode.tsx +++ b/front/src/pages/companies/CompaniesMockMode.tsx @@ -3,7 +3,9 @@ import styled from '@emotion/styled'; import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; import { IconBuildingSkyscraper } from '@/ui/icon'; -import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; +import { PageBody } from '@/ui/layout/components/PageBody'; +import { PageContainer } from '@/ui/layout/components/PageContainer'; +import { PageHeader } from '@/ui/layout/components/PageHeader'; import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; @@ -16,17 +18,18 @@ export function CompaniesMockMode() { const theme = useTheme(); return ( - <> - + } - > + /> + - - + + ); } diff --git a/front/src/pages/companies/CompanyShow.tsx b/front/src/pages/companies/CompanyShow.tsx index e0049f7694..d4fffbb9ff 100644 --- a/front/src/pages/companies/CompanyShow.tsx +++ b/front/src/pages/companies/CompanyShow.tsx @@ -5,13 +5,17 @@ import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargeta import { CompanyTeam } from '@/companies/components/CompanyTeam'; import { useCompanyQuery } from '@/companies/hooks/useCompanyQuery'; import { useFavorites } from '@/favorites/hooks/useFavorites'; +import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField'; import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext'; import { EditableFieldEntityIdContext } from '@/ui/editable-field/contexts/EditableFieldEntityIdContext'; import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/EditableFieldMutationContext'; import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox'; import { IconBuildingSkyscraper } from '@/ui/icon'; -import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; +import { PageBody } from '@/ui/layout/components/PageBody'; +import { PageContainer } from '@/ui/layout/components/PageContainer'; +import { PageFavoriteButton } from '@/ui/layout/components/PageFavoriteButton'; +import { PageHeader } from '@/ui/layout/components/PageHeader'; import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton'; import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer'; import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer'; @@ -46,24 +50,28 @@ export function CompanyShow() { } return ( - <> + - } - onFavoriteButtonClick={handleFavoriteButtonClick} - extraButtons={[ + > + + , - ]} - > + /> + + + @@ -110,7 +118,7 @@ export function CompanyShow() { /> - - + + ); } diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 0da7de8959..971d7b08c6 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -4,8 +4,13 @@ import { v4 } from 'uuid'; import { PeopleTable } from '@/people/table/components/PeopleTable'; import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider'; +import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; import { IconUser } from '@/ui/icon'; -import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; +import { PageAddButton } from '@/ui/layout/components/PageAddButton'; +import { PageBody } from '@/ui/layout/components/PageBody'; +import { PageContainer } from '@/ui/layout/components/PageContainer'; +import { PageHeader } from '@/ui/layout/components/PageHeader'; +import { PageHotkeys } from '@/ui/layout/components/PageHotkeys'; import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu'; import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem'; @@ -58,19 +63,29 @@ export function People() { return ( - - + } - onAddButtonClick={handleAddButtonClick} + icon={} > - - - - - - - + + + + + + + + + + + + + + + ); } diff --git a/front/src/pages/people/PersonShow.tsx b/front/src/pages/people/PersonShow.tsx index c5d1fd4e93..2822b443b2 100644 --- a/front/src/pages/people/PersonShow.tsx +++ b/front/src/pages/people/PersonShow.tsx @@ -6,13 +6,17 @@ import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargeta import { useFavorites } from '@/favorites/hooks/useFavorites'; import { GET_PERSON } from '@/people/graphql/queries/getPerson'; import { usePersonQuery } from '@/people/hooks/usePersonQuery'; +import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField'; import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext'; import { EditableFieldEntityIdContext } from '@/ui/editable-field/contexts/EditableFieldEntityIdContext'; import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/EditableFieldMutationContext'; import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox'; import { IconUser } from '@/ui/icon'; -import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; +import { PageBody } from '@/ui/layout/components/PageBody'; +import { PageContainer } from '@/ui/layout/components/PageContainer'; +import { PageFavoriteButton } from '@/ui/layout/components/PageFavoriteButton'; +import { PageHeader } from '@/ui/layout/components/PageHeader'; import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton'; import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer'; import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer'; @@ -64,24 +68,28 @@ export function PersonShow() { } return ( - <> + - } hasBackButton - isFavorite={isFavorite} - onFavoriteButtonClick={handleFavoriteButtonClick} - extraButtons={[ + > + + , - ]} - > + /> + + + @@ -130,7 +138,7 @@ export function PersonShow() { /> - - + + ); } diff --git a/front/src/pages/tasks/Tasks.tsx b/front/src/pages/tasks/Tasks.tsx index 90f114662f..f193afc5db 100644 --- a/front/src/pages/tasks/Tasks.tsx +++ b/front/src/pages/tasks/Tasks.tsx @@ -4,10 +4,14 @@ import styled from '@emotion/styled'; import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer'; import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext'; import { TaskGroups } from '@/activities/tasks/components/TaskGroups'; +import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton'; import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope'; import { IconArchive, IconCheck, IconCheckbox } from '@/ui/icon/index'; -import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; +import { PageAddButton } from '@/ui/layout/components/PageAddButton'; +import { PageBody } from '@/ui/layout/components/PageBody'; +import { PageContainer } from '@/ui/layout/components/PageContainer'; +import { PageHeader } from '@/ui/layout/components/PageHeader'; import { TabList } from '@/ui/tab/components/TabList'; import { TopBar } from '@/ui/top-bar/TopBar'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; @@ -45,30 +49,38 @@ export function Tasks() { ]; return ( - openCreateActivity(ActivityType.Task)} - icon={} - > - - - - - - } - rightComponent={ - - } + + } + > + + openCreateActivity(ActivityType.Task)} /> - - - + + + + + + + + } + rightComponent={ + + } + /> + + + + + ); }