As a user I want to toggle content panels so that I can view image or transcription separately or both at the same time, so I can read the content I am interested in.

[rlskoeser]

testing notes

On a document that has both image and transcription, test the panel toggle controls and try looking at:

• image + transcription side by side
• images only
• transcription only

dev notes

• clicking button should toggle panel visibility
• revise transition styles (image height transition is too much on top of grid panel sliding closed; maybe separate with a delay so the image transition isn't visible?)
• style toggles with images from the design and to reflect state (on/off)

[gissoo]

@rlskoeser @blms here are the revised toggles for desktop and mobile on Figma

here you can see what it looks like when all toggles are deselected on desktop and mobile

I have uploaded the toggles on google drive here, because I had a lot of questions on how to organize them on github –

note:

• the image toggles are in PNG and the transcription and translation toggles are in SVG
• selected/active toggles on desktop are 65 x 65px, and deselected toggles on desktop are the same size as mobile toggles which is 40 x 40px. all toggles on mobile always maintain the same size.

[richmanrachel]

@rlskoeser and @gissoo - the functionality is great! The difference between "not open" and "not available" may be a little too subtle still: could we add crosshatching or something on "not available"?

[richmanrachel]

Closing and opening a separate design issue