Merge pull request #32 from saadiqbal-dev/main

fixed Mobile View, Toggle Close onCommit, minWidth and Create Button
near-everything · Apr 21, 2024 · 7e1b3d2 · 7e1b3d2
2 parents 96934f0 + bc81237
commit 7e1b3d2
Show file tree

Hide file tree

Showing 9 changed files with 270 additions and 33 deletions.
diff --git a/apps/canvas/widget/Embed.jsx b/apps/canvas/widget/Embed.jsx
@@ -1,5 +1,4 @@
 const Wrapper = styled.div`
-  max-width: 400px;
   margin: 0 auto;
   font-size: 1rem;
 
@@ -57,15 +56,20 @@ return (
     <h3>embed</h3>
     <Form>
       <div className="form-group">
-        <input placeholder="Path"
+        <input
+          placeholder="Path"
           type="text"
           value={path}
           onChange={(e) => setPath(e.target.value)}
         />
       </div>
     </Form>
     <FormGroup>
-      <button className="btn btn-success border" onClick={handleEmbed}>
+      <button
+        style={{ color: "white" }}
+        className="btn btn-primary"
+        onClick={handleEmbed}
+      >
         Submit
       </button>
     </FormGroup>

diff --git a/apps/canvas/widget/hyperfile/create.jsx b/apps/canvas/widget/hyperfile/create.jsx
@@ -1,5 +1,4 @@
 const Wrapper = styled.div`
-  max-width: 400px;
   margin: 0 auto;
 `;
 
@@ -81,7 +80,8 @@ function generateUID() {
   );
 }
 
-const handleCreate = () => {
+const handleCreate = (callback) => {
+  props.toggleModal();
   const isCreator = context.accountId === creatorId;
 
   // load in the state.adapter (modules for IPFS, Arweave, Ceramic, Verida, On Machina... )
@@ -229,7 +229,13 @@ return (
       )}
     </TabContent>
     <FormGroup>
-      <button className="btn btn-success mb-1" onClick={handleCreate}>
+      <button
+        style={{
+          color: "white",
+        }}
+        className="btn btn-primary mb-2"
+        onClick={handleCreate}
+      >
         Create
       </button>
     </FormGroup>

diff --git a/apps/canvas/widget/tldraw/Action.jsx b/apps/canvas/widget/tldraw/Action.jsx
@@ -32,7 +32,7 @@ const ModalHeader = styled.div`
 
 const CloseButton = styled.button`
   background: #f44336;
-  color: white;
+  color: white !important;
   border: none;
   border-radius: 5px;
   padding: 10px 15px;
@@ -92,8 +92,8 @@ const StyledActionButton = styled.div`
 
   /* Mobile */
   @media (max-width: 767px) {
-    width: 100px;
-    height: 100px;
+    width: 48px;
+    height: 48px;
     right: 15px;
     bottom: 110px;
   }
@@ -139,7 +139,7 @@ const plugins = [
         getSelectionAsImageDataUrl: getSelectionAsImageDataUrl,
         getContentOfPreviousResponse: getContentOfPreviousResponse,
         makeEmptyResponseShape: makeEmptyResponseShape,
-        populateResponseShape: populateResponseShape
+        populateResponseShape: populateResponseShape,
       },
       attribution: ["petersalomonsen.near"], // this should come from widget metadata
     },

diff --git a/apps/canvas/widget/tldraw/ShareZone.jsx b/apps/canvas/widget/tldraw/ShareZone.jsx
@@ -16,12 +16,16 @@ const ModalBackdrop = styled.div`
 
 const ModalBox = styled.div`
   background: white;
-  min-width: 400px;
-  max-width: 600px;
+  max-width: 60%;
+  width: 100%;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
   z-index: 1002;
+
+  @media (max-width: 768px) {
+    max-width: 80%;
+  }
 `;
 
 const ModalHeader = styled.div`
@@ -223,7 +227,7 @@ return (
       (plugin) =>
         plugin.interface.isVisible && (
           <Button
-            className="classic"
+            className="classic btn"
             onClick={() => toggleModal(plugin.id)}
             disabled={plugin.button.disabled}
           >

diff --git a/apps/canvas/widget/tldraw/TopZone.jsx b/apps/canvas/widget/tldraw/TopZone.jsx
@@ -4,15 +4,37 @@ const parts = path.split("/");
 const creatorId = parts[0];
 const thingId = parts[2];
 
+const Button = styled.button`
+  background: transparent;
+  width: 24px;
+  height: 24px;
+  border: none;
+`;
+
 return (
-  <div className="mt-1">
+  <div className="styled-top-bar d-flex align-items-center">
     <Widget
       src="mob.near/widget/N.ProfileLine"
       props={{
         accountId: creatorId,
         tooltip: true,
-        hideCheckmark: true
+        hideCheckmark: true,
       }}
-    />{"/" + thingId}
+    />
+    {"/" + thingId}
+    <OverlayTrigger
+      placement="auto"
+      overlay={<Tooltip>{"Copy to clipboard"}</Tooltip>}
+    >
+      <Button
+        onClick={() =>
+          clipboard.writeText(
+            `https://draw.everything.dev/${context.accountId}${props.location.search}`
+          )
+        }
+      >
+        <i className="bi bi-share"></i>
+      </Button>
+    </OverlayTrigger>
   </div>
 );
diff --git a/src/App.scss b/src/App.scss
@@ -112,27 +112,36 @@ a {
   bottom: 60px;
 }
 
+.tlui-layout__top {
+  @media (max-width: 768px) {
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+}
+.tlui-layout__top::-webkit-scrollbar {
+  display: none;
+}
+
 .tldraw__SharePanel {
   flex-direction: row;
   background: hsl(204, 16%, 94%);
   gap: 0.5rem;
-  padding: 6px;
+  padding: 2px 6px;
   border-radius: 0 0 0 13px;
   border: 4px solid rgb(249, 250, 251);
   border-top: 0;
   border-right: 0;
-  button {
+
+  .btn {
     color: #2d2d2d;
     border: none !important;
     padding: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: transparent;
     border: transparent;
     font-size: 14px;
     gap: 8px;
-    text-shadow: 1px 1px #fff;
 
     border-radius: 13px !important;
 
@@ -162,16 +171,27 @@ kbd {
   align-items: center;
   width: 100%;
 
-  .mt-1 {
+  .styled-top-bar {
     flex-direction: row;
     background: hsl(204, 16%, 94%);
     gap: 0.5rem;
-    padding: 6px;
+    margin: 0;
+    padding: 10px;
     border-radius: 0 0 13px 13px;
     border: 4px solid rgb(249, 250, 251);
     border-top: 0;
     border-right: 0;
     font-size: 14px;
+
+    .text-muted {
+      width: auto;
+    }
+
+    @media (max-width: 768px) {
+      display: flex;
+      flex-shrink: 0;
+      gap: 0;
+    }
   }
 }
 

diff --git a/src/components/Core.js b/src/components/Core.js
@@ -12,7 +12,6 @@ import { StopPretending } from "./icons/StopPretending";
 import { User } from "./icons/User";
 import PretendModal from "./navigation/PretendModal";
 import Draggable from "react-draggable";
-import context from "react-bootstrap/esm/AccordionContext";
 
 const CoreBackdrop = styled.div`
   position: fixed;
@@ -44,6 +43,14 @@ const CoreBox = styled.div`
     color: black;
   }
 
+  .dropdown-item.active {
+    text-shadow: none;
+    svg {
+      filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(0%)
+        hue-rotate(268deg) brightness(112%) contrast(100%);
+    }
+  }
+
   @media (max-width: 1898px) {
     .dropdown.show .dropdown-menu {
       display: block;
@@ -203,7 +210,7 @@ const Core = (props) => {
 
   const handleDrag = (a, ui) => {
     const spaceBelow = window.innerHeight - (ui.y + ui.node.offsetHeight);
-    if (spaceBelow < 200) {
+    if (spaceBelow < 312) {
       setdropdownPosition({ y: ui.y - ui.node.offsetHeight - 10 });
     } else {
       setdropdownPosition(null);
@@ -290,12 +297,14 @@ const Core = (props) => {
                           window.location.href = `https://${account.accountId}.social`;
                         }}
                       >
-                        <Widget
-                          src={"mob.near/widget/Profile.InlineBlock"}
-                          props={{
-                            accountId: account.accountId,
-                          }}
-                        />
+                        <div style={{ width: "100%" }}>
+                          <Widget
+                            src={"mob.near/widget/Profile.InlineBlock"}
+                            props={{
+                              accountId: account.accountId,
+                            }}
+                          />
+                        </div>
                       </a>
                     </li>
                     <li>