Alternative GUI mod

Feature
11

@imsodin Thanks for the feedback.

  1. I removed the animation from the progress bar.
  2. I changed from link to button again and moved it under the folder table (where it makes more sense)
  3. I added some description tooltip

I will implement some (experimental) solution for the device/folder details - maybe at the weekend.

I will keep you guys posted :slight_smile:

4 Likes
12

Great!

13

Wow great work Luke! I’m the designer of this UI and I am extremely happy that someone took the time to implement it.

I haven’t tried it out yet but I thought I’d start by just giving you some quick comments based on the screenshots but I plan on trying out the mod later.

These are my main comments at the moment:

  • It would be good to increase the padding a bit for the table to match the one in the design and make sure it is even for top and bottom.
  • Text in the table, icons and buttons should all be centered vertically.
  • The action buttons should be even in height and width
  • Add the syncthing blue color to the folder icons and the local device icons up top. And also the buttons if you want to follow the design strictly :slight_smile:
  • Add slightly rounded corners like 4px to the table and buttons

That’s it for now. Keep up the good work and again I am really happy to see this become a reality after all this time. Feel free to reach out to me if you need any help or have any questions.

Cheers!

P.S. did get started on implementing it myself a while ago but never found the time to continue. Feel free to copy some of the styles though if it’s helpful to you: New GUI by gillisig · Pull Request #2425 · syncthing/syncthing · GitHub

1 Like
14

Does anyone know how to install this on Synctrayzor?

15

If you’ve got the installed version, follow the same instructions as for normal syncthing. If you’re using the portable version, you’ll want to extract the zip into the ‘data/syncthing’ folder instead.

16

I think when using the portable version of Synctrayzor it’s data/syncthing

17

So it is, my bad.

18

Hey Gilli,

I’m more than glad to talk to the original creator of the mockups. You did a great job!

You pointed out some issues that make the GUI look even better. At some things I wasn’t sure to find out what the issue was that it doesn’t look that well (e.g. the vertical centering).

It would be good to increase the padding a bit for the table to match the one in the design and make sure it is even for top and bottom.

Do you mean the padding of the cells?

Do you have any idea for presenting the advanced device/folder info?

19

I implemented most of the suggested changes.

I’m still seaching for a way to show the advanced folder/device info. At the moment I’m showing a popover, but I don’t really like it.

Please check the new screenshot:

Screenshot2.png1350×615 26.5 KB

20

The update looks better again, so next round:

  1. For me the blue text in the buttons looks weird, I would prefer them black as all the other text in the top/bottom-bar and tables.
  2. The symbols in the action buttons are not centered and the box is not quadratic (purposely?).
  3. Why are Pause and Edit button on devices only appearing on mouse-over? Imo the available options should be visible without poking around with the mouse. Related: The device entries shift vertically on changing mouse position (e.g. moving mouse from lower device to upper shifts the lower one down).
  4. Text in all the “normal popups” (e.g. on status symbol) is not centered.
21

Hey Simon, thanks for the feedback.

  1. It’s a design decision - i think it depends on the user’s taste. First the buttons where black, in the drafts they were always blue. I like the blue version. I created two screenshots of alternative versins. Check them out :wink:
    blackblue.jpg885×556 40.5 KB
    blackgrey.jpg864×540 36.6 KB
  2. Center issue fixed, rounded buttons are intentionally.
  3. I decided to hide the device buttons - otherwise the whole interface would be cluttered with buttons.
  4. What popups do you mean? The “What is it” tooltips? At my computer (including chrome, firefox and IE) they are centered?

Best, Luke

22
  1. Sure, that’s all up to taste, I just wanted to share my opinion - and I might not have even been clear what I meant: I like the blue button borders and symbols, I just think it is inconsistent to use black text in the table, header and footer (there are blue symbols there too) but in the buttons the text is blue. Also this is complete nitpick mode, so I don’t actually mind either way.

2. 3. 4. All the remaining centering issues plus the described vertical displacement of devices only occur with Firefox, not with Chromium. No clue what the issue might be here.

23

This gui mod is very nice but with Synctrazor its lacks button “Open folder”. Is there any way to fix this?

24

No. The “Open Folder” button (and the “Browse” button for selecting a file path when creating a new folder) are done in a very very hacky way, which makes lots of assumptions about the GUI.

If this becomes official, I’ll add support for it in SyncTrayzor.

1 Like
25

Thank you, Antony, I’ll be wait for this addition.

26

Great work luke, already looking a lot better!

Yes, it’s especially noticeable on the far left and right ends. It’s just too tight on the edges.

Also I think centering the text in the table header would look better.

Do you have a screenshot of the latest version?

27

Some good progress is going on, great work @luke!

28

Hello! Is there any plans to include this mod into official Syncthing distr?

29

Due to lack of time I’m not continuing this project any more. But maybe somebody else is interested? Would really appreciate it, since I’m still using and loving Syncthing.

30

Thank you very much for this nice GUI mod.

p.s. Dear Sytncthing developers, please add this mod to Syncthing, and Antony Male ( canton7) will add support of it in Synctrayzor.