rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace typography components with Compound components

Browse Source
This commit is contained in:
Robin
2024-09-11 13:44:43 -04:00
parent a5aeb6f324
commit e5e6233efb
18 changed files with 118 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/home/CallList.module.css
View File

@@ -50,6 +50,12 @@ Please see LICENSE in the repository root for full details.
margin-bottom: 0;
}
.callName {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.facePile {
margin-top: 8px;
}

6
src/home/CallList.tsx
View File

@@ -10,11 +10,11 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { Room } from "matrix-js-sdk/src/models/room";
import { FC } from "react";
import { Text } from "@vector-im/compound-web";
import { Avatar, Size } from "../Avatar";
import styles from "./CallList.module.css";
import { getRelativeRoomUrl } from "../utils/matrix";
import { Body } from "../typography/Typography";
import { GroupCallRoom } from "./useGroupCallRooms";
import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
@@ -65,9 +65,9 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
>
<Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
<div className={styles.callInfo}>
<Body overflowEllipsis fontWeight="semiBold">
<Text weight="semibold" className={styles.callName}>
{name}
</Body>
</Text>
</div>
<div className={styles.copyButtonSpacer} />
</Link>

7
src/home/RegisteredView.tsx
View File

@@ -9,7 +9,7 @@ import { useState, useCallback, FormEvent, FormEventHandler, FC } from "react";
import { useHistory } from "react-router-dom";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { useTranslation } from "react-i18next";
import { Heading } from "@vector-im/compound-web";
import { Heading, Text } from "@vector-im/compound-web";
import { logger } from "matrix-js-sdk/src/logger";
import { Button } from "@vector-im/compound-web";
@@ -27,7 +27,6 @@ import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { CallList } from "./CallList";
import { UserMenuContainer } from "../UserMenuContainer";
import { JoinExistingCallModal } from "./JoinExistingCallModal";
import { Caption } from "../typography/Typography";
import { Form } from "../form/Form";
import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
import { E2eeType } from "../e2ee/e2eeType";
@@ -144,9 +143,9 @@ export const RegisteredView: FC<Props> = ({ client }) => {
</Button>
</FieldRow>
{optInAnalytics === null && (
<Caption className={styles.notice}>
<Text size="sm" className={styles.notice}>
<AnalyticsNotice />
</Caption>
</Text>
)}
{error && (
<FieldRow className={styles.fieldRow}>

28
src/home/UnauthenticatedView.tsx
View File

@@ -9,7 +9,7 @@ import { FC, useCallback, useState, FormEventHandler } from "react";
import { useHistory } from "react-router-dom";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { Trans, useTranslation } from "react-i18next";
import { Button, Heading } from "@vector-im/compound-web";
import { Button, Heading, Text } from "@vector-im/compound-web";
import { logger } from "matrix-js-sdk/src/logger";
import { useClient } from "../ClientContext";
@@ -25,7 +25,6 @@ import {
import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
import { JoinExistingCallModal } from "./JoinExistingCallModal";
import { useRecaptcha } from "../auth/useRecaptcha";
import { Body, Caption, Link } from "../typography/Typography";
import { Form } from "../form/Form";
import styles from "./UnauthenticatedView.module.css";
import commonStyles from "./common.module.css";
@@ -34,6 +33,7 @@ import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
import { Config } from "../config/Config";
import { E2eeType } from "../e2ee/e2eeType";
import { useOptInAnalytics } from "../settings/settings";
import { ExternalLink, Link } from "../button/Link";
export const UnauthenticatedView: FC = () => {
const { setClient } = useClient();
@@ -178,18 +178,18 @@ export const UnauthenticatedView: FC = () => {
/>
</FieldRow>
{optInAnalytics === null && (
<Caption className={styles.notice}>
<Text size="sm" className={styles.notice}>
<AnalyticsNotice />
</Caption>
</Text>
)}
<Caption className={styles.notice}>
<Text size="sm" className={styles.notice}>
<Trans i18nKey="unauthenticated_view_eula_caption">
By clicking "Go", you agree to our{" "}
<Link href={Config.get().eula}>
<ExternalLink href={Config.get().eula}>
End User Licensing Agreement (EULA)
</Link>
</ExternalLink>
</Trans>
</Caption>
</Text>
{error && (
<FieldRow>
<ErrorMessage error={error} />
@@ -207,19 +207,19 @@ export const UnauthenticatedView: FC = () => {
</Form>
</main>
<footer className={styles.footer}>
<Body className={styles.mobileLoginLink}>
<Link color="primary" to="/login" data-testid="home_login">
<Text className={styles.mobileLoginLink}>
<Link to="/login" data-testid="home_login">
{t("unauthenticated_view_login_button")}
</Link>
</Body>
<Body>
</Text>
<Text>
<Trans i18nKey="unauthenticated_view_body">
Not registered yet?{" "}
<Link color="primary" to="/register" data-testid="home_register">
<Link to="/register" data-testid="home_register">
Create an account
</Link>
</Trans>
</Body>
</Text>
</footer>
</div>
{onFinished && (