feat(ui): interface updates

[xyhhx]

this PR proposes changes to the interface to more closely align with conventional file browsers, cloud drives, and the onlyoffice interface.

i'm drawing inspiration from windows file explorer, GNOME's nautilus (with adwaita), microsoft onedrive, and of course onlyoffice.

---

some images i am referring to while working on this

(not complete i gotta go find all the screenshots i was looking at last night)

source software	image
windows 10 file explorer
microsoft onedrive
microsoft onedrive

i also find this article which has some nice looking screenshots i might take some inspo from too

---

goals and QA run through:

• global tweaks re: variables, colours
• dark mode
• drive app
• popups, modals
• top toolbar
• user settings
• admin config settings
• code editor
• kanban
• forms
• whiteboards
• slides
• diagrams
• chats

[xyhhx]

current iteration of drive app

[xyhhx]

i'm hoping to get some feedback early on, so i don't spend too much time on it if this isn't of interest to the team and/or if i'm going in the wrong direction with what i'd like to achieve

[mathilde-cryptpad]

i'm hoping to get some feedback early on, so i don't spend too much time on it if this isn't of interest to the team and/or if i'm going in the wrong direction with what i'd like to achieve

Hello,

I'll let our designer, answer you more in-depth. However, I can already inform you that we moved away from sharp corners to rounded ones in 5.0.0.

Looking at your screenshot of the drive, it looks like you will be reverting those changes.

[davidbenque]

Hi @xyhhx thanks for your interest and for starting work on this new look. As the project lead and only designer on the team I see where you are coming from but I also think we are unlikely to move in this direction for the following reasons:

• While I hear your point that CryptPad and the applications we integrate can present different looks, I do not think that aligning ourselves on the OnlyOffice UI is the way to go. It would widen the gap between our UI and all the other non-OnlyOffice applications. As an open-source project that integrates other open-source apps on which we don't have UI control there's a level of difference that is very hard to get rid of.
• On the corners, furthering what @mathilde-cryptpad said: When I joined the project in 2019 my first goal was to make the existing UI consistent across CryptPad (which it was not). At the time I made the call to remove all rounded corners. After getting regular feedback that CryptPad looked outdated, I made the decision to round most corners in 5.0 in summer 2022. This was well received although we still get some feedback about our design looking out of date once in a while. All this to say that we're unlikely to reverse course yet again and go for sharp corners. I know this is not the only thing you are proposing but I just wanted to give some context on why things are the way they are.
• I think overall it might be more productive to focus contributions to a specific element or aspect, one at a time, rather than aim for a complete overhaul in one PR.
• Finally note that our main focus at the moment is accessibility. So I'd encourage you to consider this aspect when proposing design changes. At the very least new proposals should not degrade compliance with WCAG standards and ideally they would improve it.

[xyhhx]

@davidbenque thanks for the feedback. sorry for the novella but i've got some counterpoints 😅 :

• While I hear your point that CryptPad and the applications we integrate can present different looks, I do not think that aligning ourselves on the OnlyOffice UI is the way to go. It would widen the gap between our UI and all the other non-OnlyOffice applications. As an open-source project that integrates other open-source apps on which we don't have UI control there's a level of difference that is very hard to get rid of.

  which other apps do you integrate with out of the box? at the moment there's an install script that ships with cryptpad that installs onlyoffice, and from my conversations with several others users (as well as hinted at by virtue of you putting effort into making it easier to install onlyoffice), that seems to be the preferred app for editing documents with which it's capable.

• On the corners, furthering what @mathilde-cryptpad said: When I joined the project in 2019 my first goal was to make the existing UI consistent across CryptPad (which it was not). At the time I made the call to remove all rounded corners. After getting regular feedback that CryptPad looked outdated, I made the decision to round most corners in 5.0 in summer 2022.

  i agree that having a unified design is important to cryptpad, which is one of the main motivations for my interest in aligning with onlyoffice's design in the first place. usually, i am actually not a fan of sharp corners; but, considering onlyoffice is a thirdparty app over which you have no control, i figured that aligning with its design was the move.

  on the other hand, it is plainly obvious that some other cloud drives (at least marketed towards individuals) have embraced rounded corners (i'm mostly thinking of google drive and nextcloud).

  perhaps it'd be worth considering making corner rounding a configurable option (since it's a single less variable, it's quite easy) alongside options like logo, brand colour, etc

  This was well received although we still get some feedback about our design looking out of date once in a while. All this to say that we're unlikely to reverse course yet again and go for sharp corners. I know this is not the only thing you are proposing but I just wanted to give some context on why things are the way they are.

  i don't know what it looked like before, but i can say that after a couple of years of trying (very hard) to get myself to use cryptpad, the ui is the killer for me. this might come off as harsh, but i find it practically unbearable to use and a other would-be users (both friends and clients of mine) i've spoken to have agreed. originally, i was planning on just maintaining a soft fork with designs changes that i felt were needed, to be honest. i don't say this to chastise you, and i hope this doesn't come off that way: i would really love to see cryptpad thrive.

  i'd be interested to see what apps you draw inspiration from with regard to design decisions, and maybe i can contribute something more aligned with your goals there.

• I think overall it might be more productive to focus contributions to a specific element or aspect, one at a time, rather than aim for a complete overhaul in one PR.

  this would surely have been a safer bet. i think i just got started and got ahead of myself and thought i might want to open a PR since i was doing the work anyway

• Finally note that our main focus at the moment is accessibility. So I'd encourage you to consider this aspect when proposing design changes. At the very least new proposals should not degrade compliance with WCAG standards and ideally they would improve it.

  i agree with this wholly, and i've been pretty committed to accessibility on front-end projects i take on throughout my career. i'm not sure if you've checked out the code for yourself, but you'll notice i made some changes that actually improve accessibility somewhat, mostly with regard to improving contrast and more legible font choices. aside from that, most interactive components have been left largely untouched with regard to their accessibility properties.

so, all this to say that i would really like to help cryptpad with your design elements. i want to see cryptpad thrive, it's a fascinating product, and i think it'd be invaluable in the hands of many groups. i'll probably keep working in the direction i have thus far and keep it a soft-fork for now, and that on its own will help me assimilate with the codebase somewhat

as for contributing acceptable changes, i think it'd be massively helpful if you could share with me some sites/apps from who you draw inspiration, design and accessibility wise, and maybe i'll try to come up with a penpot project to showcase ideas before working on them.

i'm in your matrix rooms, and you can reach me any time at @xyhhx:matrix.org

thanks again, and i hope i didn't come off as too harsh at any point

[ldubost]

Hi,

Thanks for being interested in helping out. Any help is definitively welcome as we do needs more opinions and also help to make improvements.

I see some of the discussion has been around rounded corners, but maybe there is more to your proposals than just rounded corners. In your screenshot, I have to say, on my side I kind of like that the folder tree has a white background compared to the current grey one. I noticed that much more than the change on rounded corners.

Concerning the onlyoffice coherency, as David said there are many other editors (wysiwyg, code, kanban, diagram). I would say that if we can we could also try to tweak the onlyoffice UI to get more into our own UI. But we do need to be careful as this could end up creating problems or be a lot of work.

Maybe the part that we could improve is really the button bar.. I think the grey background in general is something that we could consider as not so nice.

If I compare it with a Nextcloud bar (not exactly the same though), it uses slight different colors for the background of the menu items.

We've made quite some progress in the 5.0 cycle to improve different areas and clean the UI. There are probably still some places (such as the sidebars where we can make improvements)

[xyhhx]

@ldubost thanks for the response!

my screenshot was only after one commit, and rounded/sharp corners are actually literally only one line change 😅

the majority of my changes went towards stuff like: cleaning up padding and margins; removing needless backgrounds and box-shadows that cluttered the interface; swapping open sans for inter which is far more legible and versatile; and improving contrast in some areas.

other things that bug me while using the app are inconsistencies (two that come to mind are the difference in font size between folder and file headers in drive list view, and the difference in font size for filenames between drive and teams drive)

Concerning the onlyoffice coherency, as David said there are many other editors (wysiwyg, code, kanban, diagram). I would say that if we can we could also try to tweak the onlyoffice UI to get more into our own UI. But we do need to be careful as this could end up creating problems or be a lot of work.

these are all cryptpad apps, are they not? i was planning on going over all of those too, to ensure everything was coherent.

that said, i don't think that change onlyoffice's design is a realistic option, either; and even if it was i think it'd be bad ux since most onlyoffice users like it since it's a small change compared to microsoft office.

all that being said, i do not care strongly whether round or sharp corners are used in particular. here was my thought process on the matter:

• firstly was noticing that there was a stark difference between onlyoffice and the rest of the apps and ui. onlyoffice is not a realistic app to change match cryptpad: they've shown to be sometimes not cooperative with the open source community, and they are deliberately trying to match office 365's design
• the next consideration was to pay attention to other popular file managers, especially cloud drives. on this note, the obvious ones are google drive and nextcloud (being the foremost cloud drive and self-hosted cloud offering, respectively). these designs use rounded corners extensively, and maybe that's where you drew inspiration from, too
• i then paid attention to who is using which software suites and why:
  • google markets itself as being a normal-person-friendly ux, and that's where it draws its design inspiration, leading it to warm colours and round corners
  • nextcloud is marketing itself as self-hosted google drive, so it will just copy them
  • when i think about cryptpad, it is not as easy to deploy as nextcloud, and it pays strong attention to rigorous security measures. this is not for the average person. it is for a person (or team) who needs confidence in their security. they want professionalism - this is not what i attribute to google or nextcloud
• from there, i'm drawn to "who is offering professional, secure offerings in this space?" of course it's microsoft, proton, and tuta.
  • microsoft is the leader for enterprise and business use case, and it's also the most used operating system. its file and office apps are what most people are most used to, especially in this space
  • proton is the leader in secure and private (that is to say e2ee) files and comms, and their ui is quite nice; but their ui is far too different from cryptpad's for me to draw much inspiration there (yet)
  • tuta is honestly so far behind in ui/ux that i discarded them for consideration entirely (if any tuta employees see this, lmk if you're hiring!)

so, that left me with microsoft's offerings of windows and office 365, which made even more sense considering onlyoffice. still, i didn't want to strictly overhaul the ux, but simply clean the ui up to be more what a user of those softwares would expect of it.

here, i'll attach more screenshots of some of the other changes so you can get a better idea, but you might be better off just checking out my repo and trying it out yourself: