[Work in progress] A Reactjs-based web app to help with ricing: designing beautiful unix desktop environments.
git clone https://mcol.xyz/code/unix.sexy
Log | Files | Refs

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

add image wallpaper handler

Diffstat:
Msrc/features/background.js | 19++++++++++++++++---
Msrc/features/windows/slice.js | 30+++++-------------------------
Msrc/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;