Merge pull request #2051 from element-hq/renovate/vector-im-compound-web-2.x
Update dependency @vector-im/compound-web to v2
This commit is contained in:
@@ -50,7 +50,7 @@
|
|||||||
"@types/lodash": "^4.14.199",
|
"@types/lodash": "^4.14.199",
|
||||||
"@use-gesture/react": "^10.2.11",
|
"@use-gesture/react": "^10.2.11",
|
||||||
"@vector-im/compound-design-tokens": "^0.1.0",
|
"@vector-im/compound-design-tokens": "^0.1.0",
|
||||||
"@vector-im/compound-web": "^1.0.0",
|
"@vector-im/compound-web": "^2.0.0",
|
||||||
"@vitejs/plugin-basic-ssl": "^1.0.1",
|
"@vitejs/plugin-basic-ssl": "^1.0.1",
|
||||||
"@vitejs/plugin-react": "^4.0.1",
|
"@vitejs/plugin-react": "^4.0.1",
|
||||||
"buffer": "^6.0.3",
|
"buffer": "^6.0.3",
|
||||||
|
|||||||
61
src/App.tsx
61
src/App.tsx
@@ -24,6 +24,7 @@ import {
|
|||||||
import * as Sentry from "@sentry/react";
|
import * as Sentry from "@sentry/react";
|
||||||
import { OverlayProvider } from "@react-aria/overlays";
|
import { OverlayProvider } from "@react-aria/overlays";
|
||||||
import { History } from "history";
|
import { History } from "history";
|
||||||
|
import { TooltipProvider } from "@vector-im/compound-web";
|
||||||
|
|
||||||
import { HomePage } from "./home/HomePage";
|
import { HomePage } from "./home/HomePage";
|
||||||
import { LoginPage } from "./auth/LoginPage";
|
import { LoginPage } from "./auth/LoginPage";
|
||||||
@@ -77,35 +78,37 @@ export const App: FC<AppProps> = ({ history }) => {
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
<Router history={history}>
|
<Router history={history}>
|
||||||
<BackgroundProvider>
|
<BackgroundProvider>
|
||||||
{loaded ? (
|
<TooltipProvider>
|
||||||
<Suspense fallback={null}>
|
{loaded ? (
|
||||||
<ClientProvider>
|
<Suspense fallback={null}>
|
||||||
<MediaDevicesProvider>
|
<ClientProvider>
|
||||||
<Sentry.ErrorBoundary fallback={errorPage}>
|
<MediaDevicesProvider>
|
||||||
<OverlayProvider>
|
<Sentry.ErrorBoundary fallback={errorPage}>
|
||||||
<DisconnectedBanner />
|
<OverlayProvider>
|
||||||
<Switch>
|
<DisconnectedBanner />
|
||||||
<SentryRoute exact path="/">
|
<Switch>
|
||||||
<HomePage />
|
<SentryRoute exact path="/">
|
||||||
</SentryRoute>
|
<HomePage />
|
||||||
<SentryRoute exact path="/login">
|
</SentryRoute>
|
||||||
<LoginPage />
|
<SentryRoute exact path="/login">
|
||||||
</SentryRoute>
|
<LoginPage />
|
||||||
<SentryRoute exact path="/register">
|
</SentryRoute>
|
||||||
<RegisterPage />
|
<SentryRoute exact path="/register">
|
||||||
</SentryRoute>
|
<RegisterPage />
|
||||||
<SentryRoute path="*">
|
</SentryRoute>
|
||||||
<RoomPage />
|
<SentryRoute path="*">
|
||||||
</SentryRoute>
|
<RoomPage />
|
||||||
</Switch>
|
</SentryRoute>
|
||||||
</OverlayProvider>
|
</Switch>
|
||||||
</Sentry.ErrorBoundary>
|
</OverlayProvider>
|
||||||
</MediaDevicesProvider>
|
</Sentry.ErrorBoundary>
|
||||||
</ClientProvider>
|
</MediaDevicesProvider>
|
||||||
</Suspense>
|
</ClientProvider>
|
||||||
) : (
|
</Suspense>
|
||||||
<LoadingView />
|
) : (
|
||||||
)}
|
<LoadingView />
|
||||||
|
)}
|
||||||
|
</TooltipProvider>
|
||||||
</BackgroundProvider>
|
</BackgroundProvider>
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ limitations under the License.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.lock {
|
.lock {
|
||||||
|
display: block;
|
||||||
padding: var(--cpd-space-1x);
|
padding: var(--cpd-space-1x);
|
||||||
border-radius: var(--cpd-radius-pill-effect);
|
border-radius: var(--cpd-radius-pill-effect);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -32,19 +32,13 @@ export const EncryptionLock: FC<Props> = ({ encrypted }) => {
|
|||||||
const label = encrypted ? t("common.encrypted") : t("common.unencrypted");
|
const label = encrypted ? t("common.encrypted") : t("common.unencrypted");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip label={label} side="right">
|
<Tooltip label={label} side="right" isTriggerInteractive={false}>
|
||||||
<Icon
|
<Icon
|
||||||
width={16}
|
width={16}
|
||||||
height={16}
|
height={16}
|
||||||
className={styles.lock}
|
className={styles.lock}
|
||||||
data-encrypted={encrypted}
|
data-encrypted={encrypted}
|
||||||
aria-label={label}
|
aria-label={label}
|
||||||
// Make the icon focusable so that the tooltip can be opened
|
|
||||||
// with keyboard navigation
|
|
||||||
// TODO: Replace this with the solution from
|
|
||||||
// https://github.com/vector-im/compound-web/pull/130 once it
|
|
||||||
// lands
|
|
||||||
tabIndex={0}
|
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -158,7 +158,8 @@ unconditionally select the container so we can use cqmin units */
|
|||||||
max-inline-size: 100%;
|
max-inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nameTag > svg {
|
.nameTag > svg,
|
||||||
|
.nameTag > span {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -170,14 +171,16 @@ unconditionally select the container so we can use cqmin units */
|
|||||||
color: var(--cpd-color-icon-primary);
|
color: var(--cpd-color-icon-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nameTag span {
|
.nameTag > .name {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding-inline: var(--cpd-space-2x);
|
padding-inline: var(--cpd-space-2x);
|
||||||
|
flex-shrink: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.errorIcon {
|
.errorIcon {
|
||||||
|
display: block;
|
||||||
color: var(--cpd-color-icon-critical-primary);
|
color: var(--cpd-color-icon-critical-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -148,22 +148,20 @@ const Tile = forwardRef<HTMLDivElement, TileProps>(
|
|||||||
<div className={styles.fg}>
|
<div className={styles.fg}>
|
||||||
<div className={styles.nameTag}>
|
<div className={styles.nameTag}>
|
||||||
{nameTagLeadingIcon}
|
{nameTagLeadingIcon}
|
||||||
<Text as="span" size="sm" weight="medium">
|
<Text as="span" size="sm" weight="medium" className={styles.name}>
|
||||||
{nameTag}
|
{nameTag}
|
||||||
</Text>
|
</Text>
|
||||||
{unencryptedWarning && (
|
{unencryptedWarning && (
|
||||||
<Tooltip label={t("common.unencrypted")} side="bottom">
|
<Tooltip
|
||||||
|
label={t("common.unencrypted")}
|
||||||
|
side="bottom"
|
||||||
|
isTriggerInteractive={false}
|
||||||
|
>
|
||||||
<ErrorIcon
|
<ErrorIcon
|
||||||
width={20}
|
width={20}
|
||||||
height={20}
|
height={20}
|
||||||
aria-label={t("common.unencrypted")}
|
aria-label={t("common.unencrypted")}
|
||||||
className={styles.errorIcon}
|
className={styles.errorIcon}
|
||||||
// Make the icon focusable so that the tooltip can be opened
|
|
||||||
// with keyboard navigation
|
|
||||||
// TODO: Replace this with the solution from
|
|
||||||
// https://github.com/vector-im/compound-web/pull/130 once it
|
|
||||||
// lands
|
|
||||||
tabIndex={0}
|
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -3818,10 +3818,10 @@
|
|||||||
dependencies:
|
dependencies:
|
||||||
svg2vectordrawable "^2.9.1"
|
svg2vectordrawable "^2.9.1"
|
||||||
|
|
||||||
"@vector-im/compound-web@^1.0.0":
|
"@vector-im/compound-web@^2.0.0":
|
||||||
version "1.0.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-1.0.0.tgz#cee4a1c1d7df50951ebb1c167bfab26311b68d5d"
|
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-2.0.0.tgz#9ffc621f32be11acabe74bb3ff59cc4d8bc845ac"
|
||||||
integrity sha512-TwohQjgQilndkg+PTfRH8s98onHOj9MdmrLEObozN3oLZ0Awx0LsyQf/+tcm2ZwpCotWuP9DEzuRXOQgSU4OLg==
|
integrity sha512-vEhGayoBSq4WLf86VmFoX9h0KIxaAjlG+kmcJLWitsqnPEDOG0XPhScYqzEshFqdJFLWX6gBOnXYLeq065t57w==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@radix-ui/react-context-menu" "^2.1.5"
|
"@radix-ui/react-context-menu" "^2.1.5"
|
||||||
"@radix-ui/react-dropdown-menu" "^2.0.6"
|
"@radix-ui/react-dropdown-menu" "^2.0.6"
|
||||||
|
|||||||
Reference in New Issue
Block a user