From 161ff7f6961e4496fc02a7510bec620fc2b80f4f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 17 Jun 2023 20:27:36 +0900 Subject: [PATCH] add diff view --- editor/pages/tests/reports/[key]/index.tsx | 148 +++++++++++++++++---- 1 file changed, 121 insertions(+), 27 deletions(-) diff --git a/editor/pages/tests/reports/[key]/index.tsx b/editor/pages/tests/reports/[key]/index.tsx index e6cf0110..ee90a8be 100644 --- a/editor/pages/tests/reports/[key]/index.tsx +++ b/editor/pages/tests/reports/[key]/index.tsx @@ -3,65 +3,160 @@ import Head from "next/head"; import { InferGetServerSidePropsType } from "next"; import styled from "@emotion/styled"; import { Client, NodeReportCoverage } from "@codetest/editor-client"; +import { CircleIcon } from "@radix-ui/react-icons"; type P = InferGetServerSidePropsType; -export default function QAEditor({ key, data }: P) { +export default function ReportPage({ data }: P) { return ( <> - QA - {key} + Report Coverages - @codetest/reports {/* */}
+

+ @codetest/reports +

{/* 
{JSON.stringify(data, null, 2)}
 */} -
+
{Object.keys(data).map((k) => { const record: NodeReportCoverage = data[k]; - return ( -
-

{k}

-
- B - C - A -
-
- ); + return ; })}
+
); } const Main = styled.main` + font-family: monospace; + width: 400px; + margin: auto; + /* */ - .frames { - width: 100%; + .nodes { display: flex; flex-direction: column; - align-items: center; - flex-wrap: wrap; + gap: 16px; } - .item { - display: flex; - flex-direction: column; + footer { + height: 200px; + } +`; + +function Item({ id, a, b, diff, report }: NodeReportCoverage & { id: string }) { + const [focus, setFocus] = React.useState<"a" | "b" | null>(null); + + return ( + +
+

+ + {id} {focus && ({focus})} +

+
+
+ A + B + C +
setFocus("a")} + onMouseLeave={() => setFocus(null)} + /> +
setFocus("b")} + onMouseLeave={() => setFocus(null)} + /> +
+ + ); +} + +const ItemContainer = styled.div` + display: flex; + flex-direction: column; + + border-radius: 2px; + border: 1px solid rgba(255, 255, 255, 0.1); + overflow: hidden; + + width: 400px; + height: 100%; + + header { + padding: 16px; + .title { + display: flex; + align-items: center; + gap: 8px; + } + } - width: 400px; - height: 400px; + .view { + position: relative; + display: flex; + flex-direction: row; + align-items: center; - img { + .a, + .b, + .c { + position: relative; + z-index: 1; + flex: 1 0 auto; width: 100%; height: auto; } - .images { - display: flex; - flex-direction: row; + .a, + .b { + pointer-events: none; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + opacity: 0.5; + transition: opacity 0.1s ease-in-out; + } + + &[data-focus="a"] .a { + z-index: 9; + opacity: 1; + } + + &[data-focus="b"] .b { + z-index: 9; + opacity: 1; + } + + .hover-area { + position: absolute; + top: 0; + bottom: 0; + width: 50%; + height: 100%; + z-index: 2; + } + + .hover-area-left { + cursor: w-resize; + left: 0; + } + + .hover-area-right { + cursor: e-resize; + right: 0; } } `; @@ -78,7 +173,6 @@ export async function getServerSideProps(context: any) { return { props: { - key, data, }, };