refactor: packages/

2 files changed, 108 insertions, 0 deletions

diff --git a/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.scss b/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.scss
new file mode 100644
index 0000000..573fbcc
--- /dev/null
+++ b/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.scss
@@ -0,0 +1,66 @@
+@import "../../css/variables.module.scss";
+
+.excalidraw {
+  .collab-button {
+    --button-bg: var(--color-primary);
+    --button-color: var(--color-surface-lowest);
+    --button-border: var(--color-primary);
+
+    --button-width: var(--lg-button-size);
+    --button-height: var(--lg-button-size);
+
+    --button-hover-bg: var(--color-primary-darker);
+    --button-hover-border: var(--color-primary-darker);
+
+    --button-active-bg: var(--color-primary-darker);
+
+    box-shadow: 0 0 0 1px var(--color-surface-lowest);
+
+    flex-shrink: 0;
+
+    // double .active to force specificity
+    &.active.active {
+      background-color: #0fb884;
+      border-color: #0fb884;
+
+      svg {
+        color: #fff;
+      }
+
+      &:hover,
+      &:active {
+        background-color: #0fb884;
+        border-color: #0fb884;
+      }
+    }
+  }
+
+  .CollabButton.is-collaborating {
+    background-color: var(--button-special-active-bg-color);
+
+    .ToolIcon__icon svg,
+    .ToolIcon__label {
+      color: var(--icon-green-fill-color);
+    }
+  }
+
+  .CollabButton-collaborators {
+    :root[dir="ltr"] & {
+      right: -5px;
+    }
+    :root[dir="rtl"] & {
+      left: -5px;
+    }
+    min-width: 1em;
+    min-height: 1em;
+    line-height: 1;
+    position: absolute;
+    bottom: -5px;
+    padding: 3px;
+    border-radius: 50%;
+    background-color: $oc-green-2;
+    color: $oc-green-9;
+    font-size: 0.6rem;
+    font-family: "Cascadia";
+  }
+}
diff --git a/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.tsx b/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.tsx
new file mode 100644
index 0000000..a22bc52
--- /dev/null
+++ b/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.tsx
@@ -0,0 +1,42 @@
+import { t } from "../../i18n";
+import { share } from "../icons";
+import { Button } from "../Button";
+
+import clsx from "clsx";
+
+import "./LiveCollaborationTrigger.scss";
+import { useUIAppState } from "../../context/ui-appState";
+
+const LiveCollaborationTrigger = ({
+  isCollaborating,
+  onSelect,
+  ...rest
+}: {
+  isCollaborating: boolean;
+  onSelect: () => void;
+} & 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", width: showIconOnly ? undefined : "auto" }}
+      title={t("labels.liveCollaboration")}
+    >
+      {showIconOnly ? share : t("labels.share")}
+      {appState.collaborators.size > 0 && (
+        <div className="CollabButton-collaborators">
+          {appState.collaborators.size}
+        </div>
+      )}
+    </Button>
+  );
+};
+
+export default LiveCollaborationTrigger;
+LiveCollaborationTrigger.displayName = "LiveCollaborationTrigger";