Redesigning?!

[pento]

@karmatosed was kind enough to spend some time on redesigning the entire app, making it so much nicer to interact with.

Here are some screenshots!

[pento]

@karmatosed: There's a few things I'd like your thoughts on.

The status dots are currently all round, with orange and red showing a pulse animation: using CSS animations, it's kind of possible to add a pulse animation to a square shape, but impossible to add to a triangle shape. I think it'd really only be possible to do this with an animated image.

A few bits feel misaligned, particularly the gear/X icons. Do you think they need adjusting?

The lovely white theme doesn't really fit with Mojave's new dark mode, but there's no rush to fix that quite yet: I don't think Electron exposes whether dark mode is enabled, so I don't think we can implement it.

The "Building environment" state can take a minute or so on initial startup, or when Preferences are saved. Do you have thoughts on displaying progress? I can probably figure out a way to (very roughly) estimate how far through the build process we are at any given time, if you like the idea of a visual progress indicator. I probably can't figure out time remaining to any degree of accuracy.

I just realised that there's no button for quitting WPDE, as we don't have menus or anything like that. We should probably add a quit button. 🙂

[pento]

Oh, another thing I was thinking about: the task bar icon could be a good place to show that building is in progress. Docker has something similar, animating the containers on the whale/ship while it's starting. You can see it by opening the Docker menu, and clicking Restart.

[pento]

Update: I added a quit icon. Gridicons doesn't really have a quit icon, so I improvised a little. 🙂

[pento]

Extra note: the command is now npm run dev to run the development environment, not npm start. I managed to trip myself up for a bit when I forgot that I changed it. 🙃

[karmatosed]

@pento this is looking great. I do have a few little adjustments I'd like to see to bring it more inline withe some mocks I made before:

Could we make borders around things a little lighter for example inputs and also the seperators? Let's go with #ccc for those.

Line height seems a little tight in text. Maybe have it look a little more like this? I think the text in screenshots seems to not reflect directly what I have here so let's tighten that up a bit if possible.

Icon wise as that usually denotes a link could we just have a 'x'? I do wonder though why do we need a close? What does that do quit the entire app? If it quits then maybe having under settings as a close icon? I'm unsure there but I think that could be a solid step. This maybe is an idea...

The status dots are currently all round, with orange and red showing a pulse animation: using CSS animations, it's kind of possible to add a pulse animation to a square shape, but impossible to add to a triangle shape. I think it'd really only be possible to do this with an animated image.

As this feels like a tricky thing lets just for pulsing now as we also enhance what state with the text.

The lovely white theme doesn't really fit with Mojave's new dark mode, but there's no rush to fix that quite yet: I don't think Electron exposes whether dark mode is enabled, so I don't think we can implement it.

Hopefully that will get picked up as that would be great to switch. We could also add a setting for dark/light mode perhaps in the app? I kind of like that idea as we could add things like a11y options.

[pento]

Cool, I've made these tweaks.

I'll leave dark mode out for now: it'll take some time to implement, and there are more important things to work on. 🙂