Update veto dashboard

EwanLyon · Dec 23, 2020 · d80cf0e · d80cf0e
1 parent 1d0423c
commit d80cf0e
Show file tree

Hide file tree

Showing 10 changed files with 473 additions and 186 deletions.
diff --git a/src/dashboard/atoms/fit-text.tsx b/src/dashboard/atoms/fit-text.tsx
@@ -0,0 +1,48 @@
+// From jr-layouts by Hoishin https://github.com/JapaneseRestream/jr-layouts
+// Slightly modified by Ewan Lyon
+
+import React, { useRef, useEffect } from 'react';
+
+import styled from 'styled-components';
+
+export const Text = styled.div`
+	white-space: nowrap;
+`;
+
+interface Props {
+	text: string;
+	style?: React.CSSProperties;
+	className?: string;
+}
+
+export const FitText: React.FunctionComponent<Props> = React.memo((props: Props) => {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const textRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const container = containerRef.current;
+		const text = textRef.current;
+
+		if (!container || !text) {
+			return;
+		}
+
+		const MAX_WIDTH = container.clientWidth;
+		const currentWidth = text.clientWidth;
+		const scaleX = currentWidth > MAX_WIDTH ? MAX_WIDTH / currentWidth : 1;
+		const newTransform = `scaleX(${scaleX})`;
+
+		text.style.transform = newTransform;
+	});
+
+	return (
+		<div
+			className={props.className}
+			style={{ display: 'flex', justifyContent: 'center', ...props.style }}
+			ref={containerRef}>
+			<Text ref={textRef}>{props.text}</Text>
+		</div>
+	);
+});
+
+FitText.displayName = 'FitText';
diff --git a/src/dashboard/atoms/grabhandle.tsx b/src/dashboard/atoms/grabhandle.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
+
+const Handle = styled.div`
+	height: 9px;
+	width: 18px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`;
+
+const HandleBar = styled.div`
+	height: 2px;
+	width: 100%;
+	background: #525f78;
+	border-radius: 1px;
+`;
+
+interface Props {
+	handleProps: DraggableProvidedDragHandleProps | undefined;
+}
+
+export const GrabHandles: React.FC<Props> = (props: Props) => {
+	return (
+		<Handle {...props.handleProps}>
+			<HandleBar />
+			<HandleBar />
+		</Handle>
+	);
+};
diff --git a/src/dashboard/atoms/styled-ui.tsx b/src/dashboard/atoms/styled-ui.tsx
@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+import { Button, Checkbox, TextField } from '@material-ui/core';
+import { green, red } from '@material-ui/core/colors';
+
+export const GreenButton = styled(Button)`
+	&.MuiButton-contained {
+		background: ${green[600]};
+		color: white;
+	}
+
+	&.MuiButton-contained:hover {
+		background: ${green[300]};
+	}
+`;
+
+export const RedButton = styled(Button)`
+	&.MuiButton-contained {
+		background: ${red[600]};
+		color: white;
+	}
+
+	&.MuiButton-contained:hover {
+		background: ${red[600]};
+	}
+`;
+
+export const GreenCheckbox = styled(Checkbox)`
+	&.MuiCheckbox-colorSecondary.Mui-checked:hover {
+		background-color: ${green[600]}0a;
+	}
+
+	&.MuiIconButton-colorSecondary:hover {
+		background-color: ${green[600]}0a;
+	}
+
+	&.MuiCheckbox-colorSecondary.Mui-checked {
+		color: ${green[600]};
+	}
+
+	& svg {
+		background-color: #ffffff;
+	}
+`;
+
+export const LightTextfield = styled(TextField)`
+	&.Mui-focused {
+		color: #a8bde3;
+	}
+
+	&.MuiInput-underline:after {
+		border-bottom: 2px solid #a8bde3;
+	}
+
+	&.MuiInputBase-input {
+		color: #ffffff;
+	}
+`;
diff --git a/src/dashboard/maps.html b/src/dashboard/maps.html
@@ -5,9 +5,14 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<title>Maps</title>
+	<style>
+		body {
+			margin: 0;
+		}
+	</style>
 </head>
 <body>
-	<div id="maps"></div>
-	<script src="setup/maps/maps.tsx"></script>
+	<div id="dash-veto"></div>
+	<script src="setup/maps/veto.tsx"></script>
 </body>
 </html>
diff --git a/src/dashboard/setup/maps/maps.tsx b/src/dashboard/setup/maps/maps.tsx
diff --git a/src/dashboard/setup/maps/selected-map.tsx b/src/dashboard/setup/maps/selected-map.tsx