[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 39d29c863315f9cee41d9cbc64efe82615d850d6
parent fb0352af54c93c0799cb04e93428ff387796bd88
Author: mcol <mcol@posteo.net>
Date:   Thu, 25 Jun 2020 00:41:03 +0100

add window content feature

Diffstat:
Asrc/features/window_content/panel.js | 85+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/features/window_content/slice.js | 59+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Msrc/features/windows/index.js | 10++++++++++
Msrc/index.css | 6++++++
Msrc/panels/top.js | 2++
Msrc/store.js | 2++
6 files changed, 164 insertions(+), 0 deletions(-)

diff --git a/src/features/window_content/panel.js b/src/features/window_content/panel.js @@ -0,0 +1,85 @@ +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 { + setColour, + toggleText, + setTextColour, + setPadding, selectWindowContent +} from './slice'; +import OptBox from 'features/optbox'; +import Switch from 'features/switch'; + + +export function WindowContentCtl() { + const dispatch = useDispatch(); + const windowContent = useSelector(selectWindowContent); + const [colour, setInputColour] = useState(windowContent.colour); + const [textColour, setInputTextColour] = useState(windowContent.textColour); + + return ( + <OptBox className="WindowContentCtl" label="Window Content"> + + <div className="opt"> + Colour + <input + value={colour} + onChange={e => setInputColour(e.target.value)} + /> + + <ColorPicker + color={colour} + onChange={c => { + setInputColour(c.color) + dispatch(setColour(colour)) + }} + > + </ColorPicker> + + <button onClick={() => dispatch(setColour(colour))}> + Set + </button> + </div> + + <div className="opt"> + Text + <Switch + onClick={() => dispatch(toggleText())} + value={windowContent.text} + /> + </div> + + <div className="opt"> + Text colour + <input + value={textColour} + onChange={e => setInputTextColour(e.target.value)} + /> + + <ColorPicker + color={textColour} + onChange={c => { + setInputTextColour(c.color) + dispatch(setTextColour(textColour)) + }} + enableAlpha="false" + > + </ColorPicker> + + <button onClick={() => dispatch(setTextColour(textColour))}> + Set + </button> + </div> + + <div className="opt"> + Padding + <input value={windowContent.padding} type="number" min="0" + onChange={e => dispatch(setPadding(e.target.value))} + /> + </div> + + </OptBox> + ); +} diff --git a/src/features/window_content/slice.js b/src/features/window_content/slice.js @@ -0,0 +1,59 @@ +import { createSlice } from '@reduxjs/toolkit'; + +import { fixColour } from 'features/helpers'; + + +export const windowContentSlice = createSlice({ + name: 'windowContent', + + initialState: { + colour: "#ccc", + text: true, + textColour: "#777", + padding: 5, + }, + + reducers: { + setColour: (state, input) => { + let colour = fixColour(input.payload) + if (colour) { + state.colour = colour; + } + }, + + toggleText: state => { + state.text = !state.text; + }, + + setTextColour: (state, input) => { + let colour = fixColour(input.payload) + if (colour) { + state.textColour = colour; + } + }, + + setPadding: (state, value) => { + state.padding = value.payload + }, + }, +}); + +export const { + setColour, + toggleText, + setTextColour, + setPadding +} = windowContentSlice.actions; + +export const selectWindowContent = state => state.windowContent; + +export const selectWindowContentCSS = state => { + const { colour, textColour, padding } = state.windowContent; + return { + backgroundColor: colour, + color: textColour, + padding: `${padding}px` + } +} + +export default windowContentSlice.reducer; diff --git a/src/features/windows/index.js b/src/features/windows/index.js @@ -3,6 +3,7 @@ import { Rnd } from 'react-rnd'; import { useDispatch, useSelector } from 'react-redux'; import { selectPositions, dragWindow, resizeWindow } from './slice'; +import { selectWindowContent, selectWindowContentCSS } from 'features/window_content/slice'; import { selectShadowStyleCSS } from 'features/shadows/slice'; import { selectBorderStyle } from 'features/borders/slice'; @@ -10,6 +11,8 @@ import { selectBorderStyle } from 'features/borders/slice'; export default function Windows() { const dispatch = useDispatch(); const positions = useSelector(selectPositions); + const windowContent = useSelector(selectWindowContent); + const windowContentStyle = useSelector(selectWindowContentCSS); const shadowStyle = useSelector(selectShadowStyleCSS); const borderStyle = useSelector(selectBorderStyle); @@ -41,6 +44,13 @@ export default function Windows() { className="Window" style={style} > + + {windowContent.text && + <div className="window-content" style={windowContentStyle}> + sample text here + </div> + } + </Rnd> ) }) diff --git a/src/index.css b/src/index.css @@ -49,3 +49,9 @@ code { .Window { border-style: solid; } + +.window-content { + font-size: 40%; + width: 100%; + height: 100%; +} diff --git a/src/panels/top.js b/src/panels/top.js @@ -6,6 +6,7 @@ import { BackgroundCtl } from 'features/background/panel'; import { ResetCtl } from 'features/reset/panel'; import { WindowCtl } from 'features/windows/panel'; +import { WindowContentCtl } from 'features/window_content/panel'; import { ShadowCtl } from 'features/shadows/panel'; import { BorderCtl } from 'features/borders/panel'; @@ -30,6 +31,7 @@ export function Top() { <div label="Windows"> <WindowCtl /> + <WindowContentCtl /> <ShadowCtl /> <BorderCtl /> </div> diff --git a/src/store.js b/src/store.js @@ -4,6 +4,7 @@ import storage from 'redux-persist/lib/storage'; import backgroundReducer from 'features/background/slice'; import windowReducer from 'features/windows/slice'; +import windowContentReducer from 'features/window_content/slice'; import tabReducer from 'features/tabs/slice'; import shadowReducer from 'features/shadows/slice'; import borderReducer from 'features/borders/slice'; @@ -13,6 +14,7 @@ import { RESET } from 'features/reset/slice'; const reducer = combineReducers({ background: backgroundReducer, windows: windowReducer, + windowContent: windowContentReducer, tab: tabReducer, shadows: shadowReducer, borders: borderReducer,