Fix UI

[zelfroster]

Since, There should be different options for the Appearance tab in webui. I needed to fix the typography first and make the UI a bit consistent.

I will do this bit by bit, but first I am going to fix the things which are most important and make sure that they look good enough and are usable.

Likewise, I have defined the typography and took inspiration from tailwindcss-font-sizes

And this is the homepage of webui which I have redefined.

Please give some feedback @csoler @defnax

[zelfroster]

This is the Network tab where the content is scrollable but the heading remains fixed so that the search bar remains visible. And I will try to do this with every section with a consistent UI.

[zelfroster]

This is how People tabs look right now.

[defnax]

something in mails is broken? it does not show more the top field and columns

[defnax]

im not fan of big buttons i like more how on professional web mails with small buttons :)

the subject field is on wrong place :)

[zelfroster]

something in mails is broken? it does not show more the top field and columns

For now, everything else must look broken, which I have not fixed yet. So, just some more time needed.

[zelfroster]

Made Download UI a bit better. But getChunkStrategy() is not yet implemented, so I was trying to implement it myself today, I think I would be able to do it.

[zelfroster]

Fixed chunk strategy in downloads by implementing getChunkStrategy() and adding new method to load chunk Strategy separately.

[zelfroster]

I have also fixed the Chat UI overflow for now.

[zelfroster]

Fixed Channel Layout, Post Layout, and UI changes.

[zelfroster]

I fixed the layouts for boards, but while fixing layout for forums, there was a bug which was causing webui to crash (a huge number of api calls). So, I will fix the layout after fixing the bug in Forums in the 2nd phase of GSoC (Improving Forums is already in my GSoC timeline).

Now, only mail layout is remaining to fix now in this PR.

[zelfroster]

Fixed the Mail UI,

@csoler @defnax I would love your suggestions, and please try this pr in your local machine. Please tell me any glitches or bugs you face at your end. This is finished for now, I will see for any issues and fix them until your reviews.

[defnax]

i has tested it not had time test on longer time looks more clean then before, i cant read my mails often it takes long to load.

i cant view attachments its hidden or my notebook screen it to small? i can click on up down on scrollbar then i see the attachments

[zelfroster]

i has tested it not had time test on longer time looks more clean then before, i cant read my mails often it takes long to load.

i cant view attachments its hidden or my notebook screen it to small? i can click on up down on scrollbar then i see the attachments

Ahh, I tried to make attachment section just like in the qt ui, fixed at bottom. But since I primarily use Firefox, it has thin scrollbar so its visible on my screen, I think I need to optimise it for smaller screens.

Thanks for testing it out. I will adjust it so it will be better to see attachments.

[zelfroster]

It should now show it correctly, @defnax

[defnax]

thx, i will test it tonight

[defnax]

on myscreen chrome with 100% zoom (15,5 inch screen)

75% zoom

[zelfroster]

I work on a desktop with a 24-inch screen, so that's why I am able to see clearly 😅. I am thinking of an appearance setting where we can set the font-size accordingly, and It will make it easy to view on smaller screens comfortably.

[defnax]

i think i know why it takes so long with mails it loads 500 mails to get view my mails takes up to 30 seconds it needs this feature View only 50 mails per page no endless loading / not load all mails (low) https://github.com/RetroShare/RSNewWebUI/issues/69

[zelfroster]

i think i know why it takes so long with mails it loads 500 mails to get view my mails takes up to 30 seconds it needs this feature View only 50 mails per page no endless loading / not load all mails (low) https://github.com/RetroShare/RSNewWebUI/issues/69

Got it 👍🏻, so now what we need is pagination. I will try to implement it in another PR.

[csoler]

probably the transfer of mail data between libretroshare and webui is the bottleneck here.

[csoler]

it's a bit weird on the user's point of view that you can change the chunk strategy but you cannot really see which chunks are available or not. Would it be complicated to draw the progress bar using colored chunk (blue/red/yellow) as we do in Qt? I suppose one major challenge is to make it appear clean whatever the scale. Qt does the filtering for us, but maybe JS will not.

[zelfroster]

Would it be complicated to draw the progress bar using colored chunk (blue/red/yellow) as we do in Qt?

I think yes it's going to be complicated, but I will have to see what data are we getting from the FileDownloadChunkDetails() endpoint, which I suppose returns the individual chunks for a file being downloaded.

[csoler]

you'd need to use the list of chunks (a table) in FileChinkInfo structure, especially the member "chunks".

[zelfroster]

you'd need to use the list of chunks (a table) in FileChinkInfo structure, especially the member "chunks".

Yup, I tried that endpoint, This was the response for a file.

I don't know what does 0, 2 etc stand for. I will look it up in the libretroshare.

[zelfroster]

Also, Eid Mubarak @rottencandy 🫂☪️

[zelfroster]

@rottencandy If you have time then please look into this code https://github.com/zelfroster/RSNewWebUI/blob/mail-section/webui-src/app/mail/mail_compose.js, It's not working correctly. Even though I am trying to trigger a re-render manually, It is not working. I am not able to figure out what's the issue as it should work. Please help.

[rottencandy]

The reason it's not working is because we're using popupMessageCompose which uses m.render() to show the modal. It draws outside of the main mounted tree and will not respond to redraw calls or state changes: https://mithril.js.org/render.html#differences-from-other-api-methods

We have this same issue with other modals as well, and we should really stop using m.render and switch to creating modals inside the main tree soon.

For now I think the only way might be to create a new route & page for composing : (

[defnax]

oh as page the mail composer will look unprofessional

[rottencandy]

Alternatively we could use datalist as a temporary workaround

https://stackoverflow.com/a/19779010/7683374

[zelfroster]

Alternatively we could use datalist as a temporary workaround

https://stackoverflow.com/a/19779010/7683374

At first, I had tried datalist only, but it's the same issue.

[zelfroster]

We have this same issue with other modals as well, and we should really stop using m.render and switch to creating modals inside the main tree soon.

I think, this is something I can do, I will give it a try. Thanks for helping 😃

[zelfroster]

I think everything is fine in this PR now. @csoler

[zelfroster]

I tried to move the modal-container inside the main div and changed m.render to m.mount. But it still doesn't work.

I had also tried this guide https://mithril-by-examples.js.org/examples/modal-2/ , but no success. the state doesn't update tried on flems.io, the count doesn't update.

[zelfroster]

I had also tried this guide https://mithril-by-examples.js.org/examples/modal-2/ , but no success.

It creates and attaches a vdom node to the dom and creates the overlay container which contains the modal container. But still redraw doesn't seem to work.

[rottencandy]

Ah if you're moving the modal div inside the main div you can't use a second m.mount, since it is part of the parent mount it should just be used as a regular component. This would require reimplementing the create modal handler and components in a way that doesn't use another mount or render.

[rottencandy]

For the flems example you would need a component variable. updated code

[zelfroster]

For the flems example you would need a component variable. updated code

Ohh, this is great. And, I since I was unable to make the modal-container work. I just simply rendered a component using m() and It is working. https://github.com/zelfroster/RSNewWebUI/tree/mail-section

[zelfroster]

So, for now @rottencandy, can this PR be approved?