fix: editor overflow & change elements type

QuiiBz · Dec 27, 2023 · 1f3e4cf · 1f3e4cf
1 parent 72f10f2
commit 1f3e4cf
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 31 deletions.
diff --git a/apps/dashboard/src/app/page.tsx b/apps/dashboard/src/app/page.tsx
@@ -13,6 +13,7 @@ const initialElements: OGElement[] = [
   {
     id: createElementId(),
     tag: 'div',
+    name: 'Box',
     x: 0,
     y: 0,
     width: 1200,

diff --git a/apps/dashboard/src/components/EditorToolbar.tsx b/apps/dashboard/src/components/EditorToolbar.tsx
@@ -28,6 +28,7 @@ export function EditorToolbar() {
     <div className="rounded-md border border-gray-100 bg-white z-10 flex flex-row items-center">
       <ToolbarButton element={{
         tag: 'p',
+        name: 'Text',
         width: 100,
         height: 50,
         visible: true,
@@ -46,6 +47,7 @@ export function EditorToolbar() {
       <div className="w-[1px] h-4 bg-gray-100" />
       <ToolbarButton element={{
         tag: 'div',
+        name: 'Box',
         width: 200,
         height: 200,
         visible: true,
@@ -58,6 +60,7 @@ export function EditorToolbar() {
       <div className="w-[1px] h-4 bg-gray-100" />
       <ToolbarButton element={{
         tag: 'div',
+        name: 'Rounded box',
         width: 150,
         height: 150,
         visible: true,
@@ -71,6 +74,7 @@ export function EditorToolbar() {
       <div className="w-[1px] h-4 bg-gray-100" />
       <ToolbarButton element={{
         tag: 'div',
+        name: 'Image',
         width: 200,
         height: 150,
         visible: true,
@@ -85,6 +89,7 @@ export function EditorToolbar() {
       <div className="w-[1px] h-4 bg-gray-100" />
       <ToolbarButton element={{
         tag: 'span',
+        name: 'Dynamic text',
         width: 312,
         height: 50,
         visible: true,

diff --git a/apps/dashboard/src/components/LeftPanel/ElementRow.tsx b/apps/dashboard/src/components/LeftPanel/ElementRow.tsx
@@ -36,36 +36,27 @@ export function ElementRow({ element }: ElementRowProps) {
         onClick={() => { setSelectedElement(element.id); }}
         type="button"
       >
-        {element.tag === 'p' ? (
-          <>
-            <TextIcon height="1.4em" width="1.4em" />
-            {element.content.slice(0, 25)}
-          </>
-        ) : null}
-        {element.tag === 'div' && element.backgroundImage ? (
-          <>
-            <ImageIcon height="1.4em" width="1.4em" />
-            Image
-          </>
-        ) : null}
-        {element.tag === 'div' && !element.backgroundImage && !element.radius ? (
-          <>
-            <BoxIcon height="1.4em" width="1.4em" />
-            Box
-          </>
-        ) : null}
-        {element.tag === 'div' && !element.backgroundImage && element.radius ? (
-          <>
-            <CircleIcon height="1.4em" width="1.4em" />
-            Rounded box
-          </>
-        ) : null}
-        {element.tag === 'span' ? (
-          <>
-            <MagicWandIcon height="1.4em" width="1.4em" />
-            Dynamic text
-          </>
-        ) : null}
+        {element.tag === 'p'
+          ? <TextIcon height="1.4em" width="1.4em" />
+          : null
+        }
+        {element.tag === 'div' && element.backgroundImage
+          ? <ImageIcon height="1.4em" width="1.4em" />
+          : null
+        }
+        {element.tag === 'div' && !element.backgroundImage && !element.radius
+          ? <BoxIcon height="1.4em" width="1.4em" />
+          : null
+        }
+        {element.tag === 'div' && !element.backgroundImage && element.radius
+          ? <CircleIcon height="1.4em" width="1.4em" />
+          : null
+        }
+        {element.tag === 'span'
+          ? <MagicWandIcon height="1.4em" width="1.4em" />
+          : null
+        }
+        {element.name}
       </button>
       <button
         className="text-gray-600 hover:text-gray-900"

diff --git a/apps/dashboard/src/components/OgEditor.tsx b/apps/dashboard/src/components/OgEditor.tsx
@@ -246,7 +246,7 @@ export function OgEditor({ initialElements, width, height }: OgProviderProps) {
 
   return (
     <OgContext.Provider value={value}>
-      <div className="w-screen h-screen flex flex-row justify-between items-center bg-gray-50">
+      <div className="w-screen h-screen flex flex-row justify-between items-center bg-gray-50 overflow-hidden">
         <div className="w-[300px] h-screen flex flex-col border-r border-gray-100 shadow-lg shadow-gray-100 bg-white z-10">
           <LeftPanel />
         </div>

diff --git a/apps/dashboard/src/lib/types.ts b/apps/dashboard/src/lib/types.ts
@@ -3,6 +3,7 @@ import type { Font } from "./fonts"
 export type OGElement = (OGPElement | OGDynamicElement | OGDivElement)
   & {
     id: string
+    name: string
     x: number
     y: number
     width: number