Skip to content

Commit 8e32d46

Browse files
salabh-aotsalabh-aot
committed
- AOT-Technologies#35 Design tuning to the Event Calendar tool
 - added new column for project names - now shows short forms of project and engagement, instead of full names - added popup when clicking an engagement - now shows engagement names on activity instead of project name - refactored the code for Engagement calendar
1 parent 13636c1 commit 8e32d46

File tree

5 files changed

+327
-96
lines changed

5 files changed

+327
-96
lines changed

‎viz-lib/src/visualizations/event-calendar/Calendar.css‎

Lines changed: 90 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
.calendar {
1111
display: grid;
12-
grid-template-columns: repeat(49, var(--gridSize));
12+
grid-template-columns: repeat(56, var(--gridSize));
1313
grid-auto-rows: var(--gridSize);
1414
position: relative;
1515
grid-area: calendar;
@@ -21,36 +21,32 @@
2121

2222
.title {
2323
grid-column: span 7;
24-
border-bottom: 1px solid gray;
25-
border-top: 2px solid #000000;
24+
border-bottom: 1px solid #ccd6eb;
25+
border-top: 2px solid #a7bce8;
2626
}
2727

2828
.title:first-of-type {
29-
grid-column: 8/15;
29+
grid-column: 15/22;
3030
}
3131

3232
.month {
33-
border: 2px solid #000000;
33+
border: 2px solid #a7bce8;
3434
}
3535

3636
.week-day:first-of-type {
37-
grid-column-start: 8;
38-
}
39-
40-
.day:not(:first-child),
41-
.day:not(:first-child),
42-
.week-day:not(:first-child),
43-
.week-day:not(:last-child) {
44-
border-right: 1px solid gray;
37+
grid-column-start: 15;
4538
}
4639

4740
.calendar .month {
4841
display: grid;
4942
grid-column: 1/-1;
50-
grid-template-columns: repeat(49, var(--gridSize));
43+
grid-template-columns: repeat(56, var(--gridSize));
5144
grid-auto-rows: var(--gridSize);
5245
position: relative;
5346
overflow: hidden;
47+
/* grid-row-gap: 1px; */
48+
justify-content: center;
49+
align-items: center;
5450
}
5551

5652
.calendar * {
@@ -63,37 +59,54 @@
6359
}
6460

6561
.month-name-column {
66-
display: flex;
67-
align-items: center;
62+
/* display: flex;
63+
align-items: center; */
6864
grid-column: span 7;
69-
justify-content: center;
65+
/* justify-content: center; */
66+
text-align: center;
7067
}
7168

72-
.month .day {
73-
border-bottom: 1px solid gray;
69+
.month-name-column::after {
70+
content: " ";
71+
width: 2px;
72+
height: 100%;
73+
background-color: #a7bce8;
74+
display: block;
75+
position: absolute;
76+
top: 0;
77+
bottom: 0;
78+
left: 0;
79+
grid-column-start: 8;
7480
}
81+
7582
.month .day:first-child {
76-
border-left: 1px solid gray;
83+
border-left: 1px solid #ccd6eb;
7784
}
7885
.blank-day {
79-
background-color: #c7c7c7;
86+
background-color: #d2d8e5;
8087
}
8188
.day,
8289
.blank-day {
8390
height: 100%;
8491
}
8592

86-
.month-event-item:not(:only-child) {
87-
text-indent: -100000px;
93+
.month-event-item,
94+
.month-event-item ~ span {
95+
border-radius: 5px;
96+
padding: 0 0.5em;
8897
}
98+
99+
/* .month-event-item:not(:only-child) {
100+
text-indent: -100000px;
101+
} */
89102
.month-event-item:not(:only-child) ~ span {
90103
opacity: 1 !important;
91104
}
92105

93106
.month-event-item.hovered {
94107
z-index: 1000 !important;
95108
text-indent: 0;
96-
box-shadow: 3px 3px #6863634a;
109+
box-shadow: 3px 3px #6863632b;
97110
}
98111
.month-event-item.hovered ~ span {
99112
opacity: 0 !important;
@@ -105,14 +118,15 @@
105118
}
106119

107120
.month-event-item {
108-
border: 1px solid gray;
121+
border: 1px solid #ccd6eb;
122+
/* position: relative; */
109123
}
110124

111125
.title::before,
112126
.title:last-of-type::after {
113127
content: " ";
114128
width: 2px;
115-
background-color: #000000;
129+
background-color: #a7bce8;
116130
top: 0;
117131
bottom: 0;
118132
display: block;
@@ -125,6 +139,56 @@
125139
}
126140

127141
.month-name-column,
142+
.project-name-column,
128143
.title {
129144
font-weight: bold;
145+
font-size: 1.5rem;
146+
}
147+
148+
.month-event-item ~ span,
149+
.month-event-item.hovered {
150+
overflow: hidden;
151+
}
152+
153+
.week-day::after {
154+
content: " ";
155+
width: 1px;
156+
background-color: #a7bce8;
157+
top: 0;
158+
bottom: 0;
159+
display: block;
160+
position: absolute;
161+
grid-row-start: 2;
162+
z-index: 1;
163+
}
164+
165+
/* .month-event-item:last-of-type::after, */
166+
.day::after,
167+
.month-event-item::after {
168+
content: " ";
169+
height: 1px;
170+
background-color: #a7bce8;
171+
left: 0;
172+
right: 0;
173+
display: block;
174+
position: absolute;
175+
width: 100%;
176+
grid-column-start: 8;
177+
margin-top: 5px;
178+
}
179+
180+
.title,
181+
.week-day,
182+
.day {
183+
text-align: center;
184+
}
185+
186+
.project-title {
187+
grid-column: 8 / 15;
188+
grid-row: span 2;
189+
text-align: center;
190+
font-weight: bold;
191+
border-top: 2px solid #a7bce8;
192+
border-left: 2px solid #a7bce8;
193+
padding-top: 7%;
130194
}

‎viz-lib/src/visualizations/event-calendar/Renderer.tsx‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,17 @@ import React, { useCallback, useMemo, useState } from "react";
22
import * as moment from "moment";
33
import { extendMoment } from "moment-range";
44

5-
import "./Calendar.css";
65
import Month from "./components/Month";
7-
// import { events } from "./events";
86
import { RendererPropTypes } from "../prop-types";
9-
107
const extendedMoment = extendMoment(moment);
118

9+
import "./Calendar.css";
10+
import { EngagementPopup } from "./components/EngagementPopup";
11+
1212
export default function Renderer(props: any) {
13+
const [showPopup, setShowPopup] = useState(false);
14+
const [selectedEvent, setSelectedEvent] = useState(null);
15+
1316
const prevMonth = extendedMoment.default().subtract(1, "months");
1417
const lastMonth = extendedMoment.default().endOf("year");
1518
const monthRange = extendedMoment.range(prevMonth, lastMonth).snapTo("month");
@@ -19,6 +22,16 @@ export default function Renderer(props: any) {
1922
const days = ["S", "M", "T", "W", "T", "F", "S"];
2023
const [hoveredEvent, setHoveredEvent] = useState(null);
2124

25+
const togglePopup = () => {
26+
setShowPopup(!showPopup);
27+
};
28+
29+
const handleEventClick = useCallback(event_id => {
30+
togglePopup();
31+
const event = events.find((e: any) => e.engagement_id === event_id);
32+
setSelectedEvent(event);
33+
}, []);
34+
2235
const monthEvents: any = useMemo(() => {
2336
let monthData: any = {};
2437
months.forEach((month: any) => {
@@ -37,6 +50,7 @@ export default function Renderer(props: any) {
3750
return (
3851
<div className="calendar-wrapper">
3952
<div className="calendar">
53+
<span className="project-title">Projects</span>
4054
<span className="title">Week 1</span>
4155
<span className="title">Week 2</span>
4256
<span className="title">Week 3</span>
@@ -59,13 +73,13 @@ export default function Renderer(props: any) {
5973
events={monthEvents ? monthEvents[month.format("MMMM")] : []}
6074
setHoveredEvent={setHoveredEvent}
6175
hoveredEvent={hoveredEvent}
76+
handleEventClick={handleEventClick}
6277
/>
6378
))}
6479
</div>
80+
{showPopup && <EngagementPopup event={selectedEvent} togglePopup={togglePopup} />}
6581
</div>
6682
);
6783
}
6884

69-
// export default Calendar;
70-
7185
Renderer.propTypes = RendererPropTypes;

‎viz-lib/src/visualizations/event-calendar/components/EngagementPopup.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.popup {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
position: fixed;
6+
left: 0;
7+
top: 0;
8+
width: 100vw;
9+
height: 100vh;
10+
z-index: 5000;
11+
}
12+
13+
.popup-mask {
14+
background-color: #00000080;
15+
position: absolute;
16+
left: 0;
17+
top: 0;
18+
right: 0;
19+
bottom: 0;
20+
z-index: 1;
21+
}
22+
23+
.popup-container {
24+
padding: 2rem;
25+
background-color: #ffffff;
26+
display: flex;
27+
flex-direction: column;
28+
align-items: stretch;
29+
position: relative;
30+
width: 400px;
31+
min-height: 400px;
32+
animation: fadeIn 0.5s;
33+
animation-fill-mode: forwards;
34+
animation-iteration-count: 1;
35+
z-index: 2;
36+
text-align: center;
37+
}
38+
.popup-header {
39+
padding: 10px;
40+
display: flex;
41+
justify-content: space-between;
42+
}
43+
.close-btn {
44+
width: 20px;
45+
height: 20px;
46+
position: absolute;
47+
top: 10px;
48+
right: 10px;
49+
display: flex;
50+
align-items: center;
51+
background-color: #ffffff;
52+
border-radius: 4px;
53+
}

‎viz-lib/src/visualizations/event-calendar/components/EngagementPopup.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from "react";
2+
import { CloseOutlined } from "@ant-design/icons";
3+
import "./EngagementPopup.css";
4+
5+
export const EngagementPopup = ({ event, togglePopup }: any) => {
6+
return (
7+
<div className="popup">
8+
<div className="popup-mask" onClick={togglePopup} />
9+
<div className="popup-container">
10+
<div className="popup-header">
11+
<h3>{event?.title}</h3>
12+
<CloseOutlined onClick={togglePopup} />
13+
</div>
14+
<div className="popup-body">
15+
<table className="table table-striped table-bordered ">
16+
<tbody>
17+
{event.start_date && (
18+
<tr>
19+
<th>Start Date</th>
20+
<td>{event.start_date.format("MMM DD, YYYY")}</td>
21+
</tr>
22+
)}
23+
{event.end_date && (
24+
<tr>
25+
<th>End Date</th>
26+
<td>{event.end_date.format("MMM DD, YYYY")}</td>
27+
</tr>
28+
)}
29+
{event.project && (
30+
<tr>
31+
<th>Project</th>
32+
<td>{event?.project}</td>
33+
</tr>
34+
)}
35+
{event.project_description && (
36+
<tr>
37+
<th>Description</th>
38+
<td>{event?.project_description}</td>
39+
</tr>
40+
)}
41+
{event.project_address && (
42+
<tr>
43+
<th>Address</th>
44+
<td> {event?.project_address}</td>
45+
</tr>
46+
)}
47+
{event.phase && (
48+
<tr>
49+
<th>Phase</th>
50+
<td>{event?.phase}</td>
51+
</tr>
52+
)}
53+
{event.staff && (
54+
<tr>
55+
<th>Staff</th>
56+
<td>{`${event?.staff || ""}(${event?.staff_email || ""})`}</td>
57+
</tr>
58+
)}
59+
{event.status && (
60+
<tr>
61+
<th>Status</th>
62+
<td>{event?.status}</td>
63+
</tr>
64+
)}
65+
</tbody>
66+
</table>
67+
</div>
68+
</div>
69+
</div>
70+
);
71+
};

0 commit comments

Comments
 (0)