michael.reber/rclone-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

darkmode added

Browse Source
This commit is contained in:
controlol 2021-10-29 21:16:46 +02:00
parent 46a25e26c0
commit 2f96d2c112
7 changed files with 132 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

@ -14,6 +14,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-switch": "^6.0.0",
"styled-components": "^5.3.3",
"web-vitals": "^1.1.2"
}
@ -16409,6 +16410,18 @@
"semver": "bin/semver"
}
},
"node_modules/react-switch": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/react-switch/-/react-switch-6.0.0.tgz",
"integrity": "sha512-QV3/6eRK5/5epdQzIqvDAHRoGLbCv/wDpHUi6yBMXY1Xco5XGuIZxvB49PHoV1v/SpEgOCJLD/Zo43iic+aEIw==",
"dependencies": {
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": "^15.3.0 || ^16.0.0 || ^17.0.0",
"react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0"
}
},
"node_modules/read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@ -33996,6 +34009,14 @@
}
}
},
"react-switch": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/react-switch/-/react-switch-6.0.0.tgz",
"integrity": "sha512-QV3/6eRK5/5epdQzIqvDAHRoGLbCv/wDpHUi6yBMXY1Xco5XGuIZxvB49PHoV1v/SpEgOCJLD/Zo43iic+aEIw==",
"requires": {
"prop-types": "^15.7.2"
}
},
"read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",

1
package.json
View File

@ -10,6 +10,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-switch": "^6.0.0",
"styled-components": "^5.3.3",
"web-vitals": "^1.1.2"
},

1
src/assets/icons/moon.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#efcc00;}</style></defs><title/><path class="cls-1" d="M44.54,41.47A23,23,0,0,1,24.49,11.73,1,1,0,0,0,23,10.59,23,23,0,1,0,54.41,42a1,1,0,0,0-1.14-1.47A23.06,23.06,0,0,1,44.54,41.47Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 331 B

1
src/assets/icons/sun.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:3px;}</style></defs><title/><circle class="cls-1" cx="32" cy="32" r="17"/><line class="cls-2" x1="32" x2="32" y1="5" y2="11"/><line class="cls-2" x1="32" x2="32" y1="53" y2="59"/><line class="cls-2" x1="59" x2="53" y1="32" y2="32"/><line class="cls-2" x1="11" x2="5" y1="32" y2="32"/><line class="cls-2" x1="51.09" x2="46.85" y1="12.91" y2="17.15"/><line class="cls-2" x1="17.15" x2="12.91" y1="46.85" y2="51.09"/><line class="cls-2" x1="51.09" x2="46.85" y1="51.09" y2="46.85"/><line class="cls-2" x1="17.15" x2="12.91" y1="17.15" y2="12.91"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 780 B

90
src/components/settings.jsx
View File

@ -1,19 +1,83 @@
import { Component, Fragment } from "react"
import { InfosWrapper, PopupContainer, PopupTitle, Cross, Button } from "../styled"
import { InfosWrapper, PopupContainer, PopupTitle, Cross, Button, IconWrapper } from "../styled"
import API from '../utils/API'
import bytesToString from "../utils/bytestring"
import secondsToTimeString from "../utils/timestring"
import Switch from 'react-switch'
import Moon from '../assets/icons/moon.svg'
import Sun from '../assets/icons/sun.svg'
class Settings extends Component {
constructor() {
super()
this.state = {
settings: {},
show: false
show: false,
darkTheme: false
}
this.lightThemeStyle = {}
this.darkThemeStyle = {
"--background-color": "#000",
"--popup-background": "#222",
"--popup-header": "#333",
"--box-gradient": "linear-gradient(#71caf220, #3f79ad33)",
"--status-red": "linear-gradient(#f56565aa, #c92222)",
"--status-green": "linear-gradient(#95ee85aa, #3c891c)",
"--text-color": "#fff",
"--button-color": "#111",
"--button-hover": "#181818"
}
}
componentDidMount = () => this.fetchSettings()
componentDidMount = () => {
this.fetchSettings()
let darkTheme = localStorage.getItem("darkTheme") || false
if (darkTheme === "false") darkTheme = false
if (darkTheme === "true") darkTheme = true
this.setState({ darkTheme })
console.log({darkTheme})
this.htmlEl = document.documentElement
Object.keys(this.darkThemeStyle).forEach(k => {
this.lightThemeStyle[k] = this.htmlEl.style.getPropertyValue(k)
})
if (darkTheme) {
this.switchTheme(true)
}
setTimeout(() => {
this.htmlEl.style.setProperty("display", "block")
this.htmlEl.style.setProperty("transition", "background-color .3s, color .3s")
}, 100)
}
switchTheme = checked => {
this.setState({ darkTheme: checked })
localStorage.setItem("darkTheme", checked)
console.log({checked})
if (checked) {
Object.keys(this.darkThemeStyle).forEach(k => {
const v = this.darkThemeStyle[k]
this.htmlEl.style.setProperty(k, v)
})
} else {
Object.keys(this.lightThemeStyle).forEach(k => {
const v = this.lightThemeStyle[k]
this.htmlEl.style.setProperty(k, v)
})
}
}
fetchSettings = () => {
return new Promise((resolve) => {
@ -52,7 +116,7 @@ class Settings extends Component {
}
render = () => {
const { settings, show } = this.state
const { settings, show, darkTheme } = this.state
return (
<Fragment>
@ -64,6 +128,24 @@ class Settings extends Component {
<InfosWrapper>
<h2> Settings </h2>
<p> Theme </p>
<Switch
checked={darkTheme}
onColor="#333"
offColor="#ffffff"
onHandleColor="#585858"
offHandleColor="#efcc00"
// height={28}
width={50}
handleDiameter={22}
activeBoxShadow="unset"
uncheckedIcon={false}
checkedIcon={false}
checkedHandleIcon={<IconWrapper><img src={Moon} alt="sun" height="20" width="20" /></IconWrapper>}
uncheckedHandleIcon={<IconWrapper><img src={Sun} alt="sun" height="20" width="20" /></IconWrapper>}
onChange={this.switchTheme}
/>
<p> Cache max size </p>
<p> { bytesToString(settings?.vfs?.CacheMaxSize, {}) } </p>

14
src/index.css
View File

@ -1,16 +1,26 @@
html {
--background-color: #eeeeee;
--background-color: #eee;
--popup-background: #ddd;
--popup-header: #ccc;
--primary-color: #3f79ad;
--secondary-color: #71caf2;
--primary-color-trans: #3f79ad33;
--secondary-color-trans: #71caf233;
--text-color: #000;
--box-gradient: linear-gradient(#71caf220, #3f79ad33);
--status-red: linear-gradient(#fd4444aa, #c92222);
--status-green: linear-gradient(#3bc322aa, #3c891c);
--button-color: #eee;
--button-hover: #ddd;
scroll-behavior: smooth;
display: none;
background-color: var(--background-color);
color: var(--text-color);
}
body {
@ -19,8 +29,6 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--background-color);
}
* {

15
src/styled.js
View File

@ -181,13 +181,13 @@ export const InfosWrapper = styled.div`
export const Button = styled.div`
padding: .5rem 1rem;
text-align: center;
background-color: #eee;
background-color: var(--button-color);
border-radius: .2rem;
transition: background-color .3s;
cursor: pointer;
:hover {
background-color: #ddd;
background-color: var(--button-hover);
}
`
@ -203,7 +203,7 @@ export const PopupContainer = styled.div`
width: 80vw;
left: 10vw;
height: 94vh;
background-color: #dddddd;
background-color: var(--popup-background);
padding: 1rem 2rem;
overflow-y: auto;
z-index: 999;
@ -230,7 +230,7 @@ export const PopupTitle = styled.p`
font-size: 2rem;
text-align: center;
font-weight: 600;
background-color: #cccccc;
background-color: var(--popup-header);
position: fixed;
transform: translateX(-50%);
left: 50%;
@ -253,4 +253,11 @@ export const Cross = styled.div`
@media only screen and (max-width: 800px) {
right: 5vw;
}
`
export const IconWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100%;
`