Added a test mode toggle test.

master
sigonasr2, Sig, Sigo 4 years ago
parent 6a47326db2
commit 2de2a9aef6
  1. 13
      package-lock.json
  2. 1
      package.json
  3. 11
      src/App.js
  4. 149
      src/style.css

13
package-lock.json generated

@ -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",

@ -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"
},

@ -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>

@ -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;
}
Loading…
Cancel
Save