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

Merge pull request #5145 from matrix-org/travis/communities/proto/switcher

Browse source 
Communities v2 prototype: Tag panel selection changes
This commit is contained in:
Travis Ralston 2020-08-26 10:22:50 -06:00 • committed by GitHub
commit b294ec6427
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 82 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/components/structures/UserMenu.tsx
View file

@ -42,9 +42,6 @@ import IconizedContextMenu, {
IconizedContextMenuOption,
IconizedContextMenuOptionList
} from "../views/context_menus/IconizedContextMenu";
import TagOrderStore from "../../stores/TagOrderStore";
import * as fbEmitter from "fbemitter";
import FlairStore from "../../stores/FlairStore";
interface IProps {
isMinimized: boolean;
@ -55,16 +52,11 @@ type PartialDOMRect = Pick<DOMRect, "width" | "left" | "top" | "height">;
interface IState {
contextMenuPosition: PartialDOMRect;
isDarkTheme: boolean;
selectedCommunityProfile: {
displayName: string;
avatarMxc: string;
};
}
export default class UserMenu extends React.Component<IProps, IState> {
private dispatcherRef: string;
private themeWatcherRef: string;
private tagStoreRef: fbEmitter.EventSubscription;
private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
constructor(props: IProps) {
@ -73,7 +65,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
this.state = {
contextMenuPosition: null,
isDarkTheme: this.isUserOnDarkTheme(),
selectedCommunityProfile: null,
};
OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
@ -86,7 +77,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
public componentDidMount() {
this.dispatcherRef = defaultDispatcher.register(this.onAction);
this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate);
}
public componentWillUnmount() {
@ -103,25 +93,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
return theme === "dark";
}
private onTagStoreUpdate = async () => {
if (!SettingsStore.getValue("feature_communities_v2_prototypes")) {
return;
}
const selectedId = TagOrderStore.getSelectedTags()[0];
if (!selectedId) {
this.setState({selectedCommunityProfile: null});
return;
}
// For some reason the group's profile info isn't on the js-sdk Group object but
// is in the flair store, so get it from there.
const profile = await FlairStore.getGroupProfileCached(MatrixClientPeg.get(), selectedId);
const displayName = profile.name || selectedId;
const avatarMxc = profile.avatarUrl;
this.setState({selectedCommunityProfile: {displayName, avatarMxc}});
};
private onProfileUpdate = async () => {
// the store triggered an update, so force a layout update. We don't
// have any state to store here for that to magically happen.
@ -324,18 +295,8 @@ export default class UserMenu extends React.Component<IProps, IState> {
public render() {
const avatarSize = 32; // should match border-radius of the avatar
let displayName = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId();
let avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
if (this.state.selectedCommunityProfile) {
displayName = this.state.selectedCommunityProfile.displayName
const mxc = this.state.selectedCommunityProfile.avatarMxc;
if (mxc) {
avatarUrl = MatrixClientPeg.get().mxcUrlToHttp(mxc, avatarSize, avatarSize);
} else {
avatarUrl = null;
}
}
const displayName = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId();
const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
let name = <span className="mx_UserMenu_userName">{displayName}</span>;
let buttons = (

5
src/components/views/elements/TagTile.js
View file

@ -141,9 +141,12 @@ export default createReactClass({
profile.avatarUrl, avatarHeight, avatarHeight, "crop",
) : null;
const isPrototype = SettingsStore.getValue("feature_communities_v2_prototypes");
const className = classNames({
mx_TagTile: true,
mx_TagTile_selected: this.props.selected,
mx_TagTile_prototype: isPrototype,
mx_TagTile_selected: this.props.selected && !isPrototype,
mx_TagTile_selected_prototype: this.props.selected && isPrototype,
});
const badge = TagOrderStore.getGroupBadge(this.props.tag);

32
src/components/views/elements/UserTagTile.tsx
View file

@ -16,16 +16,14 @@ limitations under the License.
import React from "react";
import defaultDispatcher from "../../../dispatcher/dispatcher";
import { OwnProfileStore } from "../../../stores/OwnProfileStore";
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
import * as fbEmitter from "fbemitter";
import TagOrderStore from "../../../stores/TagOrderStore";
import AccessibleTooltipButton from "./AccessibleTooltipButton";
import BaseAvatar from "../avatars/BaseAvatar";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import classNames from "classnames";
import { _t } from "../../../languageHandler";
interface IProps{}
interface IProps {
}
interface IState {
selected: boolean;
@ -43,18 +41,13 @@ export default class UserTagTile extends React.PureComponent<IProps, IState> {
}
public componentDidMount() {
OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate);
}
public componentWillUnmount() {
OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
this.tagStoreRef.remove();
}
private onProfileUpdate = () => {
this.forceUpdate();
};
private onTagStoreUpdate = () => {
const selected = TagOrderStore.getSelectedTags().length === 0;
this.setState({selected});
@ -71,27 +64,20 @@ export default class UserTagTile extends React.PureComponent<IProps, IState> {
public render() {
// XXX: We reuse TagTile classes for ease of demonstration - we should probably generify
// TagTile instead if we continue to use this component.
const avatarHeight = 36;
const name = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId();
const className = classNames({
mx_TagTile: true,
mx_TagTile_selected: this.state.selected,
mx_TagTile_large: true,
mx_TagTile_prototype: true,
mx_TagTile_selected_prototype: this.state.selected,
mx_TagTile_home: true,
});
return (
<AccessibleTooltipButton
className={className}
onClick={this.onTileClick}
title={name}
title={_t("Home")}
>
<div className="mx_TagTile_avatar">
<BaseAvatar
name={name}
idName={MatrixClientPeg.get().getUserId()}
url={OwnProfileStore.instance.getHttpAvatarUrl(avatarHeight)}
width={avatarHeight}
height={avatarHeight}
/>
<div className="mx_TagTile_homeIcon" />
</div>
</AccessibleTooltipButton>
);