agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-05-23 17:19:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #22630 from overleaf/td-ds-nav-system-messages

Browse Source 
Add system messages to DS nav version of project dashboard

GitOrigin-RevId: 85830d58242300a40148190f8a18204666a3065c
This commit is contained in:
Lucie Germain
2024-12-19 17:52:44 +01:00
committed by Copybot
parent 6a8844b673
commit ee4c8b5fe2
2 changed files with 74 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
View File

@@ -18,6 +18,7 @@ import getMeta from '@/utils/meta'
import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
import FatFooter from '@/features/ui/components/bootstrap-5/footer/fat-footer'
import SidebarDsNav from '@/features/project-list/components/sidebar/sidebar-ds-nav'
import SystemMessages from '@/shared/components/system-messages'
export function ProjectListDsNav() {
const navbarProps = getMeta('ol-navbar')
@@ -59,66 +60,71 @@ export function ProjectListDsNav() {
/>
<main className="project-list-wrapper">
<SidebarDsNav />
<div className="project-ds-nav-content">
<div className="project-ds-nav-main">
{error ? <DashApiError /> : ''}
<UserNotifications />
<div className="project-list-header-row">
<ProjectListTitle
filter={filter}
selectedTag={selectedTag}
selectedTagId={selectedTagId}
className="text-truncate d-none d-md-block"
/>
<div className="project-tools">
<div className="d-none d-md-block">
{selectedProjects.length === 0 ? (
<div className="project-ds-nav-content-and-messages">
<div className="project-ds-nav-content">
<div className="project-ds-nav-main">
{error ? <DashApiError /> : ''}
<UserNotifications />
<div className="project-list-header-row">
<ProjectListTitle
filter={filter}
selectedTag={selectedTag}
selectedTagId={selectedTagId}
className="text-truncate d-none d-md-block"
/>
<div className="project-tools">
<div className="d-none d-md-block">
{selectedProjects.length === 0 ? (
<CurrentPlanWidget />
) : (
<ProjectTools />
)}
</div>
<div className="d-md-none">
<CurrentPlanWidget />
) : (
<ProjectTools />
)}
</div>
</div>
<div className="d-md-none">
<CurrentPlanWidget />
</div>
<div className="project-ds-nav-project-list">
<OLRow className="d-none d-md-block">
<OLCol lg={7}>
<SearchForm
inputValue={searchText}
setInputValue={setSearchText}
filter={filter}
selectedTag={selectedTag}
/>
</OLCol>
</OLRow>
<div className="project-list-sidebar-survey-wrapper d-md-none">
{/* Omit the survey card in mobile view for now */}
</div>
<div className="mt-1 d-md-none">
<div
role="toolbar"
className="projects-toolbar"
aria-label={t('projects')}
>
<ProjectsDropdown />
<SortByDropdown />
</div>
</div>
<div className="mt-3">
<TableContainer bordered>
{tableTopArea}
<ProjectListTable />
</TableContainer>
</div>
<div className="mt-3">
<LoadMore />
</div>
</div>
</div>
<div className="project-ds-nav-project-list">
<OLRow className="d-none d-md-block">
<OLCol lg={7}>
<SearchForm
inputValue={searchText}
setInputValue={setSearchText}
filter={filter}
selectedTag={selectedTag}
/>
</OLCol>
</OLRow>
<div className="project-list-sidebar-survey-wrapper d-md-none">
{/* Omit the survey card in mobile view for now */}
</div>
<div className="mt-1 d-md-none">
<div
role="toolbar"
className="projects-toolbar"
aria-label={t('projects')}
>
<ProjectsDropdown />
<SortByDropdown />
</div>
</div>
<div className="mt-3">
<TableContainer bordered>
{tableTopArea}
<ProjectListTable />
</TableContainer>
</div>
<div className="mt-3">
<LoadMore />
</div>
</div>
<FatFooter />
</div>
<div>
<SystemMessages />
</div>
<FatFooter />
</div>
</main>
</div>

22
services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss
View File

@@ -249,16 +249,22 @@
}
}
.project-ds-nav-content {
.project-ds-nav-content-and-messages {
flex-grow: 1;
overflow-y: auto;
position: relative;
background-color: var(--bg-light-secondary);
display: flex;
flex-direction: column;
@include media-breakpoint-up(md) {
border-top-left-radius: var(--border-radius-large);
border-left: 1px solid var(--border-divider);
border-top: 1px solid var(--border-divider);
.project-ds-nav-content {
flex-grow: 1;
overflow-y: auto;
position: relative;
background-color: var(--bg-light-secondary);
@include media-breakpoint-up(md) {
border-top-left-radius: var(--border-radius-large);
border-left: 1px solid var(--border-divider);
border-top: 1px solid var(--border-divider);
}
}
}
}