smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: change collab trigger & add share dialog (#7647)

Browse source
This commit is contained in:
David Luzar 2024-02-03 15:04:23 +01:00 • committed by GitHub
parent a289c42830
commit 0513b647ec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 440 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.scss
View file

@ -3,7 +3,7 @@
.excalidraw {
.collab-button {
--button-bg: var(--color-primary);
--button-color: white;
--button-color: var(--color-surface-lowest);
--button-border: var(--color-primary);
--button-width: var(--lg-button-size);
@ -35,12 +35,6 @@
}
}
&.theme--dark {
.collab-button {
color: var(--color-gray-90);
}
}
.CollabButton.is-collaborating {
background-color: var(--button-special-active-bg-color);

8
packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.tsx
View file

@ -1,5 +1,5 @@
import { t } from "../../i18n";
import { usersIcon } from "../icons";
import { share } from "../icons";
import { Button } from "../Button";
import clsx from "clsx";
@ -17,16 +17,18 @@ const LiveCollaborationTrigger = ({
} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
const appState = useUIAppState();
const showIconOnly = appState.width < 830;
return (
<Button
{...rest}
className={clsx("collab-button", { active: isCollaborating })}
type="button"
onSelect={onSelect}
style={{ position: "relative" }}
style={{ position: "relative", width: showIconOnly ? undefined : "auto" }}
title={t("labels.liveCollaboration")}
>
{usersIcon}
{showIconOnly ? share : t("labels.share")}
{appState.collaborators.size > 0 && (
<div className="CollabButton-collaborators">
{appState.collaborators.size}