commit 4c0088b3c863f89ef5031bfab4117894abb64cac
parent f6868c07c07e0a0c2eef46add5d16a180ce88041
Author: mcol <mcol@posteo.net>
Date: Thu, 4 Jun 2020 18:06:42 +0100
add image wallpaper handler
Diffstat:
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;