feat: add renderTopRight prop & remove GH corner from core (#3539)

* feat: add `renderTopRight` prop & remove GH corner from core

* reuse `--space-factor` var

* update readme & changelog

src/components/App.tsx

@@ -452,6 +452,7 @@ class App extends React.Component<AppProps, AppState> {
     const {
       onCollabButtonClick,
       onExportToBackend,
+      renderTopRight,
       renderFooter,
       renderCustomStats,
     } = this.props;
@@ -492,6 +493,7 @@ class App extends React.Component<AppProps, AppState> {
               langCode={getLanguage().code}
               isCollaborating={this.props.isCollaborating || false}
               onExportToBackend={onExportToBackend}
+              renderTopRight={renderTopRight}
               renderCustomFooter={renderFooter}
               viewModeEnabled={viewModeEnabled}
               showExitZenModeBtn={

src/components/FixedSideContainer.scss

@@ -1,6 +1,5 @@
 .excalidraw {
   .FixedSideContainer {
-    --margin: 0.25rem;
     position: absolute;
     pointer-events: none;
   }
@@ -10,9 +9,9 @@
   }
 
   .FixedSideContainer_side_top {
-    left: var(--margin);
-    top: var(--margin);
-    right: var(--margin);
+    left: var(--space-factor);
+    top: var(--space-factor);
+    right: var(--space-factor);
     z-index: 2;
   }
 
@@ -23,16 +22,16 @@
 
 /* TODO: if these are used, make sure to implement RTL support
 .FixedSideContainer_side_left {
-  left: var(--margin);
-  top: var(--margin);
-  bottom: var(--margin);
+  left: var(--space-factor);
+  top: var(--space-factor);
+  bottom: var(--space-factor);
   z-index: 1;
 }
 
 .FixedSideContainer_side_right {
-  right: var(--margin);
-  top: var(--margin);
-  bottom: var(--margin);
+  right: var(--space-factor);
+  top: var(--space-factor);
+  bottom: var(--space-factor);
   z-index: 3;
 }
 */

src/components/GitHubCorner.tsx

@@ -1,38 +0,0 @@
-import oc from "open-color";
-import React from "react";
-
-// https://github.com/tholman/github-corners
-export const GitHubCorner = React.memo(
-  ({ theme }: { theme: "light" | "dark" }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="40"
-      height="40"
-      viewBox="0 0 250 250"
-      className="github-corner rtl-mirror"
-    >
-      <a
-        href="https://github.com/excalidraw/excalidraw"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="GitHub repository"
-      >
-        <path
-          d="M0 0l115 115h15l12 27 108 108V0z"
-          fill={theme === "light" ? oc.gray[6] : oc.gray[8]}
-        />
-        <path
-          className="octo-arm"
-          d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
-          style={{ transformOrigin: "130px 106px" }}
-          fill={theme === "light" ? oc.white : oc.black}
-        />
-        <path
-          className="octo-body"
-          d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
-          fill={theme === "light" ? oc.white : oc.black}
-        />
-      </a>
-    </svg>
-  ),
-);

src/components/LayerUI.scss

@@ -55,19 +55,8 @@
       }
     }
 
-    &__github-corner {
-      top: 0;
-
-      :root[dir="ltr"] & {
-        right: 0;
-      }
-
-      :root[dir="rtl"] & {
-        left: 0;
-      }
-
-      position: absolute;
-      width: 40px;
+    &__top-right {
+      display: flex;
     }
 
     &__footer {

src/components/LayerUI.tsx

@@ -30,7 +30,6 @@ import CollabButton from "./CollabButton";
 import { ErrorDialog } from "./ErrorDialog";
 import { ExportCB, ExportDialog } from "./ExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
-import { GitHubCorner } from "./GitHubCorner";
 import { HintViewer } from "./HintViewer";
 import { exportFile, load, shield, trash } from "./icons";
 import { Island } from "./Island";
@@ -68,6 +67,7 @@ interface LayerUIProps {
     appState: AppState,
     canvas: HTMLCanvasElement | null,
   ) => void;
+  renderTopRight?: (isMobile: boolean, appState: AppState) => JSX.Element;
   renderCustomFooter?: (isMobile: boolean) => JSX.Element;
   viewModeEnabled: boolean;
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
@@ -371,6 +371,7 @@ const LayerUI = ({
   toggleZenMode,
   isCollaborating,
   onExportToBackend,
+  renderTopRight,
   renderCustomFooter,
   viewModeEnabled,
   libraryReturnUrl,
@@ -604,24 +605,30 @@ const LayerUI = ({
               )}
             </Section>
           )}
-          <UserList
-            className={clsx("zen-mode-transition", {
-              "transition-right": zenModeEnabled,
-            })}
+          <div
+            className={clsx(
+              "layer-ui__wrapper__top-right zen-mode-transition",
+              {
+                "transition-right": zenModeEnabled,
+              },
+            )}
           >
-            {appState.collaborators.size > 0 &&
-              Array.from(appState.collaborators)
-                // Collaborator is either not initialized or is actually the current user.
-                .filter(([_, client]) => Object.keys(client).length !== 0)
-                .map(([clientId, client]) => (
-                  <Tooltip
-                    label={client.username || "Unknown user"}
-                    key={clientId}
-                  >
-                    {actionManager.renderAction("goToCollaborator", clientId)}
-                  </Tooltip>
-                ))}
-          </UserList>
+            <UserList>
+              {appState.collaborators.size > 0 &&
+                Array.from(appState.collaborators)
+                  // Collaborator is either not initialized or is actually the current user.
+                  .filter(([_, client]) => Object.keys(client).length !== 0)
+                  .map(([clientId, client]) => (
+                    <Tooltip
+                      label={client.username || "Unknown user"}
+                      key={clientId}
+                    >
+                      {actionManager.renderAction("goToCollaborator", clientId)}
+                    </Tooltip>
+                  ))}
+            </UserList>
+            {renderTopRight?.(isMobile, appState)}
+          </div>
         </div>
       </FixedSideContainer>
     );
@@ -649,20 +656,6 @@ const LayerUI = ({
     );
   };
 
-  const renderGitHubCorner = () => {
-    return (
-      <aside
-        className={clsx(
-          "layer-ui__wrapper__github-corner zen-mode-transition",
-          {
-            "transition-right": zenModeEnabled,
-          },
-        )}
-      >
-        <GitHubCorner theme={appState.theme} />
-      </aside>
-    );
-  };
   const renderFooter = () => (
     <footer role="contentinfo" className="layer-ui__wrapper__footer">
       <div
@@ -746,7 +739,6 @@ const LayerUI = ({
       {dialogs}
       {renderFixedSideContainer()}
       {renderBottomAppMenu()}
-      {renderGitHubCorner()}
       {renderFooter()}
       {appState.scrolledOutside && (
         <button

src/components/UserList.scss

@@ -2,7 +2,8 @@
   .UserList {
     pointer-events: none;
     /*github corner*/
-    padding: var(--space-factor) 40px var(--space-factor) var(--space-factor);
+    padding: var(--space-factor) var(--space-factor) var(--space-factor)
+      var(--space-factor);
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;