From beb2ceaa7206a7390223be90458689b95d161ec4 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Tue, 5 Sep 2023 10:28:30 +0530
Subject: [PATCH] fix: show extra tools dropdown in mobile

---
 src/components/Actions.tsx                    | 159 +++++-------------
 src/components/dropdownMenu/DropdownMenu.scss |   2 -
 src/css/styles.scss                           |   7 +-
 3 files changed, 51 insertions(+), 117 deletions(-)

diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
index d6b5db2a3..c5fc618c6 100644
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -231,7 +231,6 @@ export const ShapesSwitcher = ({
   appState: UIAppState;
 }) => {
   const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
-  const device = useDevice();
   return (
     <>
       {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
@@ -288,31 +287,22 @@ export const ShapesSwitcher = ({
       })}
       <div className="App-toolbar__divider" />
       {/* TEMP HACK because dropdown doesn't work well inside mobile toolbar */}
-      {device.isMobile ? (
-        <>
-          <ToolButton
-            className={clsx("Shape", { fillable: false })}
-            type="radio"
-            icon={frameToolIcon}
-            checked={activeTool.type === "frame"}
-            name="editor-current-shape"
-            title={`${capitalizeString(
-              t("toolBar.frame"),
-            )} — ${KEYS.F.toLocaleUpperCase()}`}
-            keyBindingLabel={KEYS.F.toLocaleUpperCase()}
-            aria-label={capitalizeString(t("toolBar.frame"))}
-            aria-keyshortcuts={KEYS.F.toLocaleUpperCase()}
-            data-testid={`toolbar-frame`}
-            onPointerDown={({ pointerType }) => {
-              if (!appState.penDetected && pointerType === "pen") {
-                setAppState({
-                  penDetected: true,
-                  penMode: true,
-                });
-              }
-            }}
-            onChange={({ pointerType }) => {
-              trackEvent("toolbar", "frame", "ui");
+
+      <DropdownMenu open={isExtraToolsMenuOpen}>
+        <DropdownMenu.Trigger
+          className="App-toolbar__extra-tools-trigger"
+          onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
+          title={t("toolBar.extraTools")}
+        >
+          {extraToolsIcon}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          onClickOutside={() => setIsExtraToolsMenuOpen(false)}
+          onSelect={() => setIsExtraToolsMenuOpen(false)}
+          className="App-toolbar__extra-tools-dropdown"
+        >
+          <DropdownMenu.Item
+            onSelect={() => {
               const nextActiveTool = updateActiveTool(appState, {
                 type: "frame",
               });
@@ -320,29 +310,16 @@ export const ShapesSwitcher = ({
                 activeTool: nextActiveTool,
                 multiElement: null,
                 selectedElementIds: {},
-                activeEmbeddable: null,
               });
             }}
-          />
-          <ToolButton
-            className={clsx("Shape", { fillable: false })}
-            type="radio"
-            icon={EmbedIcon}
-            checked={activeTool.type === "embeddable"}
-            name="editor-current-shape"
-            title={capitalizeString(t("toolBar.embeddable"))}
-            aria-label={capitalizeString(t("toolBar.embeddable"))}
-            data-testid={`toolbar-embeddable`}
-            onPointerDown={({ pointerType }) => {
-              if (!appState.penDetected && pointerType === "pen") {
-                setAppState({
-                  penDetected: true,
-                  penMode: true,
-                });
-              }
-            }}
-            onChange={({ pointerType }) => {
-              trackEvent("toolbar", "embeddable", "ui");
+            icon={frameToolIcon}
+            shortcut={KEYS.F.toLocaleUpperCase()}
+            data-testid="toolbar-frame"
+          >
+            {t("toolBar.frame")}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            onSelect={() => {
               const nextActiveTool = updateActiveTool(appState, {
                 type: "embeddable",
               });
@@ -350,77 +327,31 @@ export const ShapesSwitcher = ({
                 activeTool: nextActiveTool,
                 multiElement: null,
                 selectedElementIds: {},
-                activeEmbeddable: null,
               });
             }}
-          />
-        </>
-      ) : (
-        <DropdownMenu open={isExtraToolsMenuOpen}>
-          <DropdownMenu.Trigger
-            className="App-toolbar__extra-tools-trigger"
-            onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
-            title={t("toolBar.extraTools")}
+            icon={EmbedIcon}
+            data-testid="toolbar-embeddable"
           >
-            {extraToolsIcon}
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content
-            onClickOutside={() => setIsExtraToolsMenuOpen(false)}
-            onSelect={() => setIsExtraToolsMenuOpen(false)}
-            className="App-toolbar__extra-tools-dropdown"
+            {t("toolBar.embeddable")}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            onSelect={() => {
+              const nextActiveTool = updateActiveTool(appState, {
+                type: "mermaid",
+              });
+              setAppState({
+                activeTool: nextActiveTool,
+                multiElement: null,
+                selectedElementIds: {},
+              });
+            }}
+            icon={mermaidLogoIcon}
+            data-testid="toolbar-embeddable"
           >
-            <DropdownMenu.Item
-              onSelect={() => {
-                const nextActiveTool = updateActiveTool(appState, {
-                  type: "frame",
-                });
-                setAppState({
-                  activeTool: nextActiveTool,
-                  multiElement: null,
-                  selectedElementIds: {},
-                });
-              }}
-              icon={frameToolIcon}
-              shortcut={KEYS.F.toLocaleUpperCase()}
-              data-testid="toolbar-frame"
-            >
-              {t("toolBar.frame")}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              onSelect={() => {
-                const nextActiveTool = updateActiveTool(appState, {
-                  type: "embeddable",
-                });
-                setAppState({
-                  activeTool: nextActiveTool,
-                  multiElement: null,
-                  selectedElementIds: {},
-                });
-              }}
-              icon={EmbedIcon}
-              data-testid="toolbar-embeddable"
-            >
-              {t("toolBar.embeddable")}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              onSelect={() => {
-                const nextActiveTool = updateActiveTool(appState, {
-                  type: "mermaid",
-                });
-                setAppState({
-                  activeTool: nextActiveTool,
-                  multiElement: null,
-                  selectedElementIds: {},
-                });
-              }}
-              icon={mermaidLogoIcon}
-              data-testid="toolbar-embeddable"
-            >
-              {t("toolBar.mermaidToExcalidraw")}
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu>
-      )}
+            {t("toolBar.mermaidToExcalidraw")}
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
     </>
   );
 };
diff --git a/src/components/dropdownMenu/DropdownMenu.scss b/src/components/dropdownMenu/DropdownMenu.scss
index 6e628736f..dcd29d3ce 100644
--- a/src/components/dropdownMenu/DropdownMenu.scss
+++ b/src/components/dropdownMenu/DropdownMenu.scss
@@ -7,8 +7,6 @@
     margin-top: 0.25rem;
 
     &--mobile {
-      bottom: 55px;
-      top: auto;
       left: 0;
       width: 100%;
       row-gap: 0.75rem;
diff --git a/src/css/styles.scss b/src/css/styles.scss
index f1d359d5e..2bb118146 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -278,6 +278,11 @@
     align-items: center;
     justify-content: space-between;
     padding: 8px;
+
+    .dropdown-menu--mobile {
+      bottom: 55px;
+      top: auto;
+    }
   }
 
   .App-mobile-menu {
@@ -609,7 +614,7 @@
   }
 
   .App-toolbar--mobile {
-    overflow-x: auto;
+    overflow: visible;
     max-width: 90vw;
 
     .ToolIcon__keybinding {