4 contains design details for the New annotation companion window, and assumes the window is in the default vertical mode. Companion windows can be moved to horizontal mode, however, and that is an ideal window orientation for some expected use cases (e.g., line-by-line transcription).
Below are suggestions for how the New annotation window components should be adjusted when the window is moved to horizontal mode. The elements are in the same order as in vertical mode, so hopefully these responsive adjustments are feasible.
Normal/wide horizontal window
A: The Motivation menu and the Target and Style labels and associated toolbars are displayed as inline elements so they flow into the same row as long as the window width allows. If the window width is such that the Style label and associated toolbar doesn't fit, it should flow into a new row.
The toolbar container/backgrounds only extend wide enough to contain all of their menu items, unlike in vertical mode where for visual design reasons I suggested the container/background extend the full-width of the window.
B: The Content label and associated toolbar is always displayed in a new row, because we want the Content label and toolbar to be closely associated with the text input.
C: The Content textinput should take full width of the window, to facilitate the line-by-line transcription annotation use case.
D: The Cancel and Save buttons go in a new row immediately below the Content textinput.
Narrow window
Below a certain width the Target label and toolbar won't fit in the same row as the Motivation menu. At that point, elements should flow to a similar arrangement as in the vertical window:
The Motivation menu gets its own row.
The Target, Style, and Content labels and toolbars take one row each, but their container/backgrounds are still only wide enough to contain their menu items. And unlike the vertical arrangement, we still want the labels to be inline with their menus, because we want to minimize vertical space required for the horizontal companion window.
4 contains design details for the New annotation companion window, and assumes the window is in the default vertical mode. Companion windows can be moved to horizontal mode, however, and that is an ideal window orientation for some expected use cases (e.g., line-by-line transcription).
Below are suggestions for how the New annotation window components should be adjusted when the window is moved to horizontal mode. The elements are in the same order as in vertical mode, so hopefully these responsive adjustments are feasible.
Normal/wide horizontal window
A: The Motivation menu and the Target and Style labels and associated toolbars are displayed as inline elements so they flow into the same row as long as the window width allows. If the window width is such that the Style label and associated toolbar doesn't fit, it should flow into a new row.
The toolbar container/backgrounds only extend wide enough to contain all of their menu items, unlike in vertical mode where for visual design reasons I suggested the container/background extend the full-width of the window.
B: The Content label and associated toolbar is always displayed in a new row, because we want the Content label and toolbar to be closely associated with the text input.
C: The Content textinput should take full width of the window, to facilitate the line-by-line transcription annotation use case.
D: The Cancel and Save buttons go in a new row immediately below the Content textinput.
Narrow window
Below a certain width the Target label and toolbar won't fit in the same row as the Motivation menu. At that point, elements should flow to a similar arrangement as in the vertical window:
The Motivation menu gets its own row.
The Target, Style, and Content labels and toolbars take one row each, but their container/backgrounds are still only wide enough to contain their menu items. And unlike the vertical arrangement, we still want the labels to be inline with their menus, because we want to minimize vertical space required for the horizontal companion window.
The text input takes full-width of the window.
The Cancel and Save buttons get their own row.