commit 4c0088b3c863f89ef5031bfab4117894abb64cac
parent f6868c07c07e0a0c2eef46add5d16a180ce88041
Author: mcol <mcol@posteo.net>
Date:   Thu,  4 Jun 2020 18:06:42 +0100

add image wallpaper handler

Diffstat:
M
src/features/background.js
 | 
19
++++++++++++++++---
M
src/features/windows/slice.js
 | 
30
+++++-------------------------
M
src/panels/desktop/index.js
 | 
31
+++++++++++++++++++++++++++----

3 files changed, 48 insertions(+), 32 deletions(-)
diff --git a/src/features/background.js b/src/features/background.js
@@ -1,19 +1,32 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+import { fixColour } from './helpers';
+
+
 export const backgroundSlice = createSlice({
   name: 'background',
+
   initialState: {
-    value: '#56f',
+    value: '#aaaaff',
+		wallpaper: null,
   },
+
   reducers: {
     setBackground: (state, action) => {
-      state.value = action.payload;
+			let colour = fixColour(action.payload)
+			if (colour) {
+				state.value = colour;
+			}
+    },
+    setWallpaper: (state, action) => {
+			state.wallpaper = action.payload;
     },
   },
 });
 
-export const setBackground = backgroundSlice.actions.setBackground;
+export const { setBackground, setWallpaper } = backgroundSlice.actions;
 
 export const selectBackground = state => state.background.value;
+export const selectWallpaper = state => state.background.wallpaper;
 
 export default backgroundSlice.reducer;
diff --git a/src/features/windows/slice.js b/src/features/windows/slice.js
@@ -1,33 +1,14 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+
 export const windowSlice = createSlice({
   name: 'windows',
 
 	initialState: [
-		{
-			x: 320,
-			y: 200,
-			width: 280,
-			height: 140,
-		},
-		{
-			x: 640,
-			y: 60,
-			width: 140,
-			height: 280,
-		},
-		{
-			x: 640,
-			y: 380,
-			width: 280,
-			height: 140,
-		},
-		{
-			x: 460,
-			y: 380,
-			width: 140,
-			height: 280,
-		},
+		{ x: 320, y: 200, width: 280, height: 140, },
+		{ x: 640, y:  60, width: 140, height: 280, },
+		{ x: 640, y: 380, width: 280, height: 140, },
+		{ x: 460, y: 380, width: 140, height: 280, },
 	],
 
   reducers: {
@@ -52,7 +33,6 @@ export const windowSlice = createSlice({
     },
 
     resizeWindow: (state, action) => {
-			console.log(action)
 			state[action.payload.key].width += action.payload.d.width
 			state[action.payload.key].height += action.payload.d.height
     },
diff --git a/src/panels/desktop/index.js b/src/panels/desktop/index.js
@@ -1,16 +1,39 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { selectBackground } from '../../features/background';
+
+import Windows from '../../features/windows';
+import { selectBackground, selectWallpaper } from '../../features/background';
 import './index.css';
 
 
-export function Desktop() {
+function GetWallpaper() {
+  const wallpaper = useSelector(selectWallpaper);
+
+	if (!wallpaper) {
+		return null;
+	}
+
+	return (
+		<img
+			src={URL.createObjectURL(wallpaper)}
+			style={{
+				maxWidth: "100%",
+				maxHeight: "100%",
+				objectFit: "contain",
+			}}
+			alt=""
+		/>
+	)
+}
+
+
+export default function Desktop() {
   const background = useSelector(selectBackground);
 
 	return (
 		<div id="Desktop" style={{backgroundColor:background}}>
+			<GetWallpaper />
+			<Windows />
 		</div>
 	);
 }
-
-export default Desktop;