feat(ui): custom stylesheet and background image

[kerbilg]

Closes: #758

Hi, to use this feature just create a folder named '.fluidd-theme', add a custom.css and background(.jpg, .png, .gif) file in this folder and go :)

So here is a demo:

Signed-off-by: Kerim Bilgic kerbilg@outlook.com

[pedrolamas]

Quick question on this: why are we doing calls via the HTTP endpoint instead of using the socket? Mind you, we can use data urls for file contents (we do that in a few places already!)

[kerbilg]

Quick question on this: why are we doing calls via the HTTP endpoint instead of using the socket? Mind you, we can use data urls for file contents (we do that in a few places already!)

I had already tried it, in the end I had some watchers which also worked theoretically, but they spammed the application full :/ That is also one of the reasons why this small commit took so long. I had oriented myself on the file system. Where else is it used?

[matmen]

Quick question on this: why are we doing calls via the HTTP endpoint instead of using the socket?

I don't think Moonraker supports file downloads via the socket, see https://moonraker.readthedocs.io/en/latest/web_api/#file-download. I think getFile can be used here with some modifications (hiding the progress modal) instead for cleaner code.

Over all it would be nice to supply a Blob URL to the corresponding URL sections in order to have the styles and images pre-fetched and for the styling to be applied all at once, providing a better user experience with async loading:

fluidd/src/components/widgets/filesystem/FileSystem.vue

Line 610 in dbce445

const blob = new Blob([response.data], { type })

[pedrolamas]

I made some changes (on a separate PR that @BastelKlug just merged to his), specifically:

• removed the direct calls for "oneshot" calls (instead there is now a createFileUri method from the files mixin)
• removed the listing of the files via HTTP API and moved to the socket (download is still via HTTP API call)
• customBackgroundImageStyle is now an object instead of a composed string

[pedrolamas]

I don't think Moonraker supports file downloads via the socket, see moonraker.readthedocs.io/en/latest/web_api/#file-download. I think getFile can be used here with some modifications (hiding the progress modal) instead for cleaner code.

Over all it would be nice to supply a Blob URL to the corresponding URL sections in order to have the styles and images pre-fetched and for the styling to be applied all at once, providing a better user experience with async loading:

I agree, and that is probably what we should explore next as a way to improve this PR!

That does makes me think if it's worth allowing background images (which is quite easy to update as it is now), or just have that inline in the CSS as a data url (which is not trivial to change/update)

[matmen]

That does makes me think if it's worth allowing background images (which is quite easy to update as it is now), or just have that inline in the CSS as a data url (which is not trivial to change/update)

I think either would be fine, though I assume having everything in the custom config would make it more dynamic? I think by applying customBackgroundImageStyle to the element directly other CSS can't affect it (element style overrides stylesheets). Maybe we can just inject the URL (statically replace for example {{ backgroundImage }} with the blob URL)? Open to any solution here, though.

[pedrolamas]

I think I finally got this working correctly with the socket (files are still downloaded directly though)

[pedrolamas]

I think this is good to merge, @matmen want to take a new look at it?

I think we can merge this now; there will be changes to the Moonraker File Manager API but that might still take some time, so no point waiting.

[matmen]

Love it, LGTM!