Merge pull request #318 from FormidableLabs/issue/239-timeline-pane-i…

…ndicators Add pane titles to Timeline events, closes #239
urql-graphql · Oct 6, 2020 · cacfa55 · cacfa55
2 parents 6436c5c + 6ed784b
commit cacfa55
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 0 deletions.
diff --git a/.../__image_snapshots__/TimelinePane - event (without metadata)-landscape-snap.png b/.../__image_snapshots__/TimelinePane - event (without metadata)-landscape-snap.png
diff --git a/src/panel/__image_snapshots__/TimelinePane - event-landscape-snap.png b/src/panel/__image_snapshots__/TimelinePane - event-landscape-snap.png
diff --git a/..._image_snapshots__/TimelinePane - source (without variables)-landscape-snap.png b/..._image_snapshots__/TimelinePane - source (without variables)-landscape-snap.png
diff --git a/src/panel/__image_snapshots__/TimelinePane - source-landscape-snap.png b/src/panel/__image_snapshots__/TimelinePane - source-landscape-snap.png
diff --git a/src/panel/pages/events/components/TimelinePane/TimelinePane.tsx b/src/panel/pages/events/components/TimelinePane/TimelinePane.tsx
@@ -60,6 +60,7 @@ const EventSection: FC<{ event: DebugEvent }> = ({ event }) => {
 
   return (
     <PaneSection>
+      <Title>Event</Title>
       <Heading>Event</Heading>
       <p>{event.type}</p>
       <Heading>Message</Heading>
@@ -85,6 +86,7 @@ const EventSection: FC<{ event: DebugEvent }> = ({ event }) => {
 /** Info about the source operation for the given event. */
 const SourceSection: FC<{ operation: Operation }> = ({ operation }) => (
   <PaneSection>
+    <Title>Operation</Title>
     <Heading>Key</Heading>
     <p>{operation.key}</p>
     <Heading>Operation type</Heading>
@@ -119,6 +121,14 @@ const Body = styled(Pane.Body)`
   }
 `;
 
+const Title = styled.h2`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  font-size: 12px;
+  font-weight: normal;
+`;
+
 const Heading = styled.h3`
   color: #fff;
   font-size: 13px;