From fb0c113b499e09734316822a87874f7484d6d651 Mon Sep 17 00:00:00 2001 From: Saad Iqbal Date: Tue, 16 Apr 2024 21:58:49 +0500 Subject: [PATCH 1/4] Draggable not working on mobile devices fixed --- src/App.js | 3 + src/components/Core.js | 125 +++++++--- src/components/MobileCore.js | 317 +++++++++++++++++++++++++ src/components/custom/tldraw/Canvas.js | 12 +- 4 files changed, 422 insertions(+), 35 deletions(-) create mode 100644 src/components/MobileCore.js diff --git a/src/App.js b/src/App.js index 8275de85..794f8edb 100644 --- a/src/App.js +++ b/src/App.js @@ -23,6 +23,7 @@ import "react-bootstrap-typeahead/css/Typeahead.css"; import { Link, Route, BrowserRouter as Router, Switch } from "react-router-dom"; import { BosLoaderBanner } from "./components/BosLoaderBanner"; import Core from "./components/Core"; +import MobileCore from "./components/MobileCore"; import { useEthersProviderContext } from "./data/web3"; import { NetworkId, Widgets } from "./data/widgets"; import { useBosLoaderInitializer } from "./hooks/useBosLoaderInitializer"; @@ -170,11 +171,13 @@ function App() { + {/* */} + {/* */} diff --git a/src/components/Core.js b/src/components/Core.js index cb3370bb..b405d93d 100644 --- 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,98 @@ 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 ( - + - +
{location.pathname === "/feed" ? ( - ) : ( - )} - - {props.signedIn ? ( - - ) : ( - - )} + {props.signedIn ? ( + + ) : ( + + )} + + {/* {isDropdownOpen && ( */} +
    {
+ {/* )} */}
+
{ + const account = useAccount(); + const location = useLocation(); + + const [showPretendModal, setShowPretendModal] = useState(false); + + return ( + // + + +
+
+ {location.pathname === "/feed" ? ( + + + + ) : ( + + + + )} + + {props.signedIn ? ( + + ) : ( + + )} +
    +
  • + + + +
    • +
  • + + + my everything + +
    • + {account.pretendAccountId ? ( +
  • + +
    • + ) : ( +
  • + +
    • + )} +
  • + +
    • +
  • + + + + + + + + + + + +
    • +
+ +
+
+ +
+
+ setShowPretendModal(false)} + widgets={props.widgets} + /> + + + // + ); +}; + +export default MobileCore; diff --git a/src/components/custom/tldraw/Canvas.js b/src/components/custom/tldraw/Canvas.js index 108a1801..71d0ff28 100644 --- a/src/components/custom/tldraw/Canvas.js +++ b/src/components/custom/tldraw/Canvas.js @@ -241,12 +241,20 @@ function TldrawCanvas({ // loadComponents(props.components) components={{ TopPanel: () => ( -
+
), SharePanel: () => ( -
+
), From 2b032b40df9903b8178d08421ee46a12e591a31a Mon Sep 17 00:00:00 2001 From: Saad Iqbal Date: Tue, 16 Apr 2024 22:18:38 +0500 Subject: [PATCH 2/4] draggable fixes --- src/App.js | 1 - src/components/MobileCore.js | 317 ----------------------------------- 2 files changed, 318 deletions(-) delete mode 100644 src/components/MobileCore.js diff --git a/src/App.js b/src/App.js index 794f8edb..335b966d 100644 --- a/src/App.js +++ b/src/App.js @@ -23,7 +23,6 @@ import "react-bootstrap-typeahead/css/Typeahead.css"; import { Link, Route, BrowserRouter as Router, Switch } from "react-router-dom"; import { BosLoaderBanner } from "./components/BosLoaderBanner"; import Core from "./components/Core"; -import MobileCore from "./components/MobileCore"; import { useEthersProviderContext } from "./data/web3"; import { NetworkId, Widgets } from "./data/widgets"; import { useBosLoaderInitializer } from "./hooks/useBosLoaderInitializer"; diff --git a/src/components/MobileCore.js b/src/components/MobileCore.js deleted file mode 100644 index 802c7383..00000000 --- a/src/components/MobileCore.js +++ /dev/null @@ -1,317 +0,0 @@ -import { Widget, useAccount } from "near-social-vm"; -import React, { useState } from "react"; -import { - NavLink, - useLocation, -} from "react-router-dom/cjs/react-router-dom.min"; -import styled from "styled-components"; -import { LogOut } from "./icons/LogOut"; -import { Pretend } from "./icons/Pretend"; -import { StopPretending } from "./icons/StopPretending"; -import { User } from "./icons/User"; -import PretendModal from "./navigation/PretendModal"; -import Draggable from "react-draggable"; - -const CoreBackdrop = styled.div` - display: none; - @media (max-width: 768px) { - display: flex; - left: 0; - bottom: 30%; - transform: translateY(-50); - width: 70px; - height: auto; - position: fixed; - } -`; - -const CoreBox = styled.div` - display: flex; - flex-direction: column; - align-items: center; - background: white; - box-shadow: 0 10px 5px rgba(0, 0, 0, 0.3); - - &:hover { - box-shadow: 0px 8px 3px rgba(0, 0, 0, 0.2); - } - - &:active { - box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.2); - } - - a { - text-decoration: none; - color: black; - } -`; - -const StyledDropdown = styled.div` - .dropdown-toggle { - display: flex; - - &:after { - border-top-color: var(--slate-dark-11); - } - - img { - border-radius: 50% !important; - } - - .profile-info { - margin: 5px 10px; - line-height: normal; - max-width: 140px; - - .profile-name, - .profile-username { - text-overflow: ellipsis; - overflow: hidden; - } - - .profile-name { - color: black; - } - .profile-username { - color: var(--slate-dark-11); - } - } - } - - ul { - width: 100%; - padding: 0; - 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); - li { - padding: 6px; - } - - button, - a { - color: #2d2d2d; - min-height: 52px; - min-width: 52px; - padding: 6px; - display: flex; - align-items: center; - justify-content: center; - background-color: transparent; - border: transparent; - font-size: 18px; - gap: 0px; - text-shadow: 1px 1px #fff; - - border: 1px solid #e5e5e5; - border-radius: 13px; - - &:active { - background-color: #d5d5d5; - color: #000; - } - - &:hover { - background-color: #e5e5e5; - color: #111; - } - - svg { - margin-right: 7px; - min-width: 24px; - path { - stroke: var(--slate-dark-9); - } - } - } - } -`; - -const ButtonRow = styled.div` - display: flex; - flex-direction: row; - flex: 1; - gap: 6px; -`; - -const ArrowButton = styled.button` - flex-grow: 1; -`; - -const Button = styled.button` - all: unset; - color: #2d2d2d; - height: 52px; - width: 52px; - min-height: 52px; - min-width: 52px; - padding: 0px; - display: flex; - align-items: center; - justify-content: center; - background-color: transparent; - border: transparent; - font-size: 18px; - gap: 0px; - text-shadow: 1px 1px #fff; - - &:active { - color: #000; - } - - &:hover { - background-color: rgba(0, 0, 0, 0.042); - border-radius: 6px; - } -`; - -const DesktopCore = styled.div` - display: flex; - @media (max-width: 768px) { - display: none; - } -`; - -const MobileCore = (props) => { - const account = useAccount(); - const location = useLocation(); - - const [showPretendModal, setShowPretendModal] = useState(false); - - return ( - // - - -
-
- {location.pathname === "/feed" ? ( - - - - ) : ( - - - - )} - - {props.signedIn ? ( - - ) : ( - - )} -
    -
  • - - - -
    • -
  • - - - my everything - -
    • - {account.pretendAccountId ? ( -
  • - -
    • - ) : ( -
  • - -
    • - )} -
  • - -
    • -
  • - - - - - - - - - - - -
    • -
- -
-
- -
-
- setShowPretendModal(false)} - widgets={props.widgets} - /> - - - // - ); -}; - -export default MobileCore; From 8546caddfa2ee414f23b354c982f99fa31e888b2 Mon Sep 17 00:00:00 2001 From: Saad Iqbal Date: Tue, 16 Apr 2024 22:54:17 +0500 Subject: [PATCH 3/4] draggable mobile view extra comments removed --- src/components/Core.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/Core.js b/src/components/Core.js index b405d93d..eb1169c6 100644 --- a/src/components/Core.js +++ b/src/components/Core.js @@ -259,11 +259,6 @@ const Core = (props) => { ) : ( )} From 2f6566d5d0486767d52a2c272b99408b40b11562 Mon Sep 17 00:00:00 2001 From: Saad Iqbal Date: Tue, 16 Apr 2024 23:13:08 +0500 Subject: [PATCH 4/4] draggable mobile view fix --- src/App.js | 2 -- src/components/custom/tldraw/Canvas.js | 16 ---------------- 2 files changed, 18 deletions(-) diff --git a/src/App.js b/src/App.js index 335b966d..8275de85 100644 --- a/src/App.js +++ b/src/App.js @@ -170,13 +170,11 @@ function App() { - {/* */} - {/* */} diff --git a/src/components/custom/tldraw/Canvas.js b/src/components/custom/tldraw/Canvas.js index 71d0ff28..e6b3cfca 100644 --- 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] );