Added April Fools Mode toggle
This commit is contained in:
parent
f426a77f25
commit
a486b5bdfc
@ -1,4 +1,4 @@
|
||||
import React, {KeyboardEventHandler, MouseEventHandler, useEffect, useState} from 'react';
|
||||
import React, {ChangeEventHandler, KeyboardEventHandler, MouseEventHandler, useEffect, useState} from 'react';
|
||||
import IFrontendSettings from "./interfaces/IFrontendSettings";
|
||||
import '../styles/settings.css';
|
||||
import IBackendSettings from "./interfaces/IBackendSettings";
|
||||
@ -7,6 +7,8 @@ import LibraryConnector, {Kavita, Komga} from "./LibraryConnector";
|
||||
import NotificationConnector, {Gotify, Lunasea, Ntfy} from "./NotificationConnector";
|
||||
import ILibraryConnector from "./interfaces/ILibraryConnector";
|
||||
import INotificationConnector from "./interfaces/INotificationConnector";
|
||||
import Toggle from 'react-toggle';
|
||||
import '../styles/react-toggle.css';
|
||||
|
||||
export default function Settings({backendConnected, apiUri, settings, changeSettings} : {backendConnected: boolean, apiUri: string, settings: IFrontendSettings, changeSettings: (settings: IFrontendSettings) => void}) {
|
||||
const [frontendSettings, setFrontendSettings] = useState<IFrontendSettings>(settings);
|
||||
@ -97,16 +99,27 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
|
||||
.catch(() => alert("Failed to update Useragent."));
|
||||
}
|
||||
}
|
||||
|
||||
const ResetUserAgent: MouseEventHandler<HTMLSpanElement> = () => {
|
||||
//console.info(`Resetting Useragent`);
|
||||
postData(`${apiUri}/v2/Settings/UserAgent`, {value: undefined})
|
||||
.then((json) => {
|
||||
//console.info(`Successfully updated Useragent ${e.currentTarget.value}`);
|
||||
//console.info(`Successfully reset Useragent`);
|
||||
UpdateBackendSettings();
|
||||
RefreshInputs();
|
||||
})
|
||||
.catch(() => alert("Failed to update Useragent."));
|
||||
}
|
||||
|
||||
const SetAprilFoolsMode : ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
//console.info(`Updating AprilFoolsMode ${e.currentTarget.value}`);
|
||||
postData(`${apiUri}/v2/Settings/AprilFoolsMode`, {value: e.currentTarget.value == "on"})
|
||||
.then((json) => {
|
||||
//console.info(`Successfully updated AprilFoolsMode ${e.currentTarget.value}`);
|
||||
UpdateBackendSettings();
|
||||
})
|
||||
}
|
||||
|
||||
function RefreshInputs(){
|
||||
alert("Saved.");
|
||||
setShowSettings(false);
|
||||
@ -132,6 +145,10 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
|
||||
<label htmlFor="userAgent">User Agent:</label>
|
||||
<input id="userAgent" type="text" placeholder={backendSettings != undefined ? backendSettings.userAgent : "UserAgent"} onKeyDown={SubmitUserAgent} />
|
||||
<span id="resetUserAgent" onClick={ResetUserAgent}>Reset</span>
|
||||
<label htmlFor="aprilFoolsMode">April Fools Mode</label>
|
||||
<Toggle id="aprilFoolsMode"
|
||||
defaultChecked={backendSettings?.aprilFoolsMode ?? false}
|
||||
onChange={SetAprilFoolsMode} />
|
||||
</div>
|
||||
<div className="section-item">
|
||||
<span className="settings-section-title">Rate Limits</span>
|
||||
|
||||
143
Website/styles/react-toggle.css
Normal file
143
Website/styles/react-toggle.css
Normal file
@ -0,0 +1,143 @@
|
||||
/* https://raw.githubusercontent.com/instructure-react/react-toggle/master/style.css */
|
||||
|
||||
.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;
|
||||
}
|
||||
34
package-lock.json
generated
34
package-lock.json
generated
@ -12,9 +12,11 @@
|
||||
"@mdi/js": "^7.4.47",
|
||||
"@mdi/react": "^1.6.1",
|
||||
"@types/react": "^18.2.0",
|
||||
"@types/react-toggle": "^4.0.5",
|
||||
"react": "^18.3.1",
|
||||
"react-cookie": "^7.2.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-toggle": "^4.1.3",
|
||||
"typescript": "^5.6.3",
|
||||
"vite": "^5.4.9"
|
||||
}
|
||||
@ -762,6 +764,16 @@
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-toggle": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-toggle/-/react-toggle-4.0.5.tgz",
|
||||
"integrity": "sha512-MHHEDe7GnF/EhLtI5sT70Dqab8rwlgjRZtu/u6gmfbYd+HeYxWiUSRog16+1BCfkz7Wy2VU6+TPU2oCsDtqDzA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/scheduler": {
|
||||
"version": "0.23.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.23.0.tgz",
|
||||
@ -893,6 +905,13 @@
|
||||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/classnames": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
|
||||
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/comma-separated-tokens": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
|
||||
@ -2575,6 +2594,21 @@
|
||||
"react": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-toggle": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.3.tgz",
|
||||
"integrity": "sha512-WoPrvbwfQSvoagbrDnXPrlsxwzuhQIrs+V0I162j/s+4XPgY/YDAUmHSeWiroznfI73wj+MBydvW95zX8ABbSg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prop-types": ">= 15.3.0 < 19",
|
||||
"react": ">= 15.3.0 < 19",
|
||||
"react-dom": ">= 15.3.0 < 19"
|
||||
}
|
||||
},
|
||||
"node_modules/refractor": {
|
||||
"version": "4.8.1",
|
||||
"resolved": "https://registry.npmjs.org/refractor/-/refractor-4.8.1.tgz",
|
||||
|
||||
@ -3,9 +3,11 @@
|
||||
"@mdi/js": "^7.4.47",
|
||||
"@mdi/react": "^1.6.1",
|
||||
"@types/react": "^18.2.0",
|
||||
"@types/react-toggle": "^4.0.5",
|
||||
"react": "^18.3.1",
|
||||
"react-cookie": "^7.2.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-toggle": "^4.1.3",
|
||||
"typescript": "^5.6.3",
|
||||
"vite": "^5.4.9"
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user