Collab ui tweaks (#913)

* decrease gap between menu icons

* reduce margin of copy button

* add collaboratorsCount to roomDialog toggle button

src/components/App.tsx

@@ -234,6 +234,8 @@ export class App extends React.Component<any, AppState> {
   private destroySocketClient = () => {
     this.setState({
       isCollaborating: false,
+      remotePointers: {},
+      collaboratorCount: 0,
     });
     if (this.socket) {
       this.socket.close();

src/components/LayerUI.tsx

@@ -109,13 +109,14 @@ export const LayerUI = React.memo(
               <Section className="App-right-menu" heading="canvasActions">
                 <Island padding={4}>
                   <Stack.Col gap={4}>
-                    <Stack.Row gap={2.25} justifyContent={"space-between"}>
+                    <Stack.Row gap={1} justifyContent={"space-between"}>
                       {actionManager.renderAction("loadScene")}
                       {actionManager.renderAction("saveScene")}
                       {renderExportDialog()}
                       {actionManager.renderAction("clearCanvas")}
                       <RoomDialog
                         isCollaborating={appState.isCollaborating}
+                        collaboratorCount={appState.collaboratorCount}
                         onRoomCreate={onRoomCreate}
                         onRoomDestroy={onRoomDestroy}
                       />

src/components/MobileMenu.tsx

@@ -47,6 +47,7 @@ export function MobileMenu({
               {actionManager.renderAction("clearCanvas")}
               <RoomDialog
                 isCollaborating={appState.isCollaborating}
+                collaboratorCount={appState.collaboratorCount}
                 onRoomCreate={onRoomCreate}
                 onRoomDestroy={onRoomDestroy}
               />

src/components/RoomDialog.scss

@@ -3,6 +3,19 @@
   color: #2b8a3e; // OC GREEN-9
 }
 
+.RoomDialog-modalButton-collaborators {
+  min-width: 1em;
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  padding: 3px;
+  border-radius: 50%;
+  background-color: #40c057; // OC GREEN-6
+  color: #fff;
+  font-size: 0.7em;
+  font-family: var(--ui-font);
+}
+
 .RoomDialog-linkContainer {
   display: flex;
   margin: 1.5em 0;
@@ -11,7 +24,7 @@
 .RoomDialog-link {
   min-width: 0;
   flex: 1 1 auto;
-  margin-left: 1.5em;
+  margin-left: 1em;
   display: inline-block;
   cursor: pointer;
   border: none;

src/components/RoomDialog.tsx

@@ -5,9 +5,9 @@ import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
 import { users, clipboard, start, stop } from "./icons";
 import { Modal } from "./Modal";
-
-import "./RoomDialog.scss";
 import { copyTextToSystemClipboard } from "../clipboard";
+import { AppState } from "../types";
+import "./RoomDialog.scss";
 
 function RoomModal({
   onCloseRequest,
@@ -111,10 +111,12 @@ function RoomModal({
 
 export function RoomDialog({
   isCollaborating,
+  collaboratorCount,
   onRoomCreate,
   onRoomDestroy,
 }: {
-  isCollaborating: boolean;
+  isCollaborating: AppState["isCollaborating"];
+  collaboratorCount: AppState["collaboratorCount"];
   onRoomCreate: () => void;
   onRoomDestroy: () => void;
 }) {
@@ -145,7 +147,13 @@ export function RoomDialog({
         aria-label={t("buttons.roomDialog")}
         showAriaLabel={useIsMobile()}
         ref={triggerButton}
-      />
+      >
+        {collaboratorCount > 0 && (
+          <div className="RoomDialog-modalButton-collaborators">
+            {collaboratorCount}
+          </div>
+        )}
+      </ToolButton>
       {modalIsShown && (
         <Modal
           maxWidth={800}

src/components/ToolButton.tsx

@@ -21,7 +21,11 @@ type ToolButtonBaseProps = {
 };
 
 type ToolButtonProps =
-  | (ToolButtonBaseProps & { type: "button"; onClick?(): void })
+  | (ToolButtonBaseProps & {
+      type: "button";
+      children?: React.ReactNode;
+      onClick?(): void;
+    })
   | (ToolButtonBaseProps & {
       type: "radio";
 
@@ -61,6 +65,7 @@ export const ToolButton = React.forwardRef(function(
         {props.showAriaLabel && (
           <div className="ToolIcon__label">{props["aria-label"]}</div>
         )}
+        {props.children}
       </button>
     );
   }