Added a test mode toggle test.

4 years ago · 2de2a9aef6
parent 6a47326db2
commit 2de2a9aef6
4 changed files with 170 additions and 4 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -4213,6 +4213,11 @@
        }
      }
    },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
    "clean-css": {
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@ -12795,6 +12800,14 @@
        "@emotion/core": "^10.0.10"
      }
    },
+    "react-toggle": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.2.tgz",
+      "integrity": "sha512-4Ohw31TuYQdhWfA6qlKafeXx3IOH7t4ZHhmRdwsm1fQREwOBGxJT+I22sgHqR/w8JRdk+AeMCJXPImEFSrNXow==",
+      "requires": {
+        "classnames": "^2.2.5"
+      }
+    },
    "read-pkg": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -22,6 +22,7 @@
    "react-router-hash-link": "^2.4.3",
    "react-scripts": "4.0.3",
    "react-simple-tooltip": "^2.6.3",
+    "react-toggle": "^4.1.2",
    "typescript": "^4.3.5",
    "web-vitals": "^1.1.2"
  },
--- a/src/App.js
+++ b/src/App.js
@ -4,7 +4,8 @@ import './style.css'; // The new new
 import React, {useState,useEffect,useRef,useReducer} from 'react';
 import useGlobalKeyDown from 'react-global-key-down-hook'
 import Modal from 'react-modal'
-import Tooltip from "react-simple-tooltip" //Mess with all tooltip props here: https://cedricdelpoux.github.io/react-simple-tooltip/
+import Tooltip from 'react-simple-tooltip' //Mess with all tooltip props here: https://cedricdelpoux.github.io/react-simple-tooltip/
+import Toggle from 'react-toggle' //Tooltip props: http://aaronshaf.github.io/react-toggle/

 import {XSquare, XSquareFill, PlusCircle} from 'react-bootstrap-icons'

@ -883,6 +884,7 @@ function App() {
 	const [effective,setEffective] = useState(127)

 	const [modalOpen,setModalOpen] = useState(true)
+	const [testMode,setTestMode] = useState(false)
 	
  return (
  <>
@ -917,9 +919,12 @@ function App() {
 					<PopupWindow modalOpen={modalOpen} setModalOpen={setModalOpen} showCloseButton={true} title="Modal Title">Modal content goes here.{BACKEND_URL}
 					<br/><br/><Tooltip 
 						arrow={10} background="rgba(40,40,40,0.8)" border="white" radius={10}
-						offset={-6} placement="bottom" fadeDuration={300} style={{width:"600px"}}
+						offset={-6} placement="top" fadeDuration={300} style={{width:"600px"}}
 						content={<TooltipTest/>}
-					>Mouseover Me! I need more width to make this work.</Tooltip></PopupWindow>
+					>Mouseover Me! I need more width to make this work.</Tooltip>
+					<br/><br/>
+					<Toggle className="testmode" defaultChecked={testMode} value={testMode} onChange={(t)=>{setTestMode(t.target.checked)}}/>Test Mode: {JSON.stringify(testMode)}
+					</PopupWindow>
 				</div>
 			</Route>
 		</Switch>
--- a/src/style.css
+++ b/src/style.css
@ -946,4 +946,151 @@ p.adminNav hr {
 	border: 2px solid black;
 	background:white;
 	color:black;
-}
+}
+.react-toggle {
+	touch-action: pan-x;
+  
+	display: inline-block;
+	position: relative;
+	cursor: pointer;
+	background-color: transparent;
+	border: 0;
+	padding: 0;
+  
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+  
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	-webkit-tap-highlight-color: transparent;
+  }
+  
+  .react-toggle-screenreader-only {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+  }
+  
+  .react-toggle--disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+	-webkit-transition: opacity 0.25s;
+	transition: opacity 0.25s;
+  }
+  
+  .react-toggle-track {
+	width: 50px;
+	height: 24px;
+	padding: 0;
+	border-radius: 30px;
+	background-color: #4D4D4D;
+	-webkit-transition: all 0.2s ease;
+	-moz-transition: all 0.2s ease;
+	transition: all 0.2s ease;
+  }
+  
+  .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+	background-color: #000000;
+  }
+  
+  .react-toggle--checked .react-toggle-track {
+	background-color: #19AB27;
+  }
+  
+  .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+	background-color: #128D15;
+  }
+  
+  .react-toggle-track-check {
+	position: absolute;
+	width: 14px;
+	height: 10px;
+	top: 0px;
+	bottom: 0px;
+	margin-top: auto;
+	margin-bottom: auto;
+	line-height: 0;
+	left: 8px;
+	opacity: 0;
+	-webkit-transition: opacity 0.25s ease;
+	-moz-transition: opacity 0.25s ease;
+	transition: opacity 0.25s ease;
+  }
+  
+  .react-toggle--checked .react-toggle-track-check {
+	opacity: 1;
+	-webkit-transition: opacity 0.25s ease;
+	-moz-transition: opacity 0.25s ease;
+	transition: opacity 0.25s ease;
+  }
+  
+  .react-toggle-track-x {
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	top: 0px;
+	bottom: 0px;
+	margin-top: auto;
+	margin-bottom: auto;
+	line-height: 0;
+	right: 10px;
+	opacity: 1;
+	-webkit-transition: opacity 0.25s ease;
+	-moz-transition: opacity 0.25s ease;
+	transition: opacity 0.25s ease;
+  }
+  
+  .react-toggle--checked .react-toggle-track-x {
+	opacity: 0;
+  }
+  
+  .react-toggle-thumb {
+	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+	position: absolute;
+	top: 1px;
+	left: 1px;
+	width: 22px;
+	height: 22px;
+	border: 1px solid #4D4D4D;
+	border-radius: 50%;
+	background-color: #FAFAFA;
+  
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+  
+	-webkit-transition: all 0.25s ease;
+	-moz-transition: all 0.25s ease;
+	transition: all 0.25s ease;
+  }
+  
+  .react-toggle--checked .react-toggle-thumb {
+	left: 27px;
+	border-color: #19AB27;
+  }
+  
+  .react-toggle--focus .react-toggle-thumb {
+	-webkit-box-shadow: 0px 0px 3px 2px #0099E0;
+	-moz-box-shadow: 0px 0px 3px 2px #0099E0;
+	box-shadow: 0px 0px 2px 3px #0099E0;
+  }
+  
+  .react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
+	-webkit-box-shadow: 0px 0px 5px 5px #0099E0;
+	-moz-box-shadow: 0px 0px 5px 5px #0099E0;
+	box-shadow: 0px 0px 5px 5px #0099E0;
+  }
+  .testmode.react-toggle--checked .react-toggle-track {
+	background-color: #00AADD;
+  }
+  .testmode.react-toggle--checked .react-toggle-track:hover {
+	background-color: #00AADD;
+  }