reordering pagination

Development UX
1

I’m working on reordering the pagination buttons for the out-of-sync lists.

Due to the window and font dynamics the ‘next’ and ‘previous’ buttons tend to move which is a little but frustrating :sunglasses:

So I moved the pagination to the top, changed the button characters to nice arrows. Now they are at fixed positions and it’s easier to click through. Not perfect, but on its way :sunglasses:

ST-fix-pagination
ST-fix-pagination1245×1235 154 KB

Now you can click-click-click-click-click through the pages.

I modified

gui/default/syncthing/transfer/failedFilesModalView.html
gui/default/syncthing/transfer/neededFilesModalView.html
gui/default/vendor/angular/angular-dirPagination.js

but I desperately fail on

gui/default/syncthing/transfer/remoteNeededFilesModalView.html

due to my ignorance of learning how to code in javascript… there are some arrays and other magic stuff …

I’d also like to move the close button to the top, since it disappears when the list get too long.

So… if this new layout would be accepted, is anyone willing to help me ‘fix’ remoteNeededFilesModalView ?

Is it OK to modify files in ‘vendor’, or do I have to create pull requests upstream and wait until they accept and pull ?

2

It’s usually not ok to modify vendor directories.

Your issue could be solved by tweaking the css to make the buttons stable, as going to the next page should not move the modal up or down (unless it’s the last page), so it doesn’t matter if its on the top or bottom, and the arrow placement should not matter.

You can click anywhere outside of the modal to close. Also it’s possible to add an x icon in the corner.

It seems you should only be changing css/template for the buttons so not sure why you should care about arrays of things etc.

I personally don’t have a strong opinion on the matter, yet my only concern is that it feels not like other pagination widgets users are familliar with that are seen elsewhere.

1 Like