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

[canton7 (Antony Male)]

Also, how does it scale to small screens? Will it work on my phone?

[sgilani]

Hi Eddy2909,

i would like to see, that you get in touch with one of my bootstrap GUI developers to change the GUI, but please at first prepare also some design for Bootstrap XS SM MD LG (LG you had already)

[Eddy2909 (Adrian)]

sure - it should!

[canton7 (Antony Male)]

@Eddy2909

sure - it should!

What will that look like?

[Eddy2909 (Adrian)]

give me some days

[Eddy2909 (Adrian)]

@canton7

I don’t like the drop-downs for adding new folders/devices. Since there are only 2 options available, why not have 2 buttons?

there are no dropdowns for adding devices & folders

@canton7

The network graph takes up a huge area of the screen, by comparison with everything else

yes but its beautiful

@canton7

The ‘Action -> copy to clipboard’ on the Device ID seems a bit pointless. Why not just have a button to copy straight to clipboard?

this would be probably to long on little devices

@canton7

The Reused/Copied from original/Downloading/etc colours on the ‘Sync-Details’ page are too similar. People with forms of color blindness especially are going to hate you here, but as a color-seeing person I have to keep cross-referencing the colors against the key.

agree

@canton7

The ‘restart needed!’ dialog is going to get annoying. Fast. What if you want to change a bunch of settings, then restart once afterwards? You’re going to have to click ‘later’ a bunch of times, and it’s going to piss you off.

agree

@canton7

Why is there a ‘GUI Authentication User’ under ‘Folder-Settings’?

good question will fix it!

@canton7

Some numeric boxes have little < and > arrows, but others don’t.

tnx

@canton7

The icon you’ve used for the Syncthing version means ‘fork’, not ‘version’

agree - couldn’t find the icon syncthing uses.

@canton7

The options to shut down / reboot Syncthing are really hidden.

let me think about it…

@canton7

I’m not a fan of the toggle buttons

ok

[canton7 (Antony Male)]

@Eddy2909

there are no dropdowns for adding devices & folders

This image:

https://forum.syncthing.net/uploads/default/original/2X/b/bc26a3f65a0016bb881e954a92c60c17248a7320.jpg

@Eddy2909

this would be probably to long on little devices

I’m not sure what you mean by that. See for example GitHub’s little ‘copy to clipboard’ icon next to every commit it displays.

@Eddy2909

agree - couldn’t find the icon syncthing uses.

It’s the icon-tag icon here: Bootstrap Glyphicons

[Eddy2909 (Adrian)]

@canton7

This image:

I see. you’re right - it’s not clear enough. There would be some combinations possible, that wouldn’t make sense: “blacklist” & “add device” but by changeing the button text to “ok”, it would make sense and would give following combinations: “whitelist” & “ok” “blacklist” & “ok” “just add” & “ok” “later” & “ok” only to give white- and blacklist as options, it would be difficult to explain what it means / the button text would be too long or what do you think? any other ideas on that?

@canton7

I’m not sure what you mean by that. See for example GitHub’s little ‘copy to clipboard’ icon next to every commit it displays.

@canton7

This image:

I tried not to use hover blobs because smartphones won’t display them.

@canton7

It’s the icon-tag icon here: Bootstrap Glyphicons

tnx

[canton7 (Antony Male)]

@Eddy2909

I see. you’re right - it’s not clear enough.There would be some combinations possible, that wouldn’t make sense:“blacklist” & "add device"but by changeing the button text to “ok”, it would make sense and would give following combinations:“whitelist” & “ok”“blacklist” & “ok”“just add” & "ok"only to give white- and blacklist as options, it would be difficult to explain what it means / the button text would be too long or what do you think?any other ideas on that?

I think you misunderstand. I mean have buttons saying “Later”, “Just This Folder”, “Whitelist”, “Blacklist”.

@Eddy2909

I tried not to use hover blobs because smartphones won’t display them.

This thing!

[Eddy2909 (Adrian)]

@canton7

I think you misunderstand. I mean have buttons saying “Later”, “Just This Folder”, “Whitelist”, “Blacklist”.

I’ll try it with the next update

@canton7

This thing!

I’ll try this too

[Eddy2909 (Adrian)]

all mockups are designed to be coded with bootstrap and a good grid “policy” but give me some days… I’ll make some responsive mockups.

[Eddy2909 (Adrian)]

update 07.07. added S & M Version 0.1

used display sizes: S: 540x960 M: 1024x768 L: 1920x1080

ToDo’s:

• add advanced settings “box” (cxl for grandmoms https://github.com/syncthing/syncthing/issues/1381#issuecomment-119741323)
• add copy to clipboard icon (done)
• rethink add folder & add device (done)
• delete all not yet developed features (done)
• rethink restart prompt (& delete white- &b lacklist feature) (cxl not developed)
• change filesync indicator color (done)
• add arrow boxes to numeric fields (done)
• fork > version icon (done)
• use one(!) icon “framework” for consistency
• add anddroid like identicons to filesync view (cxl My thoughts for a GUI 1.0 | looking for a frontend developer :))
• add colored identicons (done)
• change order devices >< folders on small devs (done)

[calmh (Jakob Borg)]

I’d actually suggest switching the position of everything across the center:

The reasoning being that the most important stuff should be at the top and left (I know the left-right part is cultural, but still). The most important thing to me is the status of the various folders, then that of devices, then lastly discovery details and resource usage of various kinds…

It still feels a bit cramped to me…

[eyeson]

I agree with the cramped - I would prefer a space between the left and right, like there is between top and bottom. I also feel the network graph is too prominent. Just by 2 cents.

[Eddy2909 (Adrian)]

hey guys,

I choosed this layout out of several reasons:

• it should feel a little bit like a “admin panel / dashoard”… I have not seen any dashboard with a “menu” on the left side so far oO (and most of clicks will be on the right side (folderview) / best for the right handers
• the part above shows where you are / the local machine info (for orientation)
• the part below shows what is happening in the network
• the important thing: the part below linkes the folders and devices - thats’s why I wouldn’t add spaces between the “boxes”
• this part is the only one who could get longer and longer depending on your devices and folder list. If we change the order and you add let’s say 10-15 devices and 20 folders you couldn’t see the local info at all
• I will rethink the part above - it’s indeed to big.

[bigbear2nd (Bob Hope)]

Please do not throw away the device icons.

It is a very quick way to recognise a device when you are working on serveral different computers.

[Eddy2909 (Adrian)]

Humans may better recognise “where” they are by colors than with forms…

lets test it - try to remember the devices:

[Eddy2909 (Adrian)]

so now: which icon stands for which device? whithout cheating

a second and a third reason is:

• recognising by colors works unconsciously - you wont need to use your brain
• using colors for designs is much easier because I can use the color in any form I need to

[bigbear2nd (Bob Hope)]

For me, these icons look like: The Mask, the Animal and the King. They are calculated by the IDs, so they are on all webinterfaces the same.

I can change the name of the device freely (and I do, “Moms PC” on my PC has a different name on my girlfriends pc)

If the color can different on all pcs, too… Difficult.

[Eddy2909 (Adrian)]

@bigbear2nd

If the color can different on all pcs, too

maybe we could generate a color out of the identicon data - better: we would change identification to colors / rbg or hex data. (@calmh) otherwise you have to setup a color on every device.