From 7148f52a52c0fd098b0b1c1424f28242f31121e2 Mon Sep 17 00:00:00 2001 From: Andy Richardson Date: Thu, 2 Apr 2020 15:34:11 +0100 Subject: [PATCH 1/3] Use flex for icons --- src/panel/pages/events/Timeline.tsx | 34 +++++++++++++--------- src/panel/pages/events/components/Tick.tsx | 3 +- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/panel/pages/events/Timeline.tsx b/src/panel/pages/events/Timeline.tsx index 24d5ec0c..5ebc45b9 100644 --- a/src/panel/pages/events/Timeline.tsx +++ b/src/panel/pages/events/Timeline.tsx @@ -136,9 +136,6 @@ export const Timeline: FC = () => { ); }; -const SPACING = 40; -const ROW_PADDING = 8; - const Page = styled(Background)` background-color: ${(p) => p.theme.dark["0"]}; `; @@ -155,26 +152,35 @@ const TimelineContainer = styled.div` `; const TimelineIcons = styled.div` - background-color: ${(p) => p.theme.dark["-3"]}; - display: grid; - justify-content: center; - grid-template-rows: 20px; - grid-row-gap: ${ROW_PADDING * 2}px; - /* TimelineList outer margin + inner margin + padding */ - padding: ${SPACING + ROW_PADDING + 30}px 0; - position: relative; - width: ${SPACING}px; + display: flex; + flex-direction: column; + align-items: center; + width: 40px; z-index: 1; + + > :first-child { + margin-top: 78px; + } + + > * { + margin-bottom: 16px; + } + + > *:after { + content: ""; + width: 200px; + height: 200px; + } `; const TimelineList = styled.div` cursor: grab; display: flex; - width: calc(100% - ${SPACING}px); flex-direction: column; flex-grow: 1; position: relative; - margin: ${SPACING}px 0; + padding: 40px 0; + overflow: hidden; &:active { cursor: grabbing; } diff --git a/src/panel/pages/events/components/Tick.tsx b/src/panel/pages/events/components/Tick.tsx index 04108cb0..c808a5bd 100644 --- a/src/panel/pages/events/components/Tick.tsx +++ b/src/panel/pages/events/components/Tick.tsx @@ -16,7 +16,6 @@ export const Tick = styled.div<{ label: string }>` display: block; text-align: center; width: 100px; - margin-top: -25px; margin-left: -50px; } @@ -24,7 +23,7 @@ export const Tick = styled.div<{ label: string }>` content: ""; position: absolute; width: 2px; - top: 0; + top: 25px; bottom: 0; background: ${(props) => props.theme.dark["+1"]}; opacity: 0.3; From 78f14b7cc3d30d67b27fd92ab7ec8fb97b9c2cb0 Mon Sep 17 00:00:00 2001 From: Andy Richardson Date: Thu, 2 Apr 2020 17:07:19 +0100 Subject: [PATCH 2/3] Fix fetchResponse term --- src/panel/pages/events/Timeline.fixture.tsx | 2 +- src/panel/pages/events/components/TimelineRow.fixture.tsx | 2 +- src/panel/pages/events/components/TimelineRow.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/panel/pages/events/Timeline.fixture.tsx b/src/panel/pages/events/Timeline.fixture.tsx index a60b714b..d084243c 100644 --- a/src/panel/pages/events/Timeline.fixture.tsx +++ b/src/panel/pages/events/Timeline.fixture.tsx @@ -72,7 +72,7 @@ const defaultEvents: DebugEvent[] = [ { type: "debug", data: { - type: "fetchResponse", + type: "fetchSuccess", message: "The fetch request succeeded", operation: operation1, source: "fetchExchange", diff --git a/src/panel/pages/events/components/TimelineRow.fixture.tsx b/src/panel/pages/events/components/TimelineRow.fixture.tsx index 2274fdc3..b0c182ad 100644 --- a/src/panel/pages/events/components/TimelineRow.fixture.tsx +++ b/src/panel/pages/events/components/TimelineRow.fixture.tsx @@ -92,7 +92,7 @@ export default { source: "devtoolsExchange", }, { - type: "fetchResponse", + type: "fetchSuccess", message: "A listener was added to the stream", timestamp: Date.now() + 65000, source: "devtoolsExchange", diff --git a/src/panel/pages/events/components/TimelineRow.tsx b/src/panel/pages/events/components/TimelineRow.tsx index 0d0e6830..5bc94a3a 100644 --- a/src/panel/pages/events/components/TimelineRow.tsx +++ b/src/panel/pages/events/components/TimelineRow.tsx @@ -62,7 +62,7 @@ export const TimelineRow: FC< } // Response - if (e.type === "fetchResponse") { + if (e.type === "fetchSuccess") { return { start: undefined, elements: [ From e0049d89994c01fa8c5e3cb9ffc3a206781dac2a Mon Sep 17 00:00:00 2001 From: Andy Richardson Date: Fri, 3 Apr 2020 10:49:29 +0100 Subject: [PATCH 3/3] Update snapshot for tick --- .../__image_snapshots__/Tick - basic-snap.png | Bin 3896 -> 4137 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/src/panel/__image_snapshots__/Tick - basic-snap.png b/src/panel/__image_snapshots__/Tick - basic-snap.png index e2e3bc7e0160ea7936bc5428ec9e61f8b1fcb019..5584cf41c8eaff990fc1d517966f7bfc8820359f 100644 GIT binary patch delta 1145 zcmcIj{ZCp46n*O4)~(enUFVusY_nwjK{_-{fmWq9wXJb#mabF8$~NbtYSk+96M@#R zu9|8Wr|=YIYTVX2vHDt&A?P+6x9|ibMT-bnQJ4iphl-%U@Q>I}H#xZ{Irp4%M^TSX zJ&a%l8xk+Ye^$Y@E|UIQ%?X{@(jOOwzb$vh zdjGU@#Tb@cZ8|g%TzL}!0Dl?Edc-$bUgB$S0>Hy}P65D$%XfUpaX)_m`1=0<+x=JS zj%E?eL*lB!aqAh{8XE(#&Jdl6Nlnf8Wdd!xEe$CUdMZA0?o+ATuTK4iTv*Wo>&tZ~-LnQGU%cMo;L&#w1dT=`PTuZr^=1-VK8ztU*QIpXnCaK@ILiT@ z=c5yrCIXDTO&I9BZC@3$F;PoXspb(S&+`OgK_v0cjCweGDpTlb5P3a&rf`beb+Yt% z6RJ#5Xzj7r+9R-_Hb&wcGod1ddTA~Q24%1$RqG;Cc@jKG z7Rv9wfrlXLb7FlYRq7nHHyS8Wsf<_GjFU$xZap#97p#k|Ic%OA?7Egps7zsK*RWW)WK|01 zJJ$Q1@-8t81VKF`%~BkVrP*xW2=kCvhaig;hGg1{FBKg;ZHXB{ZY}P%5{#TaZArd`DEOQLTP0R(U44c{{R3JeYP-9VE%N+Gtov(s$67Z+!ho{s30gP@+#4k^z;n4 z+DYjy(g+wWFiVg>&sU4GO|xdLm{qR$gEAy>==2JW&a+O~{=OA7OylHJ#GRLFme=i= zJMIVEnfkULAU(}fRj>Cdkid|v7@@98Gh1_(Eb!g0XATUHj^Z6!$J9ZNC~C{3&v~jn zbexOpcD7flWi7ngpp4j`x?Bt1l}w-7?3ob=T9vUCfjpLHGLvR?iFOvYy^ojX$DLNo z!c$sG%%%#?Q~gq@gs4cvkrQEMJ6Fec6ENHX{#bPoVdXyj)w4#mfU#$R6)5D;plrRwXsiDxO>Ib*g(YTQ`di%H(})dCB(u zsU@`aZUFHZJ@x`hs5h93_hOkvEVNGwaUv8R4j{iBg7ExiO5-_K!W!Q9?E{GkDVO*c Hzo_{SROwjG delta 775 zcmV+i1Ni)@Ah;foFn5w`p zgb*sHI7>x45G+irEDVw)`mvf){R1Utrlo5VjNF#g5-O#Rs$*k@<~nI>&-2tl@=&8D z($iau*9&gAzt`t`U0mP8H#gktUUkm4zs@Ocyy5ye|NL!p$A4$;oSm0kJRiRC`nl@r z56#TX=FOYtiJv__Z+i1Z^R^vt{kOB%z4kTpz<2JQ+dlrOIe6&D^T|)#I+tDcp1J9! zkIs`%JvDcI?z8js)4!iDd~we#E^eKNzxTjgapmrL{`q5b&)s|Gk$pdy`|tnmsjmhA z0Q?VIIQ7Ez?SHSIU01w+c3ri5W@gSj^Nd+uSy`PgEiKQ?%o%5FJnd{|=Go`|IQt*{ z;mph&IPln9aKRhrCqF$hGc$(|KR%aUy7PtmmS)3-4fBTW+vnh+L$mvu>(>0B006+t zZ~Z?m&O2{$?%Dh0x&703%rnpYVPUw2mWj4HU@3YT7H#dLeW3%gu_s!u$2j=s4-8q{#Z(gf20ssK75UT;QWy_ZN#@Fti zz4v^5jvRSnb;Hr4M`v+yado}8xH!j-{b^2~JbBvLOR;g|!u;ZwPtFIgyX+t`efwwMzWx8S;Wxki-7GIJ&E=QBceZTV zGS^*u%^W;<_(f+g#XH`9(LD6vw`be7SI@?c8|V0m6SHpJ8k`OQ0C+`NKQnXTg*#@) zj?+!2~`P z%$f(tS)0zDvo@W*){g}M0R9j71+(!4Aq$fb2E7-|-vCW)