Add "Create new annotation" details

[ggeisler]

The details below enhance the current behavior of this plugin and sort of depend on the Annotations header menu pattern established in ProjectMirador/mirador#3019 and ProjectMirador/mirador#2946 (comment)

Create new annotation icon

• The icon is add_box at https://material.io/resources/icons/?search=create&icon=add_box&style=sharp

• The tooltip should read Create new annotation:

New annotation companion window

• When the user selects the Create new annotation icon, a right-side companion window is opened:

A: Motivation menu => #57

B: Target, Style, and Content sections

There are three labeled toolbar/menubars.

• For the typography of the "Target," "Style," and "Content" labels, let's try OVERLINE first and see if that works. If it's too small we could try Subtitle2.

• The icons shown in the mockup are smaller than what they should be when implemented. We should size them the same as the other icons in the UI. This might cause a horizontal space problem for the Content menu; I wonder if there is an MUI/React pattern for horizontal scrolling that we could use here? We might also consider making the default width of the Add Annotation companion window a bit wider?

• The icons are intended to provide the same functionality as in Mirador 2, so I won't detail anything about those, with the one exception described in the next section. From discussion with @mejackreed I think the basic interaction pattern with creating a target, etc. is already in place and/or known.

C: Add canvas-level annotation target => #58

D: Annotation content textarea

This is a multiline text input, which initially displays a few lines and expands if the text exceeds the visible space:

• I don't think we need a placeholder value but ideally it would resemble the outlined version of this component. Also, the label should be "Content", which we are already displaying above the toolbar. Can we use that as the field label for the multiline text input?

E: Cancel and Save buttons

Selecting Cancel discards everything the user has done and closes the New annotation window.

Selecting Save:

• Creates a new annotation with all of the relevant current target, style, content, and motivation selections, appended to the bottom of the annotationpage.

• Refreshes the Annotation sidebar, if it is open, so that the newly created annotation is present on it and the annotation count message is updated.

• If necessary, scrolls the Annotation sidebar as necessary to ensure the saved annotation is visible. The annotation should be highlighted as if the user had selected that annotation; selected annotation gray background and selected annotation yellow region target highlighting:

(Split to #12)

Responsive considerations

See #5 for how the window elements should adjust when the New annotation window is moved to horizontal mode.

[cbeer]

Outstanding todos split out to new/existing tickets.

[Selphie]

Sorry if I got something wrong - is there already an implementation of the "content" part in the annotation section, i.e. that users are able to add attachements to an annotation?
(see screenshot https://user-images.githubusercontent.com/101482/81979989-b3ce2300-95e2-11ea-8fc5-304c695f84d1.png)