From 0c24cc1424a43c608262442e64c3ec7e7c585255 Mon Sep 17 00:00:00 2001 From: Jesse Paterson Date: Sat, 4 May 2024 21:28:38 -0700 Subject: [PATCH] Edit mode improved visualization + grid --- src/common/ui/components/UserAuthForm.tsx | 4 +- src/common/ui/templates/home/index.tsx | 10 ++--- src/common/ui/templates/space/index.tsx | 10 +++-- src/fidgets/ui/frame.tsx | 4 -- src/fidgets/ui/frameFidget.tsx | 48 +++++++++++++++++++++++ src/fidgets/ui/gallery.tsx | 2 +- src/pages/feed/index.tsx | 2 +- src/pages/homebase/index.tsx | 46 ++++++++++++++++------ src/pages/login/index.tsx | 2 +- src/pages/welcome/index.tsx | 4 +- src/styles/globals.css | 33 ++++++++++++++++ 11 files changed, 132 insertions(+), 33 deletions(-) delete mode 100644 src/fidgets/ui/frame.tsx create mode 100644 src/fidgets/ui/frameFidget.tsx diff --git a/src/common/ui/components/UserAuthForm.tsx b/src/common/ui/components/UserAuthForm.tsx index 4d89a0e7..32067f3f 100644 --- a/src/common/ui/components/UserAuthForm.tsx +++ b/src/common/ui/components/UserAuthForm.tsx @@ -89,7 +89,7 @@ export function UserAuthForm({ className }: { className?: string }) { posthog.identify(uuidv4(), { isLocalOnly: true }); setUserMessage("Setup done. Welcome to the Nounspace experience!"); - router.push("/feed"); + router.push("/Homebase"); setIsLoading(false); }; @@ -121,7 +121,7 @@ export function UserAuthForm({ className }: { className?: string }) { posthog.identify(data?.user?.id, { email }); await hydrate(); - router.push("/feed"); + router.push("/homebase"); setIsLoading(false); } diff --git a/src/common/ui/templates/home/index.tsx b/src/common/ui/templates/home/index.tsx index b6b82329..8fd8b9d1 100644 --- a/src/common/ui/templates/home/index.tsx +++ b/src/common/ui/templates/home/index.tsx @@ -112,11 +112,11 @@ const Home = ({ children }: { children: React.ReactNode }) => { getTitle: () => "Your notifications", shortcut: "Shift + N", }, - { - name: "Hats Protocol", - router: "/hats", - icon: , - }, + // { + // name: "Hats Protocol", + // router: "/hats", + // icon: , + // }, { name: "Settings", router: "/settings", diff --git a/src/common/ui/templates/space/index.tsx b/src/common/ui/templates/space/index.tsx index 67e6705f..dc3ee71b 100644 --- a/src/common/ui/templates/space/index.tsx +++ b/src/common/ui/templates/space/index.tsx @@ -26,7 +26,7 @@ export default function Space({ config, isEditable }: SpaceArgs){ function generateDOM() { return _.map(_.range(config.layoutConfig.items), function(i) { return ( -
+
{config.fidgetConfigs[i].f}
); @@ -38,8 +38,10 @@ export default function Space({ config, isEditable }: SpaceArgs){ } return ( - - {generateDOM()} - +
+ + {generateDOM()} + +
); } \ No newline at end of file diff --git a/src/fidgets/ui/frame.tsx b/src/fidgets/ui/frame.tsx deleted file mode 100644 index 5ca06da9..00000000 --- a/src/fidgets/ui/frame.tsx +++ /dev/null @@ -1,4 +0,0 @@ - -export default function Frame() { - -} \ No newline at end of file diff --git a/src/fidgets/ui/frameFidget.tsx b/src/fidgets/ui/frameFidget.tsx new file mode 100644 index 00000000..0b035545 --- /dev/null +++ b/src/fidgets/ui/frameFidget.tsx @@ -0,0 +1,48 @@ +import { useState } from 'react'; +import { FaGear } from "react-icons/fa6"; +import Modal from "@/common/ui/components/Modal"; +import Frame from '@/common/ui/molecules/Frame'; + +export default function FrameFidget() { + const images = ["image1","image2","image3"] + + const [editMode, setMode] = useState(false); + const [frameURL, setFrameURL] = useState("https://far.cards/api/trade/user/4865"); + + function switchMode() { + setMode(!editMode); + } + + const handleSubmit = (event) => { + const formData = new FormData(event.currentTarget); + event.preventDefault(); + setFrameURL(formData.get("URL")); + switchMode(); + }; + + return ( + <> +
+ + +
+ +
+ +
+ +
+ + + ) +} \ No newline at end of file diff --git a/src/fidgets/ui/gallery.tsx b/src/fidgets/ui/gallery.tsx index 1fe05ebc..60644924 100644 --- a/src/fidgets/ui/gallery.tsx +++ b/src/fidgets/ui/gallery.tsx @@ -28,7 +28,7 @@ export default function Gallery() { className = "flex-1 inset-0 bg-center bg-cover z-0 rounded-md" />
-
diff --git a/src/pages/feed/index.tsx b/src/pages/feed/index.tsx index a879cefb..01b8a251 100644 --- a/src/pages/feed/index.tsx +++ b/src/pages/feed/index.tsx @@ -345,7 +345,7 @@ export default function Feed() { ); const renderContent = () => ( -
+
{isLoadingFeed && isEmpty(feed) && (
diff --git a/src/pages/homebase/index.tsx b/src/pages/homebase/index.tsx index 074d3aa3..90721305 100644 --- a/src/pages/homebase/index.tsx +++ b/src/pages/homebase/index.tsx @@ -3,6 +3,7 @@ import { useAccountStore } from "@/common/data/stores/useAccountStore"; import { useState } from 'react'; import { RiPencilFill } from "react-icons/ri"; import Gallery from "@/fidgets/ui/gallery"; +import FrameFidget from "@/fidgets/ui/frameFidget"; import Feed from "@/pages/feed"; export default function Homebase(spaceID) { @@ -14,30 +15,48 @@ export default function Homebase(spaceID) { const availableHandles = ["s", "w", "e", "n", "sw", "nw", "se", "ne"]; const [fidgetConfigs, setFidgetConfigs] = useState([ - { - f: , + { f: , resizeHandles: availableHandles, x: 0, y: 0, w: 6, minW: 4, maxW: 8, - h: 20, - minH: 10, - maxH: 20 + h: 10, + minH: 6, + maxH: 12 }, - { - f: , + { f: , resizeHandles: availableHandles, x: 6, y: 0, - w: 4, + w: 2, + minW: 1, + h: 4, + minH: 1 + }, + { f: , + resizeHandles: availableHandles, + x: 8, + y: 0, + w: 2, minW: 2, maxW: 4, - h: 9, + h: 4, minH: 3, maxH: 12 }, + { f: , + resizeHandles: availableHandles, + x: 12, + y: 0, + w: 2, + minW: 2, + maxW: 4, + h: 4, + minH: 3, + maxH: 12 + } ]); function switchMode() { @@ -48,9 +67,9 @@ export default function Homebase(spaceID) { const layoutConfig = { isDraggable: editMode, isResizable: editMode, - items: 2, + items: 4, cols: 12, - rowHeight: 30, + rowHeight: 70, onLayoutChange: function(){}, // This turns off compaction so you can place items wherever. compactType: null, @@ -64,9 +83,10 @@ export default function Homebase(spaceID) { return (
+
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index c44bea6d..c8ced0e9 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -40,7 +40,7 @@ export default function Login() {

- The Fastest Farcaster + A Creative Farcaster

-

Welcome to Nounsapce

-

Nounsapce is a client for Farcaster with focus on keyboard-first desktop experience for power users and teams

+

Welcome to Nounspace

+

Nounspace is a client for Farcaster with focus on keyboard-first desktop experience for power users and teams

diff --git a/src/styles/globals.css b/src/styles/globals.css index 4735ce7f..1a401ba9 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -60,6 +60,39 @@ @apply bg-background text-foreground; } } */ +.no-edit-grid { + /* background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px); */ + + background-color:rgba(255, 255, 255, 0); + background-image: linear-gradient(white 10px, transparent 10px), + linear-gradient(90deg, white 10px, transparent 10px); + background-size: 80px 80px, 114px 114px, 40px 40px, 40px 40px; + margin-top:20px; + margin-right:14px; + margin-left:100px; + height:96vh; + + -webkit-transition: background-color 1000ms linear; + -ms-transition: background-color 1000ms linear; + transition: background-color 1000ms linear; +} + +.edit-grid { + /* background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px); */ + + background-color:rgba(200, 227, 248, 0.523); + background-image: linear-gradient(white 10px, transparent 10px), + linear-gradient(90deg, white 10px, transparent 10px); + background-size: 80px 80px, 114px 114px, 40px 40px, 40px 40px; + margin-top:20px; + margin-right:14px; + margin-left:100px; + height:96vh; + + -webkit-transition: background-color 1000ms linear; + -ms-transition: background-color 1000ms linear; + transition: background-color 1000ms linear; +} .react-grid-layout { position: relative;