[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 04066085423f845bcf9708b5d9448e2de03bb8c4
parent ff4913e19455b2b131fdf82118cb3da86ac47f99
Author: mcol <mcol@posteo.net>
Date:   Sat, 27 Jun 2020 16:30:34 +0100

add tint option to wallpaper

Diffstat:
Asrc/features/background/index.css | 8++++++++
Msrc/features/background/index.js | 26++++++++++++++++----------
Msrc/features/background/panel.js | 22+++++++++++++++-------
Msrc/features/background/slice.js | 20++++++++++++++------
Msrc/index.css | 5-----
Msrc/panels/desktop.js | 9++++++---
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> );