commit 04066085423f845bcf9708b5d9448e2de03bb8c4
parent ff4913e19455b2b131fdf82118cb3da86ac47f99
Author: mcol <mcol@posteo.net>
Date: Sat, 27 Jun 2020 16:30:34 +0100
add tint option to wallpaper
Diffstat:
6 files changed, 59 insertions(+), 31 deletions(-)
diff --git a/src/features/background/index.css b/src/features/background/index.css
@@ -0,0 +1,8 @@
+.wallpaper {
+ background-size: cover;
+ background-position: center center;
+ width: 100%;
+ height: 100%;
+ position:absolute;
+}
+
diff --git a/src/features/background/index.js b/src/features/background/index.js
@@ -1,19 +1,25 @@
+import React from 'react';
import { useSelector } from 'react-redux';
-import { selectWallpaper, selectBackground } from './slice';
+import { selectBackground } from './slice';
+import './index.css';
export default function Wallpaper() {
- const wallpaper = useSelector(selectWallpaper);
const background = useSelector(selectBackground);
- if (wallpaper) {
- return {
- backgroundImage: `url(${wallpaper})`
- }
- }
+ if (!background.wallpaper) {
+ return null;
+ };
- return {
- backgroundColor: background
- }
+ return (
+ <div
+ className="wallpaper"
+ style={{
+ backgroundImage: `url(${background.wallpaper})`,
+ opacity: 1 - background.tint / 100,
+ }}
+ >
+ </div>
+ );
};
diff --git a/src/features/background/panel.js b/src/features/background/panel.js
@@ -1,13 +1,20 @@
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import { setBackground, selectBackground, setWallpaper } from './slice';
+import {
+ setBackground,
+ setWallpaper,
+ removeWallpaper,
+ setTint,
+ selectBackground,
+} from './slice';
+import Button from 'components/button';
import Colour from 'components/colour';
import OptBox from 'components/optbox';
export function BackgroundCtl() {
- const backgroundColour = useSelector(selectBackground);
+ const background = useSelector(selectBackground);
const dispatch = useDispatch();
return (
@@ -15,7 +22,7 @@ export function BackgroundCtl() {
<div>
Colour
- <Colour value={backgroundColour} callback={setBackground} />
+ <Colour value={background.colour} callback={setBackground} />
</div>
<div>
@@ -34,13 +41,14 @@ export function BackgroundCtl() {
}
}}
/>
+ <Button text="Remove" callback={removeWallpaper} />
</div>
<div>
- <ul>
- <li>wallpaper saturation</li>
- <li>wallpaper tint</li>
- </ul>
+ Tint wallpaper
+ <input value={background.tint} type="number" min={0} max={100}
+ onChange={e => dispatch(setTint(e.target.value))}
+ />
</div>
</OptBox>
);
diff --git a/src/features/background/slice.js b/src/features/background/slice.js
@@ -7,24 +7,32 @@ export const backgroundSlice = createSlice({
initialState: {
colour: '#5d479d',
wallpaper: "",
+ tint: 0,
},
reducers: {
setBackground: (state, input) => {
state.colour = input.payload;
- state.wallpaper = null;
},
-
setWallpaper: (state, image) => {
state.wallpaper = image.payload;
},
+ removeWallpaper: state => {
+ state.wallpaper = null;
+ },
+ setTint: (state, input) => {
+ state.tint = input.payload;
+ },
},
});
-export const { setBackground, setWallpaper } = backgroundSlice.actions;
-
-export const selectBackground = state => state.background.colour;
+export const {
+ setBackground,
+ setWallpaper,
+ removeWallpaper,
+ setTint,
+} = backgroundSlice.actions;
-export const selectWallpaper = state => state.background.wallpaper;
+export const selectBackground = state => state.background;
export default backgroundSlice.reducer;
diff --git a/src/index.css b/src/index.css
@@ -46,11 +46,6 @@ code {
width: 200px;
}
-#Desktop {
- background-size: cover;
- background-position: center center;
-}
-
.Window {
border-style: solid;
overflow: hidden;
diff --git a/src/panels/desktop.js b/src/panels/desktop.js
@@ -1,14 +1,17 @@
import React from 'react';
+import { useSelector } from 'react-redux';
+import { selectBackground } from 'features/background/slice';
+import Wallpaper from 'features/background';
import Windows from 'features/windows';
-import Wallpaper from 'features/background/index';
export function Desktop() {
- const wallpaper = Wallpaper();
+ const background = useSelector(selectBackground);
return (
- <div id="Desktop" style={wallpaper}>
+ <div id="Desktop" style={{backgroundColor: background.colour}}>
+ <Wallpaper />
<Windows />
</div>
);