-
Notifications
You must be signed in to change notification settings - Fork 103
/
ProposalStatusTimelineTooltip.svelte
94 lines (89 loc) · 2.88 KB
/
ProposalStatusTimelineTooltip.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<script lang="typescript">
import { formatDate, localize } from '@core/i18n'
import { networkStatus } from '@core/network'
import { milestoneToDate } from '@core/utils'
import { Position, Text, TextType, Tooltip } from 'shared/components'
import { ProposalStatus } from '@core/governance/enums'
export let milestones: Record<ProposalStatus, number>
export let status: ProposalStatus
export let anchor: HTMLElement
export let position: Position = Position.Right
const dateFormat = {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
timeZoneName: 'short',
} as Intl.DateTimeFormatOptions
let eventProgress: number
switch (status) {
case ProposalStatus.Announcement:
eventProgress = 0
break
case ProposalStatus.VotingOpen:
eventProgress = 1
break
case ProposalStatus.Counting:
eventProgress = 2
break
case ProposalStatus.Closed:
eventProgress = 3
break
default:
break
}
</script>
<Tooltip {anchor} {position}>
<ul class="space-y-3 text-left">
{#each Object.keys(ProposalStatus) as status, index}
<li class="grid grid-rows-2 relative" class:active={eventProgress >= index}>
<Text
overrideColor={eventProgress < index}
classes={eventProgress < index ? 'text-gray-400 dark:text-gray-700' : ''}
>
{formatDate(
milestoneToDate($networkStatus.currentMilestone, milestones[ProposalStatus[status]]),
dateFormat
)}
</Text>
<Text
type={TextType.h5}
overrideColor={eventProgress < index}
classes={eventProgress < index ? 'text-gray-400 dark:text-gray-700' : ''}
>
{localize(`views.governance.statusTimeline.${ProposalStatus[status]}`)}
</Text>
</li>
{/each}
</ul>
</Tooltip>
<style lang="scss">
li {
grid-template-columns: min-content 1fr;
&::before {
@apply justify-self-start;
@apply mr-4;
@apply row-span-2;
@apply self-center;
@apply text-2xl;
@apply text-gray-400;
content: '●';
}
&.active::before {
@apply text-blue-400;
}
&:not(:first-child)::after {
@apply absolute;
@apply block;
@apply border;
@apply border-gray-300;
@apply border-solid;
@apply bottom-4;
content: '';
height: 130%;
left: 0.38em;
z-index: -1;
}
}
</style>