diff --git a/compose/neurosynth-frontend/src/pages/Study/EditStudyPage.tsx b/compose/neurosynth-frontend/src/pages/Study/EditStudyPage.tsx index 88d8ef44..9cb18321 100644 --- a/compose/neurosynth-frontend/src/pages/Study/EditStudyPage.tsx +++ b/compose/neurosynth-frontend/src/pages/Study/EditStudyPage.tsx @@ -1,4 +1,5 @@ -import { Box } from '@mui/material'; +import { ArrowLeft, ArrowRight } from '@mui/icons-material'; +import { Box, Button, Typography } from '@mui/material'; import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent'; import { useInitProjectStoreIfRequired, @@ -10,7 +11,6 @@ import EditStudyDetails from 'pages/Study/components/EditStudyDetails'; import EditStudyMetadata from 'pages/Study/components/EditStudyMetadata'; import EditStudyPageHeader from 'pages/Study/components/EditStudyPageHeader'; import EditStudySaveButton from 'pages/Study/components/EditStudySaveButton'; -import EditStudySwapVersionButton from 'pages/Study/components/EditStudySwapVersionButton'; import EditStudyPageStyles from 'pages/Study/EditStudyPage.styles'; import { useClearStudyStore, @@ -71,7 +71,69 @@ const EditStudyPage: React.FC = (props) => { - + {/* */} + + + + 2 of 3 + + + diff --git a/compose/neurosynth-frontend/src/pages/Study/components/EditStudyPageHeader.tsx b/compose/neurosynth-frontend/src/pages/Study/components/EditStudyPageHeader.tsx index 6c374dfd..49b7f399 100644 --- a/compose/neurosynth-frontend/src/pages/Study/components/EditStudyPageHeader.tsx +++ b/compose/neurosynth-frontend/src/pages/Study/components/EditStudyPageHeader.tsx @@ -1,4 +1,4 @@ -import { Box, Typography } from '@mui/material'; +import { Box, Button, Typography } from '@mui/material'; import DisplayStudyChipLinks from 'components/DisplayStudyChipLinks/DisplayStudyChipLinks'; import EditStudyToolbar from 'pages/Study/components/EditStudyToolbar'; import NeurosynthBreadcrumbs from 'components/NeurosynthBreadcrumbs'; @@ -32,7 +32,7 @@ const EditStudyPageHeader: React.FC = () => { return ( <> - + { /> - + {studyYear && `(${studyYear}).`} {studyName} diff --git a/compose/neurosynth-frontend/src/pages/Study/components/EditStudyToolbar.styles.ts b/compose/neurosynth-frontend/src/pages/Study/components/EditStudyToolbar.styles.ts index f44bf10e..e3e24155 100644 --- a/compose/neurosynth-frontend/src/pages/Study/components/EditStudyToolbar.styles.ts +++ b/compose/neurosynth-frontend/src/pages/Study/components/EditStudyToolbar.styles.ts @@ -7,9 +7,9 @@ const EditStudyToolbarStyles: Style = { }, toolbarContainer: { position: 'absolute', - right: 'calc(-8% - 18px)', + right: 'calc(-10%)', borderRadius: '4px', - border: '2px solid', + border: '1px solid', borderColor: 'primary.main', }, header: { diff --git a/compose/neurosynth-frontend/src/pages/Study/components/EditStudyToolbar.tsx b/compose/neurosynth-frontend/src/pages/Study/components/EditStudyToolbar.tsx index d2f2fd7c..7588cee3 100644 --- a/compose/neurosynth-frontend/src/pages/Study/components/EditStudyToolbar.tsx +++ b/compose/neurosynth-frontend/src/pages/Study/components/EditStudyToolbar.tsx @@ -2,8 +2,17 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import BookmarkIcon from '@mui/icons-material/Bookmark'; import CheckIcon from '@mui/icons-material/Check'; +import SwapHorizIcon from '@mui/icons-material/SwapHoriz'; import DoneAllIcon from '@mui/icons-material/DoneAll'; -import { Box, CircularProgress, IconButton, Tooltip } from '@mui/material'; +import { + Box, + Button, + ButtonGroup, + CircularProgress, + Fab, + IconButton, + Tooltip, +} from '@mui/material'; import { useGetExtractionSummary, useGetStudysetById } from 'hooks'; import { StudyReturn } from 'neurostore-typescript-sdk'; import { EExtractionStatus } from 'pages/Extraction/ExtractionPage'; @@ -199,53 +208,90 @@ const EditStudyToolbar: React.FC<{ isViewOnly?: boolean }> = ({ isViewOnly = fal return ( - - Toolbar - - {!isViewOnly && ( - <> - - {isComplete ? ( - - - - - + {!isViewOnly && ( + + Toolbar + + + {isComplete ? ( + + + + + + + + ) : ( + + + + {percentageComplete}% - - ) : ( - - - - {percentageComplete}% - - - - - )} - - + + + + )} + + + + + + + + + + + + + + {/* = ({ isViewOnly = fal - - - )} - + */} + {/* = ({ isViewOnly = fal : `no previous ${currSelectedChipText} study` } > - {/* tooltip cannot act on a disabled element so we need to add a span here */} = ({ isViewOnly = fal : `no next ${currSelectedChipText} study` } > - {/* tooltip cannot act on a disabled element so we need to add a span here */} = ({ isViewOnly = fal + */} - + )} ); };