From a486b5bdfc46f2f4448a5345f20e55af20e9053e Mon Sep 17 00:00:00 2001 From: glax Date: Wed, 23 Oct 2024 03:01:23 +0200 Subject: [PATCH] Added April Fools Mode toggle --- Website/modules/Settings.tsx | 21 ++++- Website/styles/react-toggle.css | 143 ++++++++++++++++++++++++++++++++ package-lock.json | 34 ++++++++ package.json | 2 + 4 files changed, 198 insertions(+), 2 deletions(-) create mode 100644 Website/styles/react-toggle.css diff --git a/Website/modules/Settings.tsx b/Website/modules/Settings.tsx index a3ea4a0..4c8f67b 100644 --- a/Website/modules/Settings.tsx +++ b/Website/modules/Settings.tsx @@ -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(settings); @@ -97,16 +99,27 @@ export default function Settings({backendConnected, apiUri, settings, changeSett .catch(() => alert("Failed to update Useragent.")); } } + const ResetUserAgent: MouseEventHandler = () => { + //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 = (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 Reset + +
Rate Limits diff --git a/Website/styles/react-toggle.css b/Website/styles/react-toggle.css new file mode 100644 index 0000000..1a139ba --- /dev/null +++ b/Website/styles/react-toggle.css @@ -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; +} diff --git a/package-lock.json b/package-lock.json index 6d78c38..b151042 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index aea735a..fa7913b 100644 --- a/package.json +++ b/package.json @@ -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" },