Page MenuHomePhabricator

Research: floating button [1*4h]
Closed, ResolvedPublic

Description

Motivation
The termbox allows users to edit all of its content, but with static buttons this is not very clear. Initially we thought that it would be cheaper to have 3 buttons behaving identically, but maybe that is not the case and we could jump to ideal state immediately.

Acceptance Criteria

  • be able to take a decision whether having three static edit buttons is much cheaper to implement than one floating button
  • be able to say if there would need to be different options for CSR and SSR

Notes
Look for a library to create floating buttons in vue. If there is a promising one, and the prototype works, let's go with the floating button immediately.

Use Cases of Floating buttons (sorted by importance)

  • we are able to transform a button from a fixed position to a sticky position, e.g. the edit pen of the UI language fingerprint will remain in the upper third of the screen while scrolling through all the languages of the termbox. It will be able to scroll out, if scrolled further than the termbox aka reaching the statements section
  • we have a vertical bar/line which sticks to the bottom of the screen for a certain section of the site, e.g. a reactangle with "Add language" and a + icon will be visible at the end of the termbox if "All entered languages" is collapsed. It will be sticky at the bottom of the screen when "All entered languages" is expanded. It will scroll up, when the lower end of the termbox is reached and statements appear
  • part of the termbox will be condensed and sticky at the top of the screen, while while browsing thruogh the termbox (and potentially even beyond as this will always be a great thing to have.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 21 2019, 3:04 PM
Lea_WMDE renamed this task from Research: floating button to Research: floating button [1*4h].Feb 25 2019, 11:20 AM
Lea_WMDE triaged this task as Normal priority.
Lea_WMDE updated the task description. (Show Details)

If possible also come to a conclusion whether a "floating bar" would be possible as well.

Tarrow claimed this task.Mar 14 2019, 2:51 PM
Tarrow edited projects, added Wikidata-Termbox-Iteration-11; removed Wikidata-Termbox.
Tarrow moved this task from To Do to Doing on the Wikidata-Termbox-Iteration-11 board.

to get a better understanding I could see things work like the following examples
the edit pen could behave like the "Spenden" button on the right side: 1. fixed position, 2. scroll and stick/float, 3. scroll out

the add language could behave as follows: 1. appear at a certain point, stick to the bottom of the screen, 3. scroll/fade out

the compressed headline could behave like this:
URL bar


Folder headline

Looks like the general term for this concept may actually be 'sticky' and not floating.

Things I've looked at:

Things to keep in mind:

  • Big depgraph might also mean additional work for security review.

As per showing it off in the office I would recommend that we go ahead with vue-sticky-directive. This has a couple of open questions:

  • License is only said to be MIT but no details. Maybe we should check this out
  • No dependencies but quite some devDependencies that we probably don't want?
  • Do we want to fork for our own use and make typed?

FYI there is a callback for "docking and un-docking" the sticky that we could use for things like: header compression and shadows.

Tarrow added a comment.EditedMar 19 2019, 11:15 AM

I've mailed about the licensing issue and created a PR.

I would suggest that having a simple sticky button for entering and exiting edit mode is not significantly more expensive than three button. It may even be comparable in cost since we then won't need to manage the state of three buttons as we enter and exit edit mode etc..

IMHO we should go direct to the floaty/sticky button. But leave the "extra features" (like shadows) that are not in any story yet for another story.

It does not appear that there would need to be different options for CSR and SSR assuming we are happy for SSR with no JS to remain non-floaty/sticky.

Thanks @Tarrow.
From a UX perspective that sounds wonderful!

License PR for vue-sticky-directive is in: https://github.com/mehwww/vue-sticky-directive/pull/17
I briefly looked at vue-sticky-directive and vue-sticky (having much more github stars) but could not get either of them to "just work" quickly. The proposal to use an existing lib is sound no less, and the UX challenge we try to solve is now rather well described, so I believe we are good to go trying this for real.

Pablo-WMDE closed this task as Resolved.Apr 8 2019, 10:40 AM