The new note button should be inline with the selection tabs

sheetaluk commented 6 years ago

Steps to reproduce

Open the 'page notes' tab in the client.

Expected behaviour

The new note button should be in line with the selection tabs.

Actual behaviour

The new note button appears in the next line, looks off.

sheetaluk commented 6 years ago

@dawariley please take a look.

sheetaluk commented 6 years ago

We have to also stress test for cases when there are several annotations/notes/orphans (100000). @segdeha suggested we could possible show something like '999+' instead of the exact number.

The other thing we should do is think about localisation.

lyzadanger commented 4 years ago

This button does still appear on the next line, but I had always been of the impression that this was intentional:

This button only appears if the experimentalNewNoteButton config property is set (i.e. not for Hypothes.is or LMS users) and is rarely seen in the wild.

I am not sure that it should be on the same line as the tabs, and making it show up there is a bit of a fiddly bit of CSS work (not impossible, certainly, but I want to inquire after the value of this work).

@klemay Thoughts?

klemay commented 4 years ago

I tend to agree with you re: the button not "belonging" on the same line. I asked this question in #design in Slack and will update here when we have reached a consensus.

klemay commented 4 years ago

Update: having the button on the same line as the page notes and annotations tabs is preferable, but not something we want to spend a lot of time & effort on at the moment.

lyzadanger commented 4 years ago

This is both really easy and irritatingly nuanced. Getting it on the same line as the tabs is as easy as putting the button in the same div as the rest of the tabs (it's rendered by the SelectionTabs component) and making that div align-items: center.

However, the vertical space required by this button is more than the tabs usually use up, meaning that the tabs will appear to "jump around" on the Page Notes tab where this button appears.

On a tab where the new-note button doesn't appear:

On the Page Notes tab. Note that the tabs now take up more vertical space (the total space between the top bar and the first annotation card is larger):

There are two possible ways to address this that I can think of:

Allot the tabs the needed vertical space on all tabs when this button is enabled, i.e. the tab slot is always taller when this button is enabled, regardless of focused tab. I think this is the ideal solution (honestly, the tabs could use a little breathing room and it fits the visual rhythm better) but I know there is ongoing heartache over the preservation of vertical space in the layout
Restyle the button as a textual, link-style button instead—there's not enough room here for a button, without needing more vertical space.

cc @klemay

klemay commented 4 years ago

After discussing in Slack, we have a vote strongly in favor of restyling the button as a textual, link-style button. Given this is a small detail that is really only seen in 1 place (on elife content), I think it makes sense to approach this from "make the button fit the sidebar" rather than the other way around

hypothesis / client