Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

New theme ui in user settings #12576

Merged
merged 51 commits into from
Jun 26, 2024
Merged

New theme ui in user settings #12576

merged 51 commits into from
Jun 26, 2024

Conversation

florianduros
Copy link
Contributor

@florianduros florianduros commented Jun 4, 2024 •
edited
Loading

Checklist

  • Tests written for new code (and old code if feasible).
  • New or updated public/exported symbols have accurate TSDoc documentation.
  • Linter and other CI checks pass.
  • Sign-off given on the changes (see CONTRIBUTING.md).

Part of https://github.com/element-hq/wat-internal/issues/167
Figma https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=119-21045&t=qn5Se9No8TlSYdU4-4

Rework the Theme subsection of the appearance tab.

@florianduros florianduros added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Jun 4, 2024
@florianduros florianduros changed the title Improve ui of theme subsection in Settings > Appearance New theme ui in user settings Jun 5, 2024
@florianduros florianduros force-pushed the florianduros/settings-appearance-theme branch from f7ddd8a to 27188d8 Compare June 18, 2024 15:19
@florianduros florianduros force-pushed the florianduros/settings-appearance-theme branch from c147933 to e17c584 Compare June 18, 2024 16:13
@florianduros florianduros marked this pull request as ready for review June 24, 2024 13:39
@florianduros florianduros requested a review from a team as a code owner June 24, 2024 13:39
robintown
robintown reviewed Jun 24, 2024
View reviewed changes
res/css/views/settings/_ThemeChoicePanel.pcss Outdated Show resolved Hide resolved
src/components/views/settings/ThemeChoicePanel.tsx Outdated
"cpd-theme-dark": _theme.isDark,
})}
name="themeSelector"
key={`${_theme.id}_${disabled}_${isChecked}`}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not key={_theme.id}? That should produce a more stable diff.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without it, the radio button is not rendered if I want to unchecked it programmatically (disabled or remove the used theme)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, so we're relying on the key changing to fully remount it and have defaultChecked take effect again. I wasn't expecting that at all, so could you comment it?

The pattern I would expect here is to set the checked prop instead of defaultChecked, so the component can be controlled programatically without the key magic.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh my last comment disappeared. I used checked in this commit 9f6ae52 (#12576)

src/components/views/settings/ThemeChoicePanel.tsx Show resolved Hide resolved
src/components/views/settings/ThemeChoicePanel.tsx Outdated Show resolved Hide resolved
src/components/views/settings/shared/SettingsSubsection.tsx Outdated Show resolved Hide resolved
@florianduros florianduros requested a review from robintown June 26, 2024 09:30
@florianduros florianduros enabled auto-merge June 26, 2024 15:31
@florianduros florianduros added this pull request to the merge queue Jun 26, 2024
@github-actions github-actions bot deployed to EndToEndTests June 26, 2024 15:47 Active
Merged via the queue into develop with commit 33a017b Jun 26, 2024
29 checks passed
@florianduros florianduros deleted the florianduros/settings-appearance-theme branch June 26, 2024 16:05
netbsd-srcmastr pushed a commit to NetBSD/pkgsrc that referenced this pull request Aug 8, 2024
@Midar
Update chat/element-web to 1.11.73
2567c70 
Changes in [1.11.73](https://github.com/element-hq/element-web/releases/tag/v1.11.73) (2024-08-06)
==================================================================================================
Fixes for CVE-2024-42347 / GHSA-f83w-wqhc-cfp4



Changes in [1.11.72](https://github.com/element-hq/element-web/releases/tag/v1.11.72) (2024-07-30)
==================================================================================================
## ✨ Features

* Polyfill Intl.Segmenter for wider web browser compatibility ([#27803](element-hq/element-web#27803)). Contributed by @dbkr.
* Enable audio/webaudio Modernizr rule ([#27772](element-hq/element-web#27772)). Contributed by @t3chguy.
* Add release announcement for the new room header ([#12802](matrix-org/matrix-react-sdk#12802)). Contributed by @MidhunSureshR.
* Default the room header to on ([#12803](matrix-org/matrix-react-sdk#12803)). Contributed by @MidhunSureshR.
* Update Thread Panel to match latest designs ([#12797](matrix-org/matrix-react-sdk#12797)). Contributed by @t3chguy.
* Close any open modals on logout ([#12777](matrix-org/matrix-react-sdk#12777)). Contributed by @dbkr.
* Iterate design of right panel empty state ([#12796](matrix-org/matrix-react-sdk#12796)). Contributed by @t3chguy.
* Update styling of UserInfo right panel card ([#12788](matrix-org/matrix-react-sdk#12788)). Contributed by @t3chguy.
* Accessibility: Add Landmark navigation ([#12190](matrix-org/matrix-react-sdk#12190)). Contributed by @akirk.
* Let Element Call widget receive m.room.create ([#12710](matrix-org/matrix-react-sdk#12710)). Contributed by @AndrewFerr.
* Let Element Call widget set session memberships ([#12713](matrix-org/matrix-react-sdk#12713)). Contributed by @AndrewFerr.
* Update right panel base card styling to match Compound ([#12768](matrix-org/matrix-react-sdk#12768)). Contributed by @t3chguy.
* Align `widget_build_url_ignore_dm` with call behaviour switch between 1:1 and Widget ([#12760](matrix-org/matrix-react-sdk#12760)). Contributed by @t3chguy.
* Move integrations switch ([#12733](matrix-org/matrix-react-sdk#12733)). Contributed by @dbkr.
* Element-R: Report events with withheld keys separately to Posthog. ([#12755](matrix-org/matrix-react-sdk#12755)). Contributed by @richvdh.

## 🐛 Bug Fixes

* Add a modernizr check for WebAssembly support ([#27776](element-hq/element-web#27776)). Contributed by @dbkr.
* Test for lack of WebAssembly support ([#12792](matrix-org/matrix-react-sdk#12792)). Contributed by @dbkr.
* Fix stray 'account' heading ([#12791](matrix-org/matrix-react-sdk#12791)). Contributed by @dbkr.
* Add test for the unsupported browser screen ([#12787](matrix-org/matrix-react-sdk#12787)). Contributed by @dbkr.
* Fix HTML export test ([#12778](matrix-org/matrix-react-sdk#12778)). Contributed by @dbkr.
* Fix HTML export missing a bunch of Compound variables ([#12774](matrix-org/matrix-react-sdk#12774)). Contributed by @t3chguy.
* Fix inability to change accent colour consistently in custom theming ([#12772](matrix-org/matrix-react-sdk#12772)). Contributed by @t3chguy.
* Fix edge case of landing on 3pid email link with registration disabled ([#12771](matrix-org/matrix-react-sdk#12771)). Contributed by @t3chguy.



Changes in [1.11.71](https://github.com/element-hq/element-web/releases/tag/v1.11.71) (2024-07-16)
==================================================================================================
## ✨ Features

* Add Modernizr rule for Intl.Segmenter ([#27677](element-hq/element-web#27677)). Contributed by @t3chguy.
* Add tabs to the right panel ([#12672](matrix-org/matrix-react-sdk#12672)). Contributed by @MidhunSureshR.
* Promote new room header from labs to Beta ([#12739](matrix-org/matrix-react-sdk#12739)). Contributed by @t3chguy.
* Redesign room search interface ([#12677](matrix-org/matrix-react-sdk#12677)). Contributed by @t3chguy.
* Move language settings to 'preferences' ([#12723](matrix-org/matrix-react-sdk#12723)). Contributed by @dbkr.
* New layout selector ui in user settings ([#12676](matrix-org/matrix-react-sdk#12676)). Contributed by @florianduros.
* Prevent Element appearing in system media controls  ([#10995](matrix-org/matrix-react-sdk#10995)). Contributed by @SuperKenVery.
* Move the account management button ([#12663](matrix-org/matrix-react-sdk#12663)). Contributed by @dbkr.
* Disable profile controls if the HS doesn't allow them to be set ([#12652](matrix-org/matrix-react-sdk#12652)). Contributed by @dbkr.
* New theme ui in user settings ([#12576](matrix-org/matrix-react-sdk#12576)). Contributed by @florianduros.
* Adjust room header hover transition from 300ms to 200ms ([#12703](matrix-org/matrix-react-sdk#12703)). Contributed by @t3chguy.
* Split out email \& phone number settings to separate components \& move discovery to privacy tab ([#12670](matrix-org/matrix-react-sdk#12670)). Contributed by @dbkr.

## 🐛 Bug Fixes

* Ensure we do not load matrix-react-sdk is a manner which can white-screen ([#27685](element-hq/element-web#27685)). Contributed by @t3chguy.
* Fix incoming call toast crash due to audio refactor ([#12737](matrix-org/matrix-react-sdk#12737)). Contributed by @t3chguy.
* Improve new room header accessibility ([#12725](matrix-org/matrix-react-sdk#12725)). Contributed by @t3chguy.
* Fix closing all modals ([#12728](matrix-org/matrix-react-sdk#12728)). Contributed by @dbkr.
* Fix close button on forgot password flow ([#12732](matrix-org/matrix-react-sdk#12732)). Contributed by @dbkr.
* Don't consider textual characters to be emoji ([#12582](matrix-org/matrix-react-sdk#12582)). Contributed by @robintown.
* Clear autocomplete input on selection accept ([#12709](matrix-org/matrix-react-sdk#12709)). Contributed by @dbkr.
* Fix `Match system theme` toggle ([#12719](matrix-org/matrix-react-sdk#12719)). Contributed by @florianduros.



Changes in [1.11.70](https://github.com/element-hq/element-web/releases/tag/v1.11.70) (2024-07-08)
==================================================================================================
## ✨ Features

* Add SSO redirect option for login page ([#27576](element-hq/element-web#27576)). Contributed by @bartvdbraak.
* Use stable endpoints for MSC3916 ([#27558](element-hq/element-web#27558)). Contributed by @turt2live.
* Switch to Rust crypto stack for all logins ([#12630](matrix-org/matrix-react-sdk#12630)). Contributed by @richvdh.
* Hide voip buttons in group rooms in environments with widgets disabled ([#12664](matrix-org/matrix-react-sdk#12664)). Contributed by @t3chguy.
* Minor tweaks to UserSettings dialog ([#12651](matrix-org/matrix-react-sdk#12651)). Contributed by @florianduros.
* Hide voice call button when redundant ([#12639](matrix-org/matrix-react-sdk#12639)). Contributed by @t3chguy.
* Improve accessibility of the room summary card ([#12586](matrix-org/matrix-react-sdk#12586)). Contributed by @t3chguy.
* Show tooltips on narrow tabbed views ([#12624](matrix-org/matrix-react-sdk#12624)). Contributed by @dbkr.
* Update gfm.css to github-markdown-css ([#12613](matrix-org/matrix-react-sdk#12613)). Contributed by @t3chguy.
* Cache e2eStatus to avoid concerning unencrypted flicker when changing rooms ([#12606](matrix-org/matrix-react-sdk#12606)). Contributed by @t3chguy.
* Tweak copy for user verification toast ([#12605](matrix-org/matrix-react-sdk#12605)). Contributed by @t3chguy.
* Support s tags for strikethrough for Matrix v1.10 ([#12604](matrix-org/matrix-react-sdk#12604)). Contributed by @t3chguy.

## 🐛 Bug Fixes

* Fix "Unable to restore session" error ([#4299](matrix-org/matrix-js-sdk#4299)).
* Fix error when sending encrypted messages in large rooms ([#4297](matrix-org/matrix-js-sdk#4297)).
* Remove redundant copy in deactive uia modal ([#12668](matrix-org/matrix-react-sdk#12668)). Contributed by @t3chguy.
* Fix high contrast theme in settings ([#12649](matrix-org/matrix-react-sdk#12649)). Contributed by @florianduros.
* Fix background on live location sharing footer ([#12629](matrix-org/matrix-react-sdk#12629)). Contributed by @t3chguy.
* Remove outdated iframe sandbox attribute ([#12633](matrix-org/matrix-react-sdk#12633)). Contributed by @t3chguy.
* Remove stray setState which caused encryption state shields to flicker ([#12632](matrix-org/matrix-react-sdk#12632)). Contributed by @t3chguy.
* Fix stray background colour on markdown body ([#12628](matrix-org/matrix-react-sdk#12628)). Contributed by @t3chguy.
* Fix widgets not being cleaned up correctly. ([#12616](matrix-org/matrix-react-sdk#12616)). Contributed by @toger5.
* Add in-progress view to display name EditInPlace ([#12609](matrix-org/matrix-react-sdk#12609)). Contributed by @dbkr.
* Fix config override of other settings levels ([#12593](matrix-org/matrix-react-sdk#12593)). Contributed by @langleyd.
* Don't show 'saved' on display name save error ([#12600](matrix-org/matrix-react-sdk#12600)). Contributed by @dbkr.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@robintown robintown robintown approved these changes

@dbkr dbkr Awaiting requested review from dbkr dbkr is a code owner automatically assigned from matrix-org/element-web-reviewers

@americanrefugee americanrefugee Awaiting requested review from americanrefugee

Assignees
No one assigned
Labels
T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@florianduros @robintown