PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Improve welcome screen, add opt-out analytics (#8474)

Browse source
This commit is contained in:
Janne Mareike Koschinski 2022-05-09 15:10:22 +02:00 committed by GitHub
parent 674aec4050
commit 8aa303f9b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/structures/HomePage.tsx
View file

@ -75,6 +75,8 @@ const UserWelcomeTop = () => {
hasAvatarLabel={_tDom("Great, that'll help people know it's you")} hasAvatarLabel={_tDom("Great, that'll help people know it's you")}
noAvatarLabel={_tDom("Add a photo so people know it's you.")} noAvatarLabel={_tDom("Add a photo so people know it's you.")}
setAvatarUrl={url => cli.setAvatarUrl(url)} setAvatarUrl={url => cli.setAvatarUrl(url)}
isUserAvatar
onClick={ev => PosthogTrackers.trackInteraction("WebHomeMiniAvatarUploadButton", ev)}
> >
<BaseAvatar <BaseAvatar
idName={userId} idName={userId}
@ -100,7 +102,7 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
} }
let introSection; let introSection;
if (justRegistered) { if (justRegistered || !!OwnProfileStore.instance.getHttpAvatarUrl(AVATAR_SIZE)) {
introSection = <UserWelcomeTop />; introSection = <UserWelcomeTop />;
} else { } else {
const brandingConfig = SdkConfig.getObject("branding"); const brandingConfig = SdkConfig.getObject("branding");

29
src/components/views/elements/MiniAvatarUploader.tsx
View file

@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useContext, useRef, useState } from 'react';
import { EventType } from 'matrix-js-sdk/src/@types/event';
import classNames from 'classnames'; import classNames from 'classnames';
import { EventType } from 'matrix-js-sdk/src/@types/event';
import React, { useContext, useRef, useState, MouseEvent } from 'react';
import Analytics from "../../../Analytics";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import RoomContext from "../../../contexts/RoomContext";
import { useTimeout } from "../../../hooks/useTimeout";
import { TranslatedString } from '../../../languageHandler';
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
import AccessibleButton from "./AccessibleButton"; import AccessibleButton from "./AccessibleButton";
import Spinner from "./Spinner"; import Spinner from "./Spinner";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { useTimeout } from "../../../hooks/useTimeout";
import Analytics from "../../../Analytics";
import { TranslatedString } from '../../../languageHandler';
import RoomContext from "../../../contexts/RoomContext";
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
export const AVATAR_SIZE = 52; export const AVATAR_SIZE = 52;
@ -34,9 +34,13 @@ interface IProps {
noAvatarLabel?: TranslatedString; noAvatarLabel?: TranslatedString;
hasAvatarLabel?: TranslatedString; hasAvatarLabel?: TranslatedString;
setAvatarUrl(url: string): Promise<unknown>; setAvatarUrl(url: string): Promise<unknown>;
isUserAvatar?: boolean;
onClick?(ev: MouseEvent<HTMLInputElement>): void;
} }
const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, children }) => { const MiniAvatarUploader: React.FC<IProps> = ({
hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, isUserAvatar, children, onClick,
}) => {
const cli = useContext(MatrixClientContext); const cli = useContext(MatrixClientContext);
const [busy, setBusy] = useState(false); const [busy, setBusy] = useState(false);
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
@ -54,7 +58,7 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
const label = (hasAvatar || busy) ? hasAvatarLabel : noAvatarLabel; const label = (hasAvatar || busy) ? hasAvatarLabel : noAvatarLabel;
const { room } = useContext(RoomContext); const { room } = useContext(RoomContext);
const canSetAvatar = room?.currentState.maySendStateEvent(EventType.RoomAvatar, cli.getUserId()); const canSetAvatar = isUserAvatar || room?.currentState?.maySendStateEvent(EventType.RoomAvatar, cli.getUserId());
if (!canSetAvatar) return <React.Fragment>{ children }</React.Fragment>; if (!canSetAvatar) return <React.Fragment>{ children }</React.Fragment>;
const visible = !!label && (hover || show); const visible = !!label && (hover || show);
@ -63,7 +67,10 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
type="file" type="file"
ref={uploadRef} ref={uploadRef}
className="mx_MiniAvatarUploader_input" className="mx_MiniAvatarUploader_input"
onClick={chromeFileInputFix} onClick={(ev) => {
chromeFileInputFix(ev);
onClick?.(ev);
}}
onChange={async (ev) => { onChange={async (ev) => {
if (!ev.target.files?.length) return; if (!ev.target.files?.length) return;
setBusy(true); setBusy(true);