[WIP] Added a floating banner to the diff view

Review Request #8746 - Created Feb. 14, 2017 and updated

Orjan Monsen
Review Board
master
53d5c1c...
reviewboard, students

We currently have to scroll all the way to the top if we want to be navigated to a
specific diff file.

I added a floating banner to the diff view that sticks to the top of the page when
the user has scrolled down on the page. On this banner, I will further add a
collapsed list of the diff files, showing only the the file that the user is currently
looking at. The user will be able to expand this list to navigate to the other files.

Screenshots and demo video: Notion

I have tested the floating banner on the dev server on review requests with multiple
diff files.

I have started writing jasmine tests for the floating banner. This is still a WIP.
The banner has been manually tested (including responsiveness) on Chrome, Safari, and
Firefox. Click here to see GIFs of the manual tests (running on diff revision 13).

Further testing on other browsers are required.

  • 0
  • 0
  • 11
  • 3
  • 14
Description From Last Updated
Review Bot
Orjan Monsen
Orjan Monsen
Daniel Bak
Orjan Monsen
Review Bot
Orjan Monsen
Review Bot
Orjan Monsen
Review Bot
Orjan Monsen
Review Bot
Raman Dhatt
Orjan Monsen
Review Bot
Orjan Monsen
Review Bot
Orjan Monsen
Review Bot
Orjan Monsen
Review Bot
Barret Rennie
Orjan Monsen
Review Bot
Barret Rennie
Orjan Monsen
Orjan Monsen
Orjan Monsen
Orjan Monsen
Anni Cao
Anni Cao
Orjan Monsen
Orjan Monsen
Orjan Monsen
Orjan Monsen
Review request changed

Description:

   

We currently have to scroll all the way to the top if we want to be navigated to a

    specific diff file.

   
   

I added a floating banner to the diff view that sticks to the top of the page when

    the user has scrolled down on the page. On this banner, I will further add a
    collapsed list of the diff files, showing only the the file that the user is currently
    looking at. The user will be able to expand this list to navigate to the other files.

   
~  

Screenshots: Notion

  ~

Screenshots and demo video: Notion

Testing Done:

   

I have tested the floating banner on the dev server on review requests with multiple

    diff files.

   
   

I have started writing jasmine tests for the floating banner. This is still a WIP.

    The banner has been manually tested (including responsiveness) on Chrome, Safari, and
~   Firefox. Click here to see GIFs of the manual tests.

  ~ Firefox. Click here to see GIFs of the manual tests (running on diff revision 13).

   
   

Further testing on other browsers are required.

Loading...