Style the custom annotation components

[jabrah]

Tasks

The following needs to be done with the annotation components:

• The React components should likely be modified to show information that needs to be shown
• The components need to be styled to look nice, while matching the look and feel of Mirador.
  • My preference would be to emulate the broader Mirador ecosystem and use Material-UI components in our custom components in order to match the look and feel of Mirador.
  • public/jh-annotations-panel.css is already added to the demo HTML, so this can be used for styling

For reference, the Github repository for the plugins is here: https://github.com/jhu-digital-manuscripts/rosademo-frontend

During development, please work against a separate branch and submit a PR against master when ready.

---

We currently have custom plugins that can read and display the JHU web annotations, however they don't look very good, nor do they match any of the mockups in any way, as you can see by this screenshot. You can see the Homer georeference data on the left and a Roman de la Rose manuscript on the right. The rose manuscript is actually showing its original IIIF2 annotations in the sidebar (we're missing some CSS to hide some markup in these annotations), while the Homer on the left is using the custom components to render the georeference annotations.

Feel free to make changes to the plugins as needed, such as adding or removing rendered stuff, adding helper components, etc.

Notes:

In the mockups, I had said that a minimal implementation of the annotation sidebar would show the georeference annotations in the sidebar similar to the screenshot above. However, I think we can still have some nicer integrations where we can take advantage of the fact that these annotations target other annotations. There is a hook in the annotation component's props that may help with this.

Could we show a popup/tooltip or some other component with the URL and tag appear when we hover over the appropriate words in a transcription? If we get the annotation to look nice in the sidebar, would could potentially drop it into a tooltip that appears during some other interaction.

[GroovinChip]

So basically we're looking at font, text color, and padding/margin, right @jabrah?

[jabrah]

@GroovinChip At a minimum, sure. But also feel free to redo the JSX in the components. Like if you want to restructure how things are setup with different or extra components or anything, those kinds of changes should be good. If we need to change props set in various components, we should talk about that, but that should be fine too

[GroovinChip]

@htpvu @jabrah Updates:

• Made font in our custom panel match the default Mirador font (Roboto)
• Made padding in our custom panel match that of the default panel

Is there anything else that needs to be done @jabrah?

Screenshot:

[jabrah]

I think it would be helpful to also adjust the content displayed for annotations in a separate PR, at least for the georeference annotations.

I have a crappy mockup here, but please don't feel restricted by this.

I think it is important to display the information from all of the annotation bodies in a clear way, but I am also not great at design, so I'm not exactly sure what it should look like

[GroovinChip]

I'm not clear on this - you want the labels like "Creator" etc to be italicized?

[jabrah]

Some concrete changes we can make right now:

• [x] Remove the string "Label: " and display just the value
• [x] For both "Comments", "Tag", and "Creator" parts (if they are rendered)
  • [x] Label text should be on separate lines and italicized (like the "Comments: " string seen above)
  • [x] Value should be on its own line and indented for readability

[GroovinChip]

I will be working on this today

[GroovinChip]

@jabrah the 'comment' tag generally seems to be within parenthesis, is that correct? See screenshot:

[jabrah]

We should get rid of the parenthesis here and capitalize the 'c' in "comment". I think it's inserted in the AnnotationBody component.

[GroovinChip]

@jabrah How's this: Do you have any preference on indentation? I'm currently doing 8px

[jabrah]

I don't have a preference on indentation. The screenshot looks good to me

[GroovinChip]

Closed by https://github.com/jhu-digital-manuscripts/rosademo-frontend/pull/9