Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make the classifier's subject viewer sticky #6103

Merged
merged 4 commits into from
May 29, 2024
Merged

Make the classifier's subject viewer sticky #6103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
10de0a3
Sticky subject viewer for NoMaxWidth and MaxWidth layouts
goplayoutside3 May 23, 2024
69f6916
fix CenteredLayout's sticky task area
goplayoutside3 May 23, 2024
cd1e9fc
when 'size' is small, don't use sticky styling
goplayoutside3 May 29, 2024
328f69c
Merge branch 'master' into sticky-subject-viewer
goplayoutside3 May 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 23 additions & 11 deletions ...r/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useContext } from 'react'
import styled from 'styled-components'
import styled, { css } from 'styled-components'
import { Box, ResponsiveContext } from 'grommet'

import Banners from '@components/Classifier/components/Banners'
Expand All @@ -15,10 +15,23 @@ export const Relative = styled(Box)`
position: relative; // Used for QuickTalk and FeedbackModal positioning
`

const StickySubjectViewer = styled(Box)`
${props =>
props.size !== 'small' &&
css`
position: sticky;
top: 10px;
`}
`

const StickyTaskArea = styled(Box)`
flex: initial; // Don't stretch vertically
position: sticky;
top: 10px;
${props =>
props.size !== 'small' &&
css`
position: sticky;
top: 10px;
`}
`

const StickyImageToolbar = styled(ImageToolbar)`
Expand Down Expand Up @@ -50,26 +63,25 @@ export default function CenteredLayout({ separateFramesView = false }) {
direction='row'
margin={size === 'small' ? 'auto' : 'none'}
>
<Box>
<StickySubjectViewer size={size}>
<Banners />
<SubjectViewer />
<MetaTools />
</Box>
</StickySubjectViewer>
{!separateFramesView && (
<Box width='3rem' fill='vertical' style={{ minWidth: '3rem' }}>
<StickyImageToolbar />
</Box>
)}
</Box>
<Box
<StickyTaskArea
width={size === 'small' ? '100%' : '25rem'}
fill={size === 'small' ? 'horizontal' : 'vertical'}
size={size}
>
<StickyTaskArea>
<TaskArea />
{separateFramesView && <FieldGuide />}
</StickyTaskArea>
</Box>
<TaskArea />
{separateFramesView && <FieldGuide />}
</StickyTaskArea>
</Box>
<FeedbackModal />
<QuickTalk />
Expand Down
43 changes: 23 additions & 20 deletions ...ib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useContext } from 'react'
import styled from 'styled-components'
import styled, { css } from 'styled-components'
import { Box, Grid, ResponsiveContext } from 'grommet'

import Banners from '@components/Classifier/components/Banners'
Expand All @@ -21,13 +21,31 @@ export const ContainerGrid = styled(Grid)`
}
`

export const ViewerGrid = styled(Grid)`
${props =>
props.size !== 'small' &&
css`
position: sticky;
top: 10px;
`}
height: fit-content;
grid-area: viewer;
grid-template-columns: auto clamp(3rem, 10%, 4.5rem);
grid-template-rows: auto;
grid-template-areas: 'subject toolbar';
`

const StyledTaskAreaContainer = styled.div`
grid-area: task;
`

const StyledTaskArea = styled(Box)`
position: sticky;
top: 10px;
${props =>
props.size !== 'small' &&
css`
position: sticky;
top: 10px;
`}
`

const StyledImageToolbarContainer = styled.div`
Expand All @@ -39,21 +57,6 @@ const StyledImageToolbar = styled(ImageToolbar)`
top: 10px;
`

export function ViewerGrid({ children }) {
return (
<Grid
as='section'
areas={[['subject', 'toolbar']]}
columns={['auto', 'clamp(3rem, 10%, 4.5rem)']}
gridArea='viewer'
height='fit-content'
rows={['auto']}
>
{children}
</Grid>
)
}

export const verticalLayout = {
areas: [['viewer'], ['task']],
columns: ['100%'],
Expand Down Expand Up @@ -87,7 +90,7 @@ export default function MaxWidth({
<MetaTools />
</Box>
) : (
<ViewerGrid>
<ViewerGrid forwardedAs='section' size={size}>
<Box gridArea='subject'>
<Banners />
<SubjectViewer />
Expand All @@ -99,7 +102,7 @@ export default function MaxWidth({
</ViewerGrid>
)}
<StyledTaskAreaContainer>
<StyledTaskArea>
<StyledTaskArea size={size}>
<TaskArea />
{separateFramesView && <FieldGuide />}
</StyledTaskArea>
Expand Down
67 changes: 36 additions & 31 deletions ...lassifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useContext } from 'react'
import styled from 'styled-components'
import styled, { css } from 'styled-components'
import { Box, Grid, ResponsiveContext } from 'grommet'

import Banners from '@components/Classifier/components/Banners'
Expand All @@ -21,13 +21,31 @@ const ContainerGrid = styled(Grid)`
}
`

export const ViewerGrid = styled(Grid)`
${props =>
props.size !== 'small' &&
css`
position: sticky;
top: 10px;
`}
height: fit-content;
grid-area: viewer;
grid-template-columns: auto clamp(3rem, 10%, 4.5rem);
grid-template-rows: auto;
grid-template-areas: 'subject toolbar';
`

const StyledTaskAreaContainer = styled.div`
grid-area: task;
`

const StyledTaskArea = styled(Box)`
position: sticky;
top: 10px;
${props =>
props.size !== 'small' &&
css`
position: sticky;
top: 10px;
`}
`

const StyledImageToolbarContainer = styled.div`
Expand All @@ -39,39 +57,26 @@ const StyledImageToolbar = styled(ImageToolbar)`
top: 10px;
`

export function ViewerGrid({ children }) {
return (
<Grid
as='section'
areas={[['subject', 'toolbar']]}
columns={['auto', 'clamp(3rem, 10%, 4.5rem)']}
gridArea='viewer'
height='fit-content'
rows={['auto']}
>
{children}
</Grid>
)
const verticalLayout = {
areas: [['viewer'], ['task']],
columns: ['100%'],
gap: 'small',
margin: 'none',
rows: ['auto', 'auto']
}

const horizontalLayout = {
areas: [['viewer', 'task']],
columns: ['auto', '25rem'],
gap: 'medium',
rows: ['auto']
}

export default function NoMaxWidth({
className = '',
separateFramesView = false
}) {
const size = useContext(ResponsiveContext)
const verticalLayout = {
areas: [['viewer'], ['task']],
columns: ['100%'],
gap: 'small',
margin: 'none',
rows: ['auto', 'auto']
}
const horizontalLayout = {
areas: [['viewer', 'task']],
columns: ['auto', '25rem'],
gap: 'medium',
rows: ['auto']
}
const containerGridProps =
size === 'small' ? verticalLayout : horizontalLayout

Expand All @@ -84,7 +89,7 @@ export default function NoMaxWidth({
<MetaTools />
</Box>
) : (
<ViewerGrid>
<ViewerGrid forwardedAs='section' size={size}>
<Box gridArea='subject'>
<Banners />
<SubjectViewer />
Expand All @@ -96,7 +101,7 @@ export default function NoMaxWidth({
</ViewerGrid>
)}
<StyledTaskAreaContainer>
<StyledTaskArea>
<StyledTaskArea size={size}>
<TaskArea />
{separateFramesView && <FieldGuide />}
</StyledTaskArea>
Expand Down
1 change: 0 additions & 1 deletion ...lib-classifier/src/components/Classifier/components/Layout/helpers/getLayout/getLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ export default function getLayout(layout) {
if (layouts[layout]) {
return layouts[layout]
} else {
console.warn(`Couldn't find a layout for '${layout}', falling back to default`)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opinionated statement, but this warning was just cluttering the console during unit tests.

return defaultLayout
}
}