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

41
src/components/views/dialogs/UserSettingsDialog.tsx
View file

@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { Toast } from "@vector-im/compound-web";
import React, { useState } from "react";
import TabbedView, { Tab, useActiveTabWithDefault } from "../../structures/TabbedView";
@ -38,6 +39,7 @@ import { UserTab } from "./UserTab";
import { NonEmptyArray } from "../../../@types/common";
import { SDKContext, SdkContextClass } from "../../../contexts/SDKContext";
import { useSettingValue } from "../../../hooks/useSettings";
import { ToastContext, useActiveToast } from "../../../contexts/ToastContext";
interface IProps {
initialTabId?: UserTab;
@ -215,27 +217,34 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
setShowMsc4108QrCode(false);
};
const [activeToast, toastRack] = useActiveToast();
return (
// XXX: SDKContext is provided within the LoggedInView subtree.
// Modals function outside the MatrixChat React tree, so sdkContext is reprovided here to simulate that.
// The longer term solution is to move our ModalManager into the React tree to inherit contexts properly.
<SDKContext.Provider value={props.sdkContext}>
<BaseDialog
className="mx_UserSettingsDialog"
hasCancel={true}
onFinished={props.onFinished}
title={titleForTabID(activeTabId)}
>
<div className="mx_SettingsDialog_content">
<TabbedView
tabs={getTabs()}
activeTabId={activeTabId}
screenName="UserSettings"
onChange={setActiveTabId}
responsive={true}
/>
</div>
</BaseDialog>
<ToastContext.Provider value={toastRack}>
<BaseDialog
className="mx_UserSettingsDialog"
hasCancel={true}
onFinished={props.onFinished}
title={titleForTabID(activeTabId)}
>
<div className="mx_SettingsDialog_content">
<TabbedView
tabs={getTabs()}
activeTabId={activeTabId}
screenName="UserSettings"
onChange={setActiveTabId}
responsive={true}
/>
</div>
<div className="mx_SettingsDialog_toastContainer">
{activeToast && <Toast>{activeToast}</Toast>}
</div>
</BaseDialog>
</ToastContext.Provider>
</SDKContext.Provider>
);
}