[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 3b189801528a9662afeb402285ead74415829488
parent 2e785cdfe87e6b071c3fe721a86487ecdec03d27
Author: mcol <mcol@posteo.net>
Date:   Sun,  7 Jun 2020 12:29:14 +0100

implement window shadows feature

Diffstat:
Msrc/features/background/panel.js | 1-
Asrc/features/shadows/panel.js | 49+++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/features/shadows/slice.js | 44++++++++++++++++++++++++++++++++++++++++++++
Msrc/features/tabs/panel.js | 1-
Msrc/features/windows/index.js | 26++++++++++++++++++--------
Msrc/panels/top.js | 13++++++++++---
Msrc/store.js | 10++++++----
7 files changed, 127 insertions(+), 17 deletions(-)

diff --git a/src/features/background/panel.js b/src/features/background/panel.js @@ -22,7 +22,6 @@ export function BackgroundCtl() { <ColorPicker color={inputColour} - alpha={100} onChange={c => { setInputColour(c.color) dispatch(setBackground(inputColour)) diff --git a/src/features/shadows/panel.js b/src/features/shadows/panel.js @@ -0,0 +1,49 @@ +import React, { useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import ColorPicker from 'rc-color-picker'; +import 'rc-color-picker/assets/index.css'; + +import { + selectShadowStyle, + setHOffset, + setVOffset, + setBlur, + setColour, +} from './slice'; + + +export function ShadowCtl() { + const style = useSelector(selectShadowStyle); + const dispatch = useDispatch(); + + return ( + <div className="shadowCtl"> + + <input value={style.hOffset} type="number" + onChange={e => dispatch(setHOffset(e.target.value))} + /> + + <input value={style.vOffset} type="number" + onChange={e => dispatch(setVOffset(e.target.value))} + /> + + <input value={style.blur} type="number" + onChange={e => dispatch(setBlur(e.target.value))} + /> + + <input value={style.colour} + onChange={e => dispatch(setColour(e.target.value))} + /> + <ColorPicker + color={style.colour} + onChange={c => { + dispatch(setColour(c.color)) + }} + enableAlpha="false" + > + </ColorPicker> + + + </div> + ); +} diff --git a/src/features/shadows/slice.js b/src/features/shadows/slice.js @@ -0,0 +1,44 @@ +import { createSlice } from '@reduxjs/toolkit'; + + +export const shadowSlice = createSlice({ + name: 'shadows', + + initialState: { + hOffset: 3, + vOffset: 3, + blur: 8, + colour: '#555555', + }, + + reducers: { + setHOffset: (state, value) => { + state.hOffset = value.payload + }, + setVOffset: (state, value) => { + state.vOffset = value.payload + }, + setBlur: (state, value) => { + state.blur = value.payload + }, + setColour: (state, value) => { + state.colour = value.payload + }, + }, +}); + +export const { + setHOffset, + setVOffset, + setBlur, + setColour +} = shadowSlice.actions; + +export const selectShadowStyle = state => state.shadows; + +export const selectShadowStyleCSS = state => { + const { hOffset, vOffset, blur, colour } = state.shadows; + return `${hOffset}px ${vOffset}px ${blur}px ${colour}` +} + +export default shadowSlice.reducer; diff --git a/src/features/tabs/panel.js b/src/features/tabs/panel.js @@ -29,7 +29,6 @@ function TabList(props) { <ol className="tab-list"> {props.children.map((child, i) => { const { label } = child.props; - console.log(child) let className = 'tab-list-item'; if (props.active === i) { diff --git a/src/features/windows/index.js b/src/features/windows/index.js @@ -3,29 +3,39 @@ import { Rnd } from 'react-rnd'; import { useDispatch, useSelector } from 'react-redux'; import { selectPositions, dragWindow, resizeWindow } from './slice'; -import './index.css'; - +import { selectShadowStyleCSS } from 'features/shadows/slice'; export default function Windows() { const positions = useSelector(selectPositions); + const shadowStyle = useSelector(selectShadowStyleCSS); const dispatch = useDispatch(); return ( positions.map((position, key) => { - return ( <Rnd bounds="parent" minWidth="25" minHeight="25" - enableResizing={{ right:true, bottom:true, bottomRight:true }} - size={{ width: position.width, height: position.height }} - position={{ x: position.x, y: position.y }} - onDragStop={(e, d) => { dispatch(dragWindow({ key: key, x: d.x, y: d.y })) }} - onResizeStop={(e, dir, ref, d, pos) => { dispatch(resizeWindow({ key: key, d:d })) }} + enableResizing={{ + right:true, bottom:true, bottomRight:true + }} + size={{ + width: position.width, height: position.height + }} + position={{ + x: position.x, y: position.y + }} + onDragStop={ + (e, d) => {dispatch(dragWindow({key: key, x: d.x, y: d.y}))} + } + onResizeStop={ + (e, dir, ref, d, pos) => {dispatch(resizeWindow({key: key, d:d }))} + } id={key} className="Window" + style={{boxShadow: shadowStyle}} > </Rnd> ) diff --git a/src/panels/top.js b/src/panels/top.js @@ -3,12 +3,18 @@ import React from 'react'; import Tabs from 'features/tabs/panel'; import { BackgroundCtl, WallpaperCtl } from 'features/background/panel'; +import { ResetCtl } from 'features/reset/panel'; + +import { WindowCtl } from 'features/windows/panel'; +import { ShadowCtl } from 'features/shadows/panel'; + +import { StatusBarCtl } from 'features/status_bars/panel'; + import { LauncherCtl } from 'features/launchers/panel'; + import { NotificationCtl } from 'features/notifications/panel'; -import { WindowCtl } from 'features/windows/panel'; + import { MiscCtl } from 'features/misc/panel'; -import { StatusBarCtl } from 'features/status_bars/panel'; -import { ResetCtl } from 'features/reset/panel'; export function Top() { @@ -24,6 +30,7 @@ export function Top() { <div label="Windows"> <WindowCtl /> + <ShadowCtl /> </div> <div label="Status bars"> diff --git a/src/store.js b/src/store.js @@ -2,16 +2,18 @@ import { createStore, combineReducers } from '@reduxjs/toolkit'; import { persistStore, persistReducer } from 'redux-persist' import storage from 'redux-persist/lib/storage'; -import { RESET } from './features/reset'; -import backgroundReducer from './features/background/slice'; -import windowReducer from './features/windows/slice'; -import tabReducer from './features/tabs/slice'; +import backgroundReducer from 'features/background/slice'; +import windowReducer from 'features/windows/slice'; +import tabReducer from 'features/tabs/slice'; +import shadowReducer from 'features/shadows/slice'; +import { RESET } from 'features/reset/slice'; const reducer = combineReducers({ background: backgroundReducer, windows: windowReducer, tab: tabReducer, + shadows: shadowReducer, })