Design an affordance to lock a fragment image in place while scrolling through its transcription for a smoother reading experience

[gissoo]

Two directions for an affordance were proposed to the team: 1. freeze icon (a relevant icon to represent the function) 2. a button with text (following the PGP UI button component). Both design proposals would be placed above the image, near other image controls (with some suggestions to decrease the size of the image zoom control and still pass the accessibility requirements).

They team strongly prefers proposal 1, and also suggested the concept of "pin" as an alternative to "freeze". I am working on proposing icon(s) that would work for this function before I place the issue for a second round of review.

[gissoo]

@blms following my previous comment, above, I worked on the two proposals (freeze, and pin), presented the two options and the team strongly preferred the pin option – please let me know what you think

a few points below:

• the pin's icon is taken from phosphor icons
• I've included in the two screens the styles for the default and active states
• the icon is at 40px right now – can we use 8px padding around it to pass accessibility reqs? I know it's 48px to pass accessibility
• as for what happens once the icon is selected what you have implemented is perfect and I don't want to over design it, it's what Marina had wanted.

[blms]

@gissoo Thanks, this looks great to me! The only question I have: is the "active" state what appears when the pinned image is open, and should the X button still appear as I have it now, or should the behavior be clicking the pin icon again to close it?

[gissoo]

@blms, yes, the active state appears when the pinned image is open, and the X should still appear as it does now, that's how I was thinking