imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New user profile UI in User Settings (#12548)

Browse source 
* New user profile UI in User Settings

Using new Edit In Place component.

* Show avatar upload error

* Fix avatar upload error

* Wire up errors & feedback for display name setting

* Implement avatar upload / remove progress toast

* Add 768px breakpoint

* Fix room profile display

* Update to released compund-web with required components / fixes

* Require compound-web 4.4.0

because we do need it

* Update snapshots

Because of course all the auto-generated IDs of unrelated things
have changed.

* Fix duplicate import

* Fix CSS comment

* Update snapshot

* Run all the tests so the ids stay the same

* Start of a test for ProfileSettings

* More tests

* Test that a toast appears

* Test ToastRack

* Update snapshots

* Add the usernamee control

* Fix playwright tests

 * New compound version for editinplace fixes
 * Fix useId to not just generate a constant ID
 * Use the label in the username component
 * Fix widths of test boxes
 * Update screenshots

* Put ^ back on compound-web version

* Split CSS for room & user profile settings

and name the components correspondingly

* Fix playwright test

* Update room settings screenshot

* Use original screenshot instead

* Fix styling of unrelated buttons

Needed to be added in other places otherwise the specificity changes.

Also put the old screenshots back.

* Add copyright year

* Fix copyright year
This commit is contained in:
David Baker 2024-06-06 14:56:38 +01:00 • committed by GitHub
parent c4c1faff97
commit cfa322cd62
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
25 changed files with 919 additions and 307 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/views/settings/AvatarSetting.tsx
View file

@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { createRef, useCallback, useEffect, useRef, useState } from "react";
import React, { createRef, useCallback, useEffect, useState } from "react";
import { _t } from "../../../languageHandler";
import AccessibleButton from "../elements/AccessibleButton";
import { mediaFromMxc } from "../../../customisations/Media";
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
import { useId } from "../../../utils/useId";
interface IProps {
/**
@ -75,9 +76,8 @@ const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, remo
}
}, [avatar]);
// TODO: Use useId() as soon as we're using React 18.
// Prevents ID collisions when this component is used more than once on the same page.
const a11yId = useRef(`hover-text-${Math.random()}`);
const a11yId = useId();
const onFileChanged = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
@ -95,7 +95,7 @@ const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, remo
element="div"
onClick={uploadAvatar}
className="mx_AvatarSetting_avatarPlaceholder mx_AvatarSetting_avatarDisplay"
aria-labelledby={disabled ? undefined : a11yId.current}
aria-labelledby={disabled ? undefined : a11yId}
// Inhibit tab stop as we have explicit upload/remove buttons
tabIndex={-1}
/>
@ -122,7 +122,7 @@ const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, remo
<AccessibleButton
onClick={uploadAvatar}
className="mx_AvatarSetting_uploadButton"
aria-labelledby={a11yId.current}
aria-labelledby={a11yId}
/>
<input
type="file"
@ -151,7 +151,7 @@ const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, remo
{avatarElement}
<div className="mx_AvatarSetting_hover" aria-hidden="true">
<div className="mx_AvatarSetting_hoverBg" />
{!disabled && <span id={a11yId.current}>{_t("action|upload")}</span>}
{!disabled && <span id={a11yId}>{_t("action|upload")}</span>}
</div>
{uploadAvatarBtn}
{removeAvatarBtn}