[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 6a3e243bf7c5af5ec11ab0946809d28462f4bc0d
parent 13b5f8f152a0df7c84ea159ede9d0eefe8bee8f2
Author: mcol <mcol@posteo.net>
Date:   Thu, 23 Jul 2020 00:19:33 +0100

add widgets feature

Diffstat:
Msrc/features/status_bars/index.css | 9+++++++++
Msrc/features/status_bars/index.js | 4+++-
Msrc/features/status_bars/menu.js | 16+++++++++++++++-
Asrc/features/widgets/index.css | 8++++++++
Asrc/features/widgets/index.js | 35+++++++++++++++++++++++++++++++++++
Asrc/features/widgets/slice.js | 62++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Msrc/store.js | 2++
7 files changed, 134 insertions(+), 2 deletions(-)

diff --git a/src/features/status_bars/index.css b/src/features/status_bars/index.css @@ -1,3 +1,12 @@ .status-bar { position: absolute; + overflow: hidden; + display: flex; + font-family: monospace; + justify-content: space-between; + align-items: center; +} + +.status-bar-menu button { + width: 30px; } diff --git a/src/features/status_bars/index.js b/src/features/status_bars/index.js @@ -2,6 +2,7 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { enable } from 'features/context_menus/slice'; +import Widgets from 'features/widgets'; import { selectShadowStyleCSS } from 'features/shadows/slice'; import { selectStatusBars } from './slice'; import './index.css'; @@ -16,7 +17,7 @@ export default function StatusBar() { const shadows = useSelector(selectShadowStyleCSS); return ( - ids.map((id, index) => { + ids.map(id => { if (!statusBars[id].enabled) { return null; @@ -39,6 +40,7 @@ export default function StatusBar() { style={style} onContextMenu={e => dispatch(enable({id: `status_bar_${id}`, e: e}))} > + <Widgets id={id} /> </div> ); diff --git a/src/features/status_bars/menu.js b/src/features/status_bars/menu.js @@ -1,12 +1,14 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; +import Button from 'components/button'; import Colour from 'components/colour'; import ContextMenu from 'components/context_menu'; import OptBox from 'components/optbox'; import Switch from 'components/switch'; import { selectContextMenus } from 'features/context_menus/slice'; +import { addWidget, delWidget } from 'features/widgets/slice'; import { setWidth, setHeight, @@ -39,7 +41,7 @@ export default function Menu(props) { y={state.y} > - <OptBox label={`${id} Status Bar`} width={350}> + <OptBox label={`${id} Status Bar`} className="status-bar-menu" width={350}> <div> Colour <Colour @@ -85,6 +87,18 @@ export default function Menu(props) { <Switch value={style.shadows} callback={() => toggleShadows(id)} /> </div> + <div> + Widgets + <Button text={"+"} callback={() => addWidget({ bar: id, pos: "left"})} style={{marginLeft: "8px"}}/> + <Button text={"-"} callback={() => delWidget({ bar: id, pos: "left"})} /> + ― + <Button text={"+"} callback={() => addWidget({ bar: id, pos: "centre"})} /> + <Button text={"-"} callback={() => delWidget({ bar: id, pos: "centre"})} /> + ― + <Button text={"+"} callback={() => addWidget({ bar: id, pos: "right"})} /> + <Button text={"-"} callback={() => delWidget({ bar: id, pos: "right"})} /> + </div> + </OptBox> </ContextMenu> diff --git a/src/features/widgets/index.css b/src/features/widgets/index.css @@ -0,0 +1,8 @@ +.widget-block { + display: flex; + align-items: stretch; +} + +.widget { + vertical-align: middle; +} diff --git a/src/features/widgets/index.js b/src/features/widgets/index.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; + +import { selectWidgets } from './slice'; +import './index.css'; + + +export default function Widgets(props) { + const widgets = useSelector(selectWidgets)[props.id]; + + return ( + <> + {Object.keys(widgets).map(key => { + return ( + <div className="widget-block"> + {widgets[key].map(widget => { + return ( + <div + className="widget" + style={{ + backgroundColor: widget.backgroundColor, + color: widget.color, + padding: `0 ${widget.padding}px`, + }} + > + {widget.text} + </div> + ) + })} + </div> + ) + })} + </> + ) +} diff --git a/src/features/widgets/slice.js b/src/features/widgets/slice.js @@ -0,0 +1,62 @@ +import { createSlice } from '@reduxjs/toolkit'; + + +const _widget = { padding: 10, backgroundColor: null, color: null, text: "一" }; + + +export const widgetSlice = createSlice({ + name: 'widgets', + + initialState: { + top: { + left: [ + { padding: 10, backgroundColor: null, color: null, text: "一" }, + { padding: 10, backgroundColor: null, color: null, text: "二" }, + { padding: 10, backgroundColor: null, color: null, text: "三" }, + { padding: 10, backgroundColor: null, color: null, text: "四" }, + ], + centre: [ + { padding: 10, backgroundColor: null, color: null, text: "Pretend - Longer Repose" }, + ], + right: [ + { padding: 10, backgroundColor: null, color: null, text: "22/03/2044" }, + { padding: 10, backgroundColor: null, color: null, text: "23:42" }, + ], + }, + bottom: { + left: [], + centre: [], + right: [], + }, + }, + + reducers: { + addWidget: (state, action) => { + const { bar, pos } = action.payload; + state[bar][pos].push(_widget) + }, + delWidget: (state, action) => { + const { bar, pos } = action.payload; + state[bar][pos].pop() + }, + setColor: (state, action) => { + const { bar, pos, id, color } = action.payload; + state[bar][pos][id].color = color; + }, + setBackgroundColor: (state, action) => { + const { bar, pos, id, color } = action.payload; + state[bar][pos][id].backgroundColor = color; + }, + }, +}); + +export const { + addWidget, + delWidget, + setColor, + setBackgroundColor, +} = widgetSlice.actions; + +export const selectWidgets = state => state.widgets; + +export default widgetSlice.reducer; diff --git a/src/store.js b/src/store.js @@ -13,6 +13,7 @@ import shadowReducer from 'features/shadows/slice'; import statusBarReducer from 'features/status_bars/slice'; import tabReducer from 'components/tabs/slice'; import titleBarReducer from 'features/title_bars/slice'; +import widgetReducer from 'features/widgets/slice'; import windowContentReducer from 'features/window_content/slice'; import windowReducer from 'features/windows/slice'; import { RESET } from 'features/reset/slice'; @@ -30,6 +31,7 @@ const reducer = combineReducers({ statusBars: statusBarReducer, tab: tabReducer, titleBars: titleBarReducer, + widgets: widgetReducer, windowContent: windowContentReducer, windows: windowReducer, })