midsuit
/
prasi-bun
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip fix

This commit is contained in:
Rizky 2023-12-04 11:32:55 +07:00
parent d264ddd5ef
commit 4bd4356d1c
6 changed files with 117 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/web/src/nova/ed/ed-right.tsx
View File

@ -1,8 +1,19 @@
import { useGlobal } from "web-utils";
import { EDGlobal } from "./logic/ed-global";
import { EDGlobal, active } from "./logic/ed-global";
import { EdSidePropComp } from "./panel/side/prop-comp";
import { getMetaById } from "./logic/tree/build";
import { EdSideStyle } from "./panel/side/side-style";
import { EdSidePropInstance } from "./panel/side/prop-instance";
export const EdRight = () => {
const p = useGlobal(EDGlobal, "EDITOR");
const meta = getMetaById(p, active.item_id);
const isComponent =
meta?.item.type === "item" &&
meta?.item.component?.id &&
meta?.item.component.id !== active.comp_id;
const showProp = isComponent && p.ui.side.prop;
return (
<div
className={cx(
@ -12,7 +23,17 @@ export const EdRight = () => {
"border-l"
)}
>
{!meta ? (
<>Select an item</>
) : (
<>
{isComponent ? (
<EdSidePropInstance meta={meta} />
) : (
<EdSideStyle meta={meta} />
)}
</>
)}
</div>
);
};

1
app/web/src/nova/ed/logic/ed-global.ts
View File

@ -195,6 +195,7 @@ export const EDGlobal = {
group: {} as Record<string, Awaited<ReturnType<SAction["comp"]["group"]>>>,
},
ui: {
side: { prop: false },
layout: {
left: parseInt(localStorage.getItem("prasi-layout-left") || "250"),
right: parseInt(localStorage.getItem("prasi-layout-right") || "250"),

33
app/web/src/nova/ed/panel/side/prop-comp.tsx Normal file
View File

@ -0,0 +1,33 @@
import { useGlobal } from "web-utils";
import { EDGlobal, EdMeta } from "../../logic/ed-global";
import { IItem } from "../../../../utils/types/item";
import { FC } from "react";
export const EdSidePropComp: FC<{ meta: EdMeta }> = ({ meta }) => {
const p = useGlobal(EDGlobal, "EDITOR");
const item = meta?.item as IItem;
if (!item) return null;
return (
<div className="flex flex-col text-[12px]">
<div className="flex border-b p-1 h-[35px] items-center bg-slate-50 justify-between select-none">
<div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
{item.name}
</div>
<div
className="border px-1 cursor-pointer bg-white hover:bg-blue-100"
onClick={() => {
p.ui.side.prop = false;
p.render();
}}
>
Close
</div>
</div>
<div className="flex flex-1 relative overflow-auto">
<div className="absolute inset-0"></div>
</div>
</div>
);
};

3
app/web/src/nova/ed/panel/side/prop-comp/item.tsx Normal file
View File

@ -0,0 +1,3 @@
export const EdPropCompItem = () => {
return <div></div>;
};

20
app/web/src/nova/ed/panel/side/prop-instance.tsx Normal file
View File

@ -0,0 +1,20 @@
import { FC } from "react";
import { useGlobal } from "web-utils";
import { EDGlobal, EdMeta } from "../../logic/ed-global";
export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
const p = useGlobal(EDGlobal, "EDITOR");
return (
<div className="flex flex-col text-[12px]">
<div className="flex border-b p-1 h-[35px] items-center bg-slate-50 justify-between select-none">
<div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
{meta.item.name}
</div>
<div className="border px-1 cursor-pointer bg-white hover:bg-blue-100">
Edit Component
</div>
</div>
</div>
);
};

37
app/web/src/nova/ed/panel/side/side-style.tsx Normal file
View File

@ -0,0 +1,37 @@
import { FC } from "react";
import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
import { useGlobal } from "web-utils";
import { IItem } from "../../../../utils/types/item";
import { EdSidePropComp } from "./prop-comp";
export const EdSideStyle: FC<{ meta: EdMeta }> = ({ meta }) => {
const p = useGlobal(EDGlobal, "EDITOR");
const item = meta?.item as IItem;
if (!item) return null;
if (item.component?.id === active.comp_id && p.ui.side.prop) {
return <EdSidePropComp meta={meta} />;
}
return (
<div className="flex flex-col text-[12px]">
<div className="flex border-b p-1 h-[35px] items-center bg-slate-50 justify-between select-none">
<div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
{item.name}
</div>
{item.component?.id === active.comp_id && (
<div
className="border px-1 cursor-pointer bg-white hover:bg-blue-100"
onClick={() => {
p.ui.side.prop = true;
p.render();
}}
>
Edit Props
</div>
)}
</div>
</div>
);
};