MWB-944: update source and target tabs to scrollable

meaningfy-ws · Jan 9, 2025 · bd34440 · bd34440
1 parent b33e5ca
commit bd34440
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 17 deletions.
diff --git a/mapping_workbench/frontend/src/components/navigation-tabs-wrapper.js b/mapping_workbench/frontend/src/components/navigation-tabs-wrapper.js
@@ -0,0 +1,21 @@
+import Stack from '@mui/material/Stack';
+import {useTheme} from '@mui/material/styles';
+
+export const NavigationTabsWrapper = ({children}) => {
+    const theme = useTheme()
+    console.log(theme)
+    return <Stack direction='row'
+                  sx={{
+                      position: 'fixed',
+                      backgroundColor: 'rgba(248, 249, 250, 0.8)',
+                      backdropFilter: 'blur(6px)',
+                      width: '100%',
+                      top: '142px',
+                      pt: 2,
+                      pb:1,
+                      zIndex: 10
+                  }}>
+        {children}
+    </Stack>
+}
+
diff --git a/mapping_workbench/frontend/src/pages/app/ontology-files/index.js b/mapping_workbench/frontend/src/pages/app/ontology-files/index.js
@@ -30,6 +30,7 @@ import {SourceAndTargetTabs} from 'src/sections/app/source-and-target';
 import {FileUploader} from 'src/sections/app/files-form//file-uploader';
 import {toastError, toastLoad, toastSuccess} from "src/components/app-toast";
 import {ontologyFileResourcesApi as fileResourcesApi} from "src/api/ontology-files/file-resources";
+import {NavigationTabsWrapper} from '../../../components/navigation-tabs-wrapper';
 
 const Page = () => {
     const [view, setView] = useState('grid');
@@ -78,12 +79,13 @@ const Page = () => {
     return (
         <>
             <Seo title={`App: ${sectionApi.SECTION_TITLE}`}/>
+            <NavigationTabsWrapper>
+                <SourceAndTargetTabs/>
+            </NavigationTabsWrapper>
             <Grid container
+                  mt={5}
                   spacing={{xs: 3, lg: 4}}
             >
-                <Grid xs={12}>
-                    <SourceAndTargetTabs/>
-                </Grid>
                 <Grid xs={12}>
                     <Stack
                         direction="row"

diff --git a/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js b/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js
@@ -18,6 +18,7 @@ import {TableSearchBar} from 'src/sections/components/table-search-bar';
 import {ListTable} from "src/sections/app/ontology-namespace/list-table";
 import {ontologyNamespacesApi as sectionApi} from 'src/api/ontology-namespaces';
 import OntologyNamespacesCustom from 'src/pages/app/ontology-namespaces-custom';
+import {NavigationTabsWrapper} from '../../../components/navigation-tabs-wrapper';
 
 const Page = () => {
     const itemsStore = useItemsStore(sectionApi);
@@ -28,12 +29,12 @@ const Page = () => {
     return (
         <>
             <Seo title={`App: ${sectionApi.SECTION_TITLE} List`}/>
+            <NavigationTabsWrapper>
+                <SourceAndTargetTabs/>
+            </NavigationTabsWrapper>
             <Grid container
+                  mt={5}
                   spacing={4}>
-                <Grid xs={12}>
-                    <SourceAndTargetTabs/>
-                </Grid>
-
                 <Grid xs={12}
                       xl={6}
                       item>

diff --git a/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js b/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js
@@ -19,6 +19,7 @@ import {RouterLink} from 'src/components/router-link';
 import {ontologyTermsApi as sectionApi} from 'src/api/ontology-terms';
 import {SourceAndTargetTabs} from 'src/sections/app/source-and-target';
 import {toastError, toastLoad, toastSuccess} from "src/components/app-toast";
+import {NavigationTabsWrapper} from '../../../components/navigation-tabs-wrapper';
 import useItemsSearch from '../../../hooks/use-items-search';
 import {useItemsStore} from '../../../hooks/use-items-store';
 import {ListTable} from '../../../sections/app/ontology-term/list-table';
@@ -52,13 +53,13 @@ const Page = () => {
     return (
         <>
             <Seo title={`App: ${sectionApi.SECTION_TITLE}`}/>
+            <NavigationTabsWrapper>
+                <SourceAndTargetTabs/>
+            </NavigationTabsWrapper>
             <Grid container
+                  mt={5}
                   spacing={{xs: 3, lg: 4}}
             >
-
-                <Grid xs={12}>
-                    <SourceAndTargetTabs/>
-                </Grid>
                 <Grid xs={12}>
                     <Stack direction="row"
                            justifyContent="space-between"

diff --git a/mapping_workbench/frontend/src/pages/app/test-data-suites/index.js b/mapping_workbench/frontend/src/pages/app/test-data-suites/index.js
@@ -19,6 +19,7 @@ import {TableSearchBar} from "src/sections/components/table-search-bar";
 import {testDataSuitesApi as sectionApi} from 'src/api/test-data-suites';
 import {FileCollectionUploader} from "src/sections/app/file-manager/file-collection-uploader";
 import {TestDataCollectionListTable} from "src/sections/app/file-manager/test-data-collection-list-table";
+import {NavigationTabsWrapper} from '../../../components/navigation-tabs-wrapper';
 
 const useItemsStore = () => {
     const [state, setState] = useState({
@@ -60,12 +61,14 @@ const Page = () => {
     return (
         <>
             <Seo title={`App: ${sectionApi.SECTION_TITLE} List`}/>
-            <Stack spacing={4}>
-                <Stack>
-                    <SourceAndTargetTabs/>
-                </Stack>
+            <NavigationTabsWrapper>
+                <SourceAndTargetTabs/>
+            </NavigationTabsWrapper>
+            <Stack spacing={4}
+                   sx={{mt: 5}}>
                 <Stack direction='row'
-                       justifyContent='space-between'>
+                       justifyContent='space-between'
+                       sx={{pt: 5}}>
                     <Paper>
                         <TableSearchBar onChange={e => itemsSearch.handleSearchItems([e])}
                                         value={itemsSearch.state.search[0]}/>

diff --git a/mapping_workbench/frontend/src/sections/app/source-and-target/index.js b/mapping_workbench/frontend/src/sections/app/source-and-target/index.js
@@ -1,7 +1,7 @@
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import {useRouter} from 'next/router';
-import {paths} from '../../../paths';
+import {paths} from 'src/paths';
 
 const TABS = [
     {