From c1b8ae469fb8836e5b6cd6a49ef5bd16d368e3ff Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Sun, 21 Aug 2022 05:58:48 -0400 Subject: [PATCH] Redo everything --- components/Timeline.module.css | 80 +++++++++++-- components/Timeline.tsx | 210 +++++++++++++++------------------ data/mocks.ts | 24 ++-- pages/playground.tsx | 2 +- 4 files changed, 174 insertions(+), 142 deletions(-) diff --git a/components/Timeline.module.css b/components/Timeline.module.css index 0f3c12c..30b0d47 100644 --- a/components/Timeline.module.css +++ b/components/Timeline.module.css @@ -1,21 +1,79 @@ -.timebox { - margin: 0; +.wrapper { + position: relative; } -.timebox:hover { - background-color: blueviolet; +.line { + position: absolute; + width: 5px; + background-color: var(--secondary-accent); } -.timeboxHover { - background-color: blue; +.timelineSections { + position: absolute; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + gap: 20px; } -.textbox { - background-color: maroon; +.timelineSection { + width: 100%; + height: inherit; + display: flex; + flex-direction: row; + justify-content: center; +} + +.time { + margin: 0px; + text-align: right; + font-size: 30px; + font-weight: 700; + color: var(--secondary-accent); + word-wrap: break-word; +} + +.timeHover { + color: var(--secondary-accent-light); +} + +.circle { + margin-left: 2px; + width: 30px; + height: 30px; + border-radius: 30px; + background-color: var(--secondary-accent); + box-shadow: 0px 0px 30px var(--secondary-accent); + display: flex; + justify-content: center; + align-items: center; +} + +.innerCircle { + width: 15px; + height: 15px; + border-radius: 15px; + background-color: var(--label); +} + +.text { + position: absolute; + margin: 0px; + font-size: 20px; + font-weight: 700; + color: var(--label); + background-color: var(--card-background); + position: relative; + height: fit-content; + word-wrap: break-word; + border-radius: 10px; padding: 5px; + box-sizing: border-box; } -.textboxText { - overflow-y: scroll; - word-break: break-all; +.textHover { + border: 2px solid var(--secondary-accent-light); + box-shadow: 0px 0px 20px var(--secondary-accent); } \ No newline at end of file diff --git a/components/Timeline.tsx b/components/Timeline.tsx index 6cc1d09..b7a3082 100644 --- a/components/Timeline.tsx +++ b/components/Timeline.tsx @@ -1,11 +1,3 @@ -import { - Connector, - CircleSubject, - Annotation, - HtmlLabel, -} from "@visx/annotation"; -import { Group } from "@visx/group"; -import { LinePath } from "@visx/shape"; import React, { useState } from "react"; import styles from "./Timeline.module.css"; @@ -21,24 +13,14 @@ interface TimelineProps { width: number; /** Height of the entire timeline, in pixels. */ height: number; - /** Padding top and bottom, in pixels. */ - padding: number; - /** Location of timeline width-wise, in pixels. Default is width / 2. */ - timelinePosition?: number; - /** Distance between consecutive nodes on timeline, in pixels. Default is evenly spaced. padding is not calculated if user specifies this value. */ - nodeGap?: number; /** Whether the time is transformed to uppercase */ isTimeUppercase?: boolean; - /** Offset between the line and the time label, in pixels (negative for left offset, positive for right offset). */ - timeXOffset?: number; /** Width of time label, in pixels. */ timeWidth?: number; - /** Offset between the line and the text label, in pixels (negative for left offset, positive for right offset). */ - textXOffset?: number; /** Width of text label, in pixels. */ textWidth?: number; - /** Height of text label, in pixels. */ - textHeight?: number; + /** Distance between labels to middle line, in pixels. */ + labelsOffset?: number; className?: string; } @@ -46,120 +28,112 @@ export default function Timeline({ data, width, height, - padding = 20, - timelinePosition = width / 2, - nodeGap = data.length > 1 - ? (height - 2 * padding) / (data.length - 1) - : height - 2 * padding, isTimeUppercase = true, - timeXOffset = -30, - timeWidth = 100, - textXOffset = 30, - textWidth = 100, - textHeight = 100, + timeWidth = 200, + textWidth = 300, + labelsOffset = 50, className, }: TimelineProps) { - const dataWithPositions = data.map((data, i) => ({ - x: timelinePosition, - y: i * nodeGap + padding, - time: isTimeUppercase ? data.time.toUpperCase() : data.time, - text: data.text, - })); - return ( - +
- {positionData.text} -
-{" "}