Themes 3: Intermission: Appearance Tab and fixes

Done:

• reorganized settings a bit, created "appearance" tab to put all the visual (and not really functional) stuff in there.
• fixed firefox+redmond theme bug
• added UI scaling options
• added UI roundness options
• added emoji scale options
• fix existing theme editor's preview pane
• many fixes to emoji picker, now scalable with rest of emoji, further customizations of it - later
• themes selector with preview
• add option to make underlay solid or transparent
• add option to override font

added 2 commits

• 89814484 - make emoji picker more scalable
• 1e0d7578 - Made the packs scroller a lot more bearable

Compare with previous version

added 1 commit

• c27bbfd2 - some improvements from testing prod

Compare with previous version

added 1 commit

• a664cf35 - fix unicode emoji

Compare with previous version

changed the description

added 4 commits

• eba3a438 - better font control custom input
• d5d37849 - font selector with proper styles and functionality + local font selector
• 925fd863 - Massively simplify and improve font input component
• 80cbf29b - fields for user font overrides

Compare with previous version

changed the description

added 2 commits

• 8a41313b - "fix" theme preview
• c6ccab77 - MASSIVELY streamlined theme setting process, now EVERYTHING happens in a vuex...

Compare with previous version

added 1 commit

• 41f8c3da - fix gaps in sticky headers

Compare with previous version

added 11 commits

• 115335e9 - 1 earlier commit
• 82ca01ef - cleanup
• cd92eb56 - don't recompile if cache exists
• e0297320 - use separate action for setting Theme V2
• a378c999 - add ability to override underlay color/opacity regardless of theme
• 9d76fcc4 - fix admin combo-dropdowns styles
• 40c9163d - optimizations, WIP theme selector
• 1866dcfd - fix checkbox in preview
• 9bbdad1a - theme selector new
• d2683a67 - new theme selector, RC
• 9d5514de - fix themes v2 editor for anon users and people who never touched themes

Compare with previous version

changed the description

added 8 commits

• c87d85ed - cleanup console logs
• 895261e1 - comment out toposort console debug
• 665faf89 - font overrides + fixes for font component
• 4d3d0751 - fix font selector losing list of local fonts when selecting one
• 72b252c8 - cleanup
• 041da0cd - fix step not working in unit input
• e984004c - localization file fix
• 55d7ec41 - remove unused files

Compare with previous version

added 1 commit

• df22cc4b - update icon

Compare with previous version

added 1 commit

• c966364d - changelogs

Compare with previous version

changed the description

added 1 commit

• 2c7f78a2 - fix tests

Compare with previous version

resolved all threads

added 1 commit

• 169f71c0 - Apply 1 suggestion(s) to 1 file(s)

Compare with previous version

Here's how it looks right after starting, everything is kinda huge.

Preview doesn't look right

Clicking the up/down button will immediately bring up this modal. Accepting it will fix the visual weirdness.

The message here probably needs some top padding, but in general I find it very confusing that this tab even exists. I think it should go away completely or at least be hidden behind 'advanced'.

I do not understand what the right way to edit a theme is right now. Is it in the "Appearance" tab?

The input fields seem to be too close to the labels, and the tabs seem to overflow into the main windows.

I do not understand what the right way to edit a theme is right now. Is it in the "Appearance" tab?

I find it very confusing that this tab even exists. I think it should go away completely or at least be hidden behind 'advanced'.

Right way to edit theme is still in Theme tab. Maybe I should change the message to "will be deprecated" or something like this. There's currently no way to hide/show tabs depending on "advanced mode" state and I don't think it's worth implementing it yet. I will be working on actual Theme v3 format and editor that replaces current one later this year (i need a vacation)

The input fields seem to be too close to the labels, and the tabs seem to overflow into the main windows.

"tabs overflowing into main window" is intentional, to give the appearance of them being... tabs, and not just buttons.

Spacing between label and input - yeah I think i can add a space there, i'm just not entirely sure about accessibility.

Even knowing that the tabs are supposed to look like 'tabs', they don't look like it. Something about them is off. That's not an issue for this MR though.

Also, I think Appearance and Theme should be right next to each other, as they are semantically related.

yeah I can move them. Tabs have been like this for years, I don't know how to implement them better currently.

Spacing between label and input - yeah I think i can add a space there, i'm just not entirely sure about accessibility.

space has been there for other types of "setting" so it was just missing from UnitSetting and NumberSetting - fixed.

Also, I think Appearance and Theme should be right next to each other, as they are semantically related.

Re-shufffled tabs a bit:

Better?

added 1 commit

• 29289591 - fix huge previews on firefox

Compare with previous version

from @tusooa @ IRC:

the buttons in the settings modal no longer have spacing in your appearance-tab branch

added 3 commits

• f4544f07 - elaboration and spacing
• 5d78d12c - elaborates, refuses to leave
• 355bcc49 - increase gap in settings modal titlebar buttons

Compare with previous version

added 1 commit

• ece38e68 - spacing for number setting as well

Compare with previous version

@lambadalambda @tusooa i fixed the issues you mentioned (i think)

added 1 commit

• 5a929db0 - fixed lack of gap in panel headers

Compare with previous version

added 1 commit

• aa7bdbae - rearrange tabs

Compare with previous version

just noticed there is some problem with a hide_muted_federation_restrictions string but that's in develop, will fix in a separate MR

mentioned in commit 0c9893c8

merged