search

trompamusic / music-scholars-annotator

A tool for creating annotations of musical scores
https://trompamusic.github.io/music-scholars-annotator/
BSD 3-Clause "New" or "Revised" License
2 stars 1 forks source link

Interface overhaul #15

Open fedezubo opened 3 years ago

fedezubo commented 3 years ago

Overall page needs a rework

fedezubo commented 3 years ago

Relocate annotation elements to not be so far down the page, should be front and centre for using. Possibly relocate the login and element load toolbox to smaller size at top or bottom of screen since that is not used as much during the annotations.

Make Page Turn and Zoom Bottoms much more visible on smaller screens. Makes sense if they are on massive monitor, elements get jumbled on smaller screens. Possible to add visual cue to show where these tools are on the page

fedezubo commented 3 years ago

123

alastair commented 3 years ago

We had a discussion about this in more detail. We think that the following steps would be useful:

Use bootstrap to create a top nav bar with the logo and login/logout button

When a user logs in, show only input boxes to enter a URL, choose an example, or search the CE

When the user selects an item, hide the input boxes. Include a [New] button in the menu bar that allows the user to start again. Use react router for this.

When a score is loaded, give the user 2 options: Annotate, or use F-tempo. When an option is selected show the tools only for the specific operation that the user selected.

Continue with the layout of the score on the right and tools on the left.

Configure the score to stay in place even if the tools scroll

alastair commented 3 years ago

Most of this workflow was done in 7764397409c3f953e87d181ac2cb3317a3aebc38 and a9da832232cea31e05505a101279bdd46949b63f

Still remaining is to add the score and main annotation interface to a react grid in order to make it easier to deal scrolling, and the selection of annotate/use f-tempo