From ab7824aff7305a19b3b16bdf20a889f794342988 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Thu, 13 May 2021 21:03:07 +1000
Subject: [PATCH] Prettier tooltips

---
 .../AvailabilityViewer/AvailabilityViewer.tsx | 166 ++++++++++--------
 .../availabilityViewerStyle.ts                |  35 +++-
 2 files changed, 118 insertions(+), 83 deletions(-)

diff --git a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
index fad5a09..9567aad 100644
--- a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
+++ b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, Fragment } from 'react';
+import { useState, useEffect, useRef, Fragment } from 'react';
 import dayjs from 'dayjs';
 import localeData from 'dayjs/plugin/localeData';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -8,6 +8,7 @@ import { useSettingsStore } from 'stores';
 import { Legend, Center } from 'components';
 import {
 	Wrapper,
+	ScrollWrapper,
 	Container,
 	Date,
 	Times,
@@ -19,6 +20,7 @@ import {
 	TooltipTitle,
 	TooltipDate,
 	TooltipContent,
+  TooltipPerson,
 	TimeLabels,
 	TimeLabel,
 	TimeSpace,
@@ -47,6 +49,8 @@ const AvailabilityViewer = ({
   const [tempFocus, setTempFocus] = useState(null);
   const [focusCount, setFocusCount] = useState(null);
 
+  const wrapper = useRef();
+
   useEffect(() => {
     setFilteredPeople(people.map(p => p.name));
     setTouched(people.length <= 1);
@@ -92,82 +96,94 @@ const AvailabilityViewer = ({
         )}
       </StyledMain>
 
-  		<Wrapper>
-  			<Container>
-  				<TimeLabels>
-  					{!!timeLabels.length && timeLabels.map((label, i) =>
-  						<TimeSpace key={i}>
-  							{label.label?.length !== '' && <TimeLabel>{label.label}</TimeLabel>}
-  						</TimeSpace>
-  					)}
-  				</TimeLabels>
-  				{dates.map((date, i) => {
-  					const parsedDate = isSpecificDates ? dayjs(date, 'DDMMYYYY') : dayjs().day(date);
-  					const last = dates.length === i+1 || (isSpecificDates ? dayjs(dates[i+1], 'DDMMYYYY') : dayjs().day(dates[i+1])).diff(parsedDate, 'day') > 1;
-  					return (
-  						<Fragment key={i}>
-  							<Date>
-  								{isSpecificDates && <DateLabel>{parsedDate.format('MMM D')}</DateLabel>}
-  								<DayLabel>{parsedDate.format('ddd')}</DayLabel>
+  		<Wrapper ref={wrapper}>
+    		<ScrollWrapper>
+    			<Container>
+    				<TimeLabels>
+    					{!!timeLabels.length && timeLabels.map((label, i) =>
+    						<TimeSpace key={i}>
+    							{label.label?.length !== '' && <TimeLabel>{label.label}</TimeLabel>}
+    						</TimeSpace>
+    					)}
+    				</TimeLabels>
+    				{dates.map((date, i) => {
+    					const parsedDate = isSpecificDates ? dayjs(date, 'DDMMYYYY') : dayjs().day(date);
+    					const last = dates.length === i+1 || (isSpecificDates ? dayjs(dates[i+1], 'DDMMYYYY') : dayjs().day(dates[i+1])).diff(parsedDate, 'day') > 1;
+    					return (
+    						<Fragment key={i}>
+    							<Date>
+    								{isSpecificDates && <DateLabel>{parsedDate.format('MMM D')}</DateLabel>}
+    								<DayLabel>{parsedDate.format('ddd')}</DayLabel>
 
-  								<Times>
-  									{timeLabels.map((timeLabel, i) => {
-  										if (!timeLabel.time) return null;
-  										if (!times.includes(`${timeLabel.time}-${date}`)) {
-  											return (
-  												<TimeSpace key={i} />
-  											);
-  										}
-  										const time = `${timeLabel.time}-${date}`;
-  										const peopleHere = tempFocus !== null
-                        ? people.filter(person => person.availability.includes(time) && tempFocus === person.name).map(person => person.name)
-                        : people.filter(person => person.availability.includes(time) && filteredPeople.includes(person.name)).map(person => person.name);
+    								<Times>
+    									{timeLabels.map((timeLabel, i) => {
+    										if (!timeLabel.time) return null;
+    										if (!times.includes(`${timeLabel.time}-${date}`)) {
+    											return (
+    												<TimeSpace key={i} />
+    											);
+    										}
+    										const time = `${timeLabel.time}-${date}`;
+    										const peopleHere = tempFocus !== null
+                          ? people.filter(person => person.availability.includes(time) && tempFocus === person.name).map(person => person.name)
+                          : people.filter(person => person.availability.includes(time) && filteredPeople.includes(person.name)).map(person => person.name);
 
-  										return (
-  											<Time
-  												key={i}
-  												time={time}
-  												className="time"
-  												peopleCount={focusCount !== null && focusCount !== peopleHere.length ? 0 : peopleHere.length}
-  												aria-label={peopleHere.join(', ')}
-  												maxPeople={tempFocus !== null ? 1 : Math.min(max, filteredPeople.length)}
-  												minPeople={tempFocus !== null ? 0 : Math.min(min, filteredPeople.length)}
-  												onMouseEnter={(e) => {
-  													const cellBox = e.currentTarget.getBoundingClientRect();
-                            const timeText = timeFormat === '12h' ? 'h:mma' : 'HH:mm';
-  													setTooltip({
-  														x: Math.round(cellBox.x + cellBox.width/2),
-  														y: Math.round(cellBox.y + cellBox.height)+6,
-  														available: `${peopleHere.length} / ${people.length} available`,
-  														date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(2, 4)).format(isSpecificDates ? `${timeText} ddd, D MMM YYYY` : `${timeText} ddd`),
-  														people: peopleHere.join(', '),
-  													});
-  												}}
-  												onMouseLeave={() => {
-  													setTooltip(null);
-  												}}
-  											/>
-  										);
-  									})}
-  								</Times>
-  							</Date>
-  							{last && dates.length !== i+1 && (
-  								<Spacer />
-  							)}
-  						</Fragment>
-  					);
-  				})}
-  			</Container>
-  			{tooltip && (
-  				<Tooltip
-  					x={tooltip.x}
-  					y={tooltip.y}
-  				>
-  					<TooltipTitle>{tooltip.available}</TooltipTitle>
-  					<TooltipDate>{tooltip.date}</TooltipDate>
-  					<TooltipContent>{tooltip.people}</TooltipContent>
-  				</Tooltip>
-  			)}
+    										return (
+    											<Time
+    												key={i}
+    												time={time}
+    												className="time"
+    												peopleCount={focusCount !== null && focusCount !== peopleHere.length ? 0 : peopleHere.length}
+    												aria-label={peopleHere.join(', ')}
+    												maxPeople={tempFocus !== null ? 1 : Math.min(max, filteredPeople.length)}
+    												minPeople={tempFocus !== null ? 0 : Math.min(min, filteredPeople.length)}
+    												onMouseEnter={(e) => {
+    													const cellBox = e.currentTarget.getBoundingClientRect();
+    													const wrapperBox = wrapper?.current?.getBoundingClientRect() ?? { x: 0, y: 0 };
+                              const timeText = timeFormat === '12h' ? 'h:mma' : 'HH:mm';
+    													setTooltip({
+    														x: Math.round(cellBox.x-wrapperBox.x + cellBox.width/2),
+    														y: Math.round(cellBox.y-wrapperBox.y + cellBox.height)+6,
+    														available: `${peopleHere.length} / ${people.length} available`,
+    														date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(2, 4)).format(isSpecificDates ? `${timeText} ddd, D MMM YYYY` : `${timeText} ddd`),
+    														people: peopleHere,
+    													});
+    												}}
+    												onMouseLeave={() => {
+    													setTooltip(null);
+    												}}
+    											/>
+    										);
+    									})}
+    								</Times>
+    							</Date>
+    							{last && dates.length !== i+1 && (
+    								<Spacer />
+    							)}
+    						</Fragment>
+    					);
+    				})}
+    			</Container>
+    			{tooltip && (
+    				<Tooltip
+    					x={tooltip.x}
+    					y={tooltip.y}
+    				>
+    					<TooltipTitle>{tooltip.available}</TooltipTitle>
+    					<TooltipDate>{tooltip.date}</TooltipDate>
+              {!!filteredPeople.length && (
+      					<TooltipContent>
+                  {tooltip.people.map(person =>
+                    <TooltipPerson key={person}>{person}</TooltipPerson>
+                  )}
+                  {filteredPeople.filter(p => !tooltip.people.includes(p)).map(person =>
+                    <TooltipPerson key={person} disabled>{person}</TooltipPerson>
+                  )}
+                </TooltipContent>
+              )}
+    				</Tooltip>
+    			)}
+        </ScrollWrapper>
   		</Wrapper>
     </>
 	);
diff --git a/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts b/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts
index dc25805..4702083 100644
--- a/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts
+++ b/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts
@@ -1,8 +1,13 @@
 import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
-	overflow-x: auto;
+	overflow-y: visible;
 	margin: 20px 0;
+  position: relative;
+`;
+
+export const ScrollWrapper = styled.div`
+  overflow-x: auto;
 `;
 
 export const Container = styled.div`
@@ -62,8 +67,8 @@ export const Time = styled.div`
 	`}
 
 	background-image: linear-gradient(
-		${props => `${props.theme.primary}${Math.round(((props.peopleCount)/(props.maxPeople))*255).toString(16)}`},
-		${props => `${props.theme.primary}${Math.round(((props.peopleCount)/(props.maxPeople))*255).toString(16)}`}
+		${props => `${props.theme.primary}${Math.round((props.peopleCount/props.maxPeople)*255).toString(16)}`},
+		${props => `${props.theme.primary}${Math.round((props.peopleCount/props.maxPeople)*255).toString(16)}`}
 	);
 `;
 
@@ -73,7 +78,7 @@ export const Spacer = styled.div`
 `;
 
 export const Tooltip = styled.div`
-	position: fixed;
+	position: absolute;
 	top: ${props => props.y}px;
 	left: ${props => props.x}px;
 	transform: translateX(-50%);
@@ -83,6 +88,7 @@ export const Tooltip = styled.div`
 	background-color: ${props => props.theme.background}DD;
 	max-width: 200px;
 	pointer-events: none;
+  z-index: 100;
 `;
 
 export const TooltipTitle = styled.span`
@@ -94,13 +100,26 @@ export const TooltipTitle = styled.span`
 export const TooltipDate = styled.span`
 	font-size: 13px;
 	display: block;
-	opacity: .7;
-	font-weight: 700;
+	opacity: .8;
+	font-weight: 600;
 `;
 
-export const TooltipContent = styled.span`
+export const TooltipContent = styled.div`
 	font-size: 13px;
-	display: block;
+  padding: 4px 0;
+`;
+
+export const TooltipPerson = styled.span`
+  display: inline-block;
+  margin: 2px;
+  padding: 1px 4px;
+  border: 1px solid ${props => props.theme.primary};
+  border-radius: 3px;
+
+  ${props => props.disabled && `
+    opacity: .5;
+    border-color: ${props.theme.text}
+  `}
 `;
 
 export const TimeLabels = styled.div`