My thoughts for a GUI 1.0 | looking for a frontend developer :)

hi there! as I said, I made some thoughts about a new interface. These are my results:

clean Desktop with

  • Device-identifikation by color (for unconscious recognition of devices)
  • chart for up & download-speed
  • chart for CPU & RAM usage
  • future feature?: pause syncing >> delete!

LARGE @ 1920x1080 Dashboard (folderview) (default view)

Dashboard with popups

Device /Syncthing-Settings (own device)

Device-Settings (node)

Folder-Settings

filesync details

add folder modal cxl (see popup)

add device modal cxl (see popup)

(restart) modal cxl (see popup)

Opened Device and Folderdetails (accordion) cancelled tnx2 @calmh

MEDIUM @ 1024x768 Dashboard (folderview) (default view)

Device /Syncthing-Settings (own device)

Device-Settings (node)

Folder-Settings

filesync details

(restart) modal cxl (see popup)

add folder modal cxl (see popup)

add device modal cxl (see popup)

SMALL @ 540x960 Dashboard (folderview) (default view)

Device /Syncthing-Settings (own device)

Device-Settings (node)

Folder-Settings

filesync details

(restart) modal cxl (see popup)

add folder modal cxl (see popup)

add device modal cxl (see popup)

looking forward to your feedback :yum:

9 Likes

Looks nice.

1 Like

…bit too colorful in my opinion. I love using boxed, clean and flat designs - but couldn’t (yet) transpose it to syncthing :relaxed:

btw: what about some pause feature to pause syncing?

1 Like

Looks nice, to me, defintely better than the current.

Maybe reusing the node specific icons from the current ui in the “Share with” column and device box would be better.

1 Like

thanks! I know from work that recognising thinks works much better with colors than with “forms”. By using colors we could color the corner of the navbar as the devices color is chosen. Honestly I dont like the color-boxes in the “shared with” column too. :stuck_out_tongue_closed_eyes:

A few more cents :wink:

  • Rename the column “local/global” to “State” and use the small font with the existing local/global logos on two lines. Also do this for “Size” to have local & global info here too.
  • “Foldername” is not such a nice column name.
  • What is the meaning of the red pause button? If red means the folder is paused maybe it should display a play sign instead of pause.
  • Last, the memory gauge might be better off with actual value rather than percentage.
1 Like

Just to make sure that previous work isn’t overlooked:

cross post from /custom-gui-mockups-and-programming/

Is there anybody who would develop this GUI (with me)? I could do any needed graphical-work - but developing :unamused: not.

the red pause button has two features:

  • it indicates the process of syncing (red 0-33%, orange 34-66%, green 67-99,99%)
  • it’s the button to pause and resume syncing so this one button shows the sync-process (running and paused) and allows you to pause and to resume :relaxed:

Personally I would find such dual-meaning confusing :smile:

1 Like

already changed it :slight_smile:

Are you working and updating this design: https://projects.invisionapp.com/share/AB2A6DYZN#/screens out of this issue?

nope… it could be a alternative UI or in the end some idea. I think the mockups of Brennan are really nice but imho too flat or plain. (dont know the right words)

and there are some points I would not do like in these mockups - important features are missing.

I would be interested to develop this. Just figured out how to edit the GUI.

My goal is to use this at work where we do projects in teams. Lots of folders/devices. The plan is to first hide useless information and make better use of screen estate. Expect something more like BTS2.

1 Like

what is/are the useless information for you?

Let me tell you what I think is useful:

  • folder
    • size + itemcount + peers for synced folders
    • progress for syncing folders
    • error/status for other
  • device
    • ip (+ maybe last statechange) for connected devices
    • last seen for disconnected devices
    • error/status for other
  • appearance:
    • mostly the basic options
    • option to disable help text
  • settings
  • advanced

Moved some code around to get a more “firefox/chrome settings”-like screen

[quote=“thgh, post:18, topic:3002”]foldersize[/quote] watch the mockups

[quote=“thgh, post:18, topic:3002”]itemcount[/quote] watch the mockups

[quote=“thgh, post:18, topic:3002”]peers for synced folders[/quote] watch the mockups

[quote=“thgh, post:18, topic:3002”]ip (+ maybe last statechange) for connected deviceslast seen for disconnected deviceserror/status for other[/quote] ok

[quote=“thgh, post:18, topic:3002”]last seen for disconnected devices[/quote] ok

[quote=“thgh, post:18, topic:3002”]error/status for other[/quote] whats other in this context?

[quote=“thgh, post:18, topic:3002”]mostly the basic options[/quote] ok - not yet layouted

[quote=“thgh, post:18, topic:3002”]option to disable help text[/quote] which help text? you mean the description text below the option-fields riight?

I personally would like to be able to group the devices and folders. I’m starting to get a lot of both and it would be nice if I could organize them.