wip active indikator

This commit is contained in:
Rizky 2024-01-07 05:35:19 +07:00
parent 2657813507
commit 98b79118bb
2 changed files with 27 additions and 20 deletions

View File

@ -110,7 +110,7 @@ export const mainPerItemVisit = (
} }
let is_active = isMetaActive(p, meta); let is_active = isMetaActive(p, meta);
let is_component = false; let is_component = false;
if ( if (
!is_active && !is_active &&
@ -122,22 +122,6 @@ export const mainPerItemVisit = (
parts.props.className = cx( parts.props.className = cx(
parts.props.className, parts.props.className,
is_active && "el-active",
is_active &&
css`
outline: none;
&::after {
content: " ";
pointer-events: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 2px solid #1c88f3;
}
`,
is_component && is_component &&
css` css`
&::after { &::after {

View File

@ -1,9 +1,10 @@
import { useGlobal, useLocal } from "web-utils"; import { useGlobal, useLocal } from "web-utils";
import { Vi } from "../../../vi/vi"; import { Vi } from "../../../vi/vi";
import { EDGlobal, active } from "../../logic/ed-global"; import { EDGlobal, IMeta, PG, active } from "../../logic/ed-global";
import { mainPerItemVisit } from "./main-per-item"; import { mainPerItemVisit } from "./main-per-item";
import { VG } from "../../../vi/render/global"; import { VG } from "../../../vi/render/global";
import { IItem } from "../../../../utils/types/item"; import { IItem } from "../../../../utils/types/item";
import { isMetaActive } from "../../logic/active/is-meta.active";
export const EdMain = () => { export const EdMain = () => {
// return <div className="flex flex-1 flex-col relative"></div>; // return <div className="flex flex-1 flex-col relative"></div>;
@ -11,6 +12,9 @@ export const EdMain = () => {
const local = useLocal({}); const local = useLocal({});
active.hover.renderMain = local.render; active.hover.renderMain = local.render;
const meta = active.comp_id
? p.comp.list[active.comp_id].meta[active.item_id]
: p.page.meta[active.item_id];
return ( return (
<div <div
className={cx( className={cx(
@ -20,7 +24,7 @@ export const EdMain = () => {
` `
)} )}
> >
<div className={mainStyle()}> <div className={mainStyle(p, meta)}>
<Vi <Vi
meta={p.page.meta} meta={p.page.meta}
api_url={p.site.config.api_url} api_url={p.site.config.api_url}
@ -39,7 +43,9 @@ export const EdMain = () => {
); );
}; };
const mainStyle = () => { const mainStyle = (p: PG, meta: IMeta) => {
let is_active = isMetaActive(p, meta);
return cx( return cx(
"absolute inset-0 flex", "absolute inset-0 flex",
active.hover.id && active.hover.id &&
@ -56,6 +62,23 @@ const mainStyle = () => {
border: 2px solid #73b8ff; border: 2px solid #73b8ff;
} }
} }
`,
is_active &&
css`
.s-${active.item_id} {
outline: none;
&::after {
content: " ";
pointer-events: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 2px solid #1c88f3;
}
}
` `
); );
}; };