Improvements for theming and templating.

[jsonjuri]

Riot IM is a great piece of work but still way too static for customization.

Here are some suggestions for improvement:

Themes:
Currently, themes are more like color schemes. For example, we want to have different images, sounds, icons, and fonts in our themes. That is not possible because most of the images/icons are hardcoded to its path like: require("../../../../res/img/icon_person.svg").

A more logic setup of the res folder would be like:

• res
  • css (core css) some core css what shouldn't be able to change.
  • img (core images) like logo, flags, emoji
  • fonts (core fonts) emoji fonts
  • themes
    • the_matrix (example)
      • img (theme images)
      • css (theme css)
        • components
          • a folder with overrides for all components css.
        • light.css
        • dark.css
      • fonts (main font used for theme) In this case Nunito
      • media (different sounds for themes would be nice, for example "The Matrix" theme with some matrix sounds :)
    • default (default theme)
      ...

Images

• There are many PNG images inside the /img folder which I cannot find any relationship inside the project code. I think this folder can get a cleanup? :)

• There are many duplicates of icons in many sizes and colors. I think they could be scaled and colored using CSS instead.

Uploads
There is a great upload tool named Uppy where users can select their files directly from social media or cloud services. The implementation of Uppy would be a huge improvement to its current upload tool.

[t3chguy]

Themes

Closing in favour of issues like #5844 + #18741 + #13223

There are many PNG images inside the /img folder which I cannot find any relationship inside the project code. I think this folder can get a cleanup? :)

If you have specific examples do point them out, many clean ups have happened, keep in mind the project is multi-layered.

There are many duplicates of icons in many sizes and colors. I think they could be scaled and colored using CSS instead.

This is done intentionally, the SVGs are often authored with some of the small details missing on the smaller variants as they are simply not clear at that size. The icons are authored for specific render resolutions.

There is a great upload tool named Uppy where users can select their files directly from social media or cloud services. The implementation of Uppy would be a huge improvement to its current upload tool.

It is not possible for us to use something like Uppy due to it requiring a server-to-server "companion" - https://uppy.io/docs/companion/ - Element runs entirely in your browser, connecting only to services which speak Matrix