Merge pull request #23 from saadiqbal-dev/main

draggable clicking on mobile devices fixed
near-everything · Apr 16, 2024 · 812fbc3 · 812fbc3
2 parents 7f44881 + 2f6566d
commit 812fbc3
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 51 deletions.
diff --git a/src/components/Core.js b/src/components/Core.js
@@ -2,6 +2,7 @@ import { Widget, useAccount } from "near-social-vm";
 import React, { useState } from "react";
 import {
   NavLink,
+  useHistory,
   useLocation,
 } from "react-router-dom/cjs/react-router-dom.min";
 import styled from "styled-components";
@@ -20,7 +21,6 @@ const CoreBackdrop = styled.div`
   width: 70px;
   height: auto;
   display: flex;
-  z-index: 50;
 `;
 
 const CoreBox = styled.div`
@@ -29,7 +29,6 @@ const CoreBox = styled.div`
   align-items: center;
   background: white;
   box-shadow: 0 10px 5px rgba(0, 0, 0, 0.3);
-  z-index: 1002;
 
   &:hover {
     box-shadow: 0px 8px 3px rgba(0, 0, 0, 0.2);
@@ -43,6 +42,12 @@ const CoreBox = styled.div`
     text-decoration: none;
     color: black;
   }
+
+  @media (max-width: 1898px) {
+    .dropdown.show .dropdown-menu {
+      display: block;
+    }
+  }
 `;
 
 const StyledDropdown = styled.div`
@@ -83,6 +88,12 @@ const StyledDropdown = styled.div`
     border: 1px solid rgb(249, 250, 251);
     border-radius: 13px;
     box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    @media (max-width: 768px) {
+      position: absolute;
+      left: 50%; /* Center horizontally */
+      top: 50%;
+      transform: translateX(-50%, -50%); /* Center horizontally */
+    }
     li {
       padding: 6px;
     }
@@ -170,52 +181,93 @@ const Core = (props) => {
 
   const [showPretendModal, setShowPretendModal] = useState(false);
 
+  let history = useHistory();
+  const canvasToFeed = () => {
+    history.push("/feed");
+  };
+  const feedToHome = () => {
+    history.push("/");
+  };
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const handleTouchStart = () => {
+    if (window.innerWidth <= 1900) {
+      setIsDropdownOpen(!isDropdownOpen);
+    }
+  };
+
+  const [dropdownPosition, setdropdownPosition] = useState(false);
+
+  const handleDrag = (a, ui) => {
+    const spaceBelow = window.innerHeight - (ui.y + ui.node.offsetHeight);
+    if (spaceBelow < 200) {
+      setdropdownPosition({ y: ui.y - ui.node.offsetHeight - 10 });
+    } else {
+      setdropdownPosition(null);
+    }
+  };
+
+  const handleDrapStop = (e, ui) => {
+    if (dropdownPosition) {
+      ui.y = dropdownPosition.y;
+    }
+  };
+
   return (
-    <Draggable position={null} axis="y" bounds="parent">
+    <Draggable
+      position={null}
+      axis="y"
+      bounds="parent"
+      onDrag={handleDrag}
+      onStop={handleDrapStop}
+    >
       <CoreBackdrop className="core__auth">
-        <CoreBox className="classic">
+        <CoreBox className="classic" style={{ dropdownPosition }}>
           <div className="d-flex align-items-center">
             <div>
               {location.pathname === "/feed" ? (
                 <NavLink to={"/"}>
-                  <Button>
+                  <Button onTouchStart={feedToHome}>
                     <i className="bi bi-house" />
                   </Button>
                 </NavLink>
               ) : (
                 <NavLink to={"/feed"}>
-                  <Button>
+                  <Button onTouchStart={canvasToFeed}>
                     <i className="bi bi-view-list" />
                   </Button>
                 </NavLink>
               )}
-              <StyledDropdown className="dropdown">
-                {props.signedIn ? (
-                  <Button
-                    type="button"
-                    id="dropdownMenu2222"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-                  >
-                    <Widget
-                      src={"mob.near/widget/ProfileImage"}
-                      props={{
-                        accountId: account.accountId,
-                        className: "d-inline-block core__profile-image",
-                        imageClassName: "w-100 h-100 ",
-                      }}
-                    />
-                  </Button>
-                ) : (
-                  <Button onClick={props.requestSignIn} style={{ padding: 0 }}>
-                    <i className="bi bi-key-fill" />
-                    {/* <i className="bi bi-brush" /> */}
-                    {/* <i className="bi bi-brush-fill" /> */}
-                    {/* <i className="bi bi-hammer" /> */}
-                    {/* <i className="bi bi-pen" /> */}
-                    {/* <i className="bi bi-vector-pen" /> */}
-                  </Button>
-                )}
+              {props.signedIn ? (
+                <Button
+                  type="button"
+                  id="dropdownMenu2222"
+                  data-bs-toggle="dropdown"
+                  aria-expanded="false"
+                  onTouchStart={handleTouchStart}
+                >
+                  <Widget
+                    src={"mob.near/widget/ProfileImage"}
+                    props={{
+                      accountId: account.accountId,
+                      className: "d-inline-block core__profile-image",
+                      imageClassName: "w-100 h-100 ",
+                    }}
+                  />
+                </Button>
+              ) : (
+                <Button onClick={props.requestSignIn} style={{ padding: 0 }}>
+                  <i className="bi bi-key-fill" />
+                </Button>
+              )}
+
+              {/* {isDropdownOpen && ( */}
+              <StyledDropdown
+                className={`dropdown ${
+                  isDropdownOpen ? "show" : ""
+                } ${dropdownPosition}`}
+              >
                 <ul
                   className="dropdown-menu"
                   aria-labelledby="dropdownMenu2222"
@@ -292,7 +344,9 @@ const Core = (props) => {
                   </li>
                 </ul>
               </StyledDropdown>
+              {/* )} */}
             </div>
+
             <div>
               <i
                 className="bi bi-grip-vertical"

diff --git a/src/components/custom/tldraw/Canvas.js b/src/components/custom/tldraw/Canvas.js
@@ -190,22 +190,6 @@ function TldrawCanvas({
           z: zoom,
         });
       }
-
-      // We can also use the sideEffects API to modify a shape before
-      // its change is committed to the database. This will run for
-      // all shapes whenever they are updated.
-      // editor.sideEffects.registerBeforeChangeHandler(
-      //   "shape",
-      //   (record, _prev, source) => {
-      //     if (source !== "user") return record;
-      //     record.meta = {
-      //       ...record.meta,
-      //       updatedBy: editor.user.getId(),
-      //       updatedAt: Date.now(),
-      //     };
-      //     return record;
-      //   }
-      // );
     },
     [creatorId]
   );
@@ -241,12 +225,20 @@ function TldrawCanvas({
         // loadComponents(props.components)
         components={{
           TopPanel: () => (
-            <div key={"TopPanel"} className="tldraw__TopPanel" style={{ pointerEvents: "all", display: "flex" }}>
+            <div
+              key={"TopPanel"}
+              className="tldraw__TopPanel"
+              style={{ pointerEvents: "all", display: "flex" }}
+            >
               <TopZone path={persistance} />
             </div>
           ),
           SharePanel: () => (
-            <div key={"SharePanel"} className="tldraw__SharePanel" style={{ pointerEvents: "all", display: "flex" }}>
+            <div
+              key={"SharePanel"}
+              className="tldraw__SharePanel"
+              style={{ pointerEvents: "all", display: "flex" }}
+            >
               <SharePanel path={persistance} />
             </div>
           ),