Added a test mode toggle test.
This commit is contained in:
parent
6a47326db2
commit
2de2a9aef6
13
package-lock.json
generated
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"
|
||||
},
|
||||
|
||||
11
src/App.js
11
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>
|
||||
|
||||
147
src/style.css
147
src/style.css
@ -947,3 +947,150 @@ p.adminNav hr {
|
||||
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…
x
Reference in New Issue
Block a user