Page MenuHomePhabricator

Create a floating edit button
Open, Needs TriagePublic

Description

TODO
Make this a real story written story!!

As a user of the termbox I want to switch to edit mode at every position of the termbox. Currently the edit button is only placed next to the interface language of an item.

Therefor we want to show a floating button, which appears when the original button has left the screen (because of scrolling) and keeps it position throughtout scrolling to the end of the termbox.

See gif as reference.

Floating button.gif (922×472 px, 2 MB)

Find the prototype here
https://www.figma.com/file/5Q9VXVWcovtcMnZdIgn3uU/Termbox_Editing-Adding-190312?node-id=286%3A47

  • the floating button should float "over" the section collapse/expand arrow buttons while the restyling (T223452) has not happened
  • it should have a white background to cover buttons below it while T223452 is not done and fade in when the top edit button scrolls out
    • starts fading in when the top one starts scrolling out
    • ideally, fading happens with the scroll position
    • the top edit button scrolls out and does not fade out (stays at 100% opacity)
  • floating button has a drop shadow
  • when reaching the end of the termbox section, the floating button docks to the bottom of the termbox section and scrolls out. It's ok for it to cover the "fewer"/"all entered languages" button
  • the floating button disappears once the top edit button scrolls in again, and undocks from the bottom when scrolling up to the termbox section
  • behaves the same as the top edit button when clicked
  • in case the termbox is shorter than half of the screen height the floating edit button will dock / stick to the lower end of the termbox
  • if both the top edit buttons and the floating edit button are visible (mid transition), then both will turn into publish and cancel button when either is clicked