[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 2d3fbe3362d4f16f2a2a3bb724a5f52a895ef70f
parent 2da1d739ef45f901aac550d6a8936e4c5570e953
Author: mcol <mcol@posteo.net>
Date:   Thu, 23 Jul 2020 23:40:50 +0100

implement widget context menu for fine-tuning of state

Diffstat:
Msrc/features/context_menus/index.js | 2++
Msrc/features/context_menus/slice.js | 6++++--
Msrc/features/widgets/index.css | 4+++-
Msrc/features/widgets/index.js | 13++++++++++---
Asrc/features/widgets/menu.js | 73+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Msrc/features/widgets/slice.js | 22+++++++++++-----------
6 files changed, 103 insertions(+), 17 deletions(-)

diff --git a/src/features/context_menus/index.js b/src/features/context_menus/index.js @@ -3,6 +3,7 @@ import React from 'react'; import BackgroundMenu from 'features/background/menu'; import StatusBarMenu from 'features/status_bars/menu'; import TitleBarMenu from 'features/title_bars/menu'; +import WidgetMenu from 'features/widgets/menu'; export default function ContextMenus() { @@ -13,6 +14,7 @@ export default function ContextMenus() { <StatusBarMenu id="top" /> <StatusBarMenu id="bottom" /> <TitleBarMenu /> + <WidgetMenu /> </> ); diff --git a/src/features/context_menus/slice.js b/src/features/context_menus/slice.js @@ -9,18 +9,20 @@ export const contextMenuSlice = createSlice({ status_bar_bottom: {enabled: false, x: 0, y: 0}, title_bar: {enabled: false, x: 0, y: 0}, background: {enabled: false, x: 0, y: 0}, + widget: {enabled: false, x: 0, y: 0}, }, reducers: { enable: (state, action) => { - const e = action.payload.e; + const { id, e, details } = action.payload; e.preventDefault(); - state[action.payload.id] = { + state[id] = { enabled: true, x: e.clientX, y: e.clientY, }; e.stopPropagation(); + if (details) state[id].details = details; }, disable: (state, action) => { state[action.payload].enabled = false; diff --git a/src/features/widgets/index.css b/src/features/widgets/index.css @@ -1,8 +1,10 @@ .widget-block { display: flex; align-items: stretch; + height: 100%; } .widget { - vertical-align: middle; + display: flex; + align-items: center; } diff --git a/src/features/widgets/index.js b/src/features/widgets/index.js @@ -1,22 +1,29 @@ import React from 'react'; -import { useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; +import { enable } from 'features/context_menus/slice'; import { selectWidgets } from './slice'; import './index.css'; export default function Widgets(props) { + const dispatch = useDispatch(); const widgets = useSelector(selectWidgets)[props.id]; return ( <> - {Object.keys(widgets).map(key => { + {Object.keys(widgets).map(pos => { return ( <div className="widget-block"> - {widgets[key].map(widget => { + {widgets[pos].map((widget, id) => { return ( <div className="widget" + onContextMenu={ + e => dispatch( + enable({id: "widget", e: e, details: {bar: props.id, pos: pos, id: id}}) + ) + } style={{ backgroundColor: widget.backgroundColor, color: widget.color, diff --git a/src/features/widgets/menu.js b/src/features/widgets/menu.js @@ -0,0 +1,73 @@ +import React from 'react'; +import { useDispatch, useSelector } from 'react-redux'; + +import Colour from 'components/colour'; +import ContextMenu from 'components/context_menu'; +import OptBox from 'components/optbox'; + +import { selectContextMenus } from 'features/context_menus/slice'; +import { + setColor, + setBackgroundColor, + setContent, + setPadding, + selectWidgets , +} from './slice'; + + +export default function Menu(props) { + const dispatch = useDispatch(); + const { enabled, x, y, details } = useSelector(selectContextMenus)["widget"]; + const widgets = useSelector(selectWidgets); + + if (!enabled) { + return null; + } + + const { bar, pos, id } = details; + const style = widgets[bar][pos][id]; + + return ( + <ContextMenu + id="widget" + position="below" + x={x} + y={y} + > + + <OptBox label="widget"> + <div> + Colour + <Colour + value={style.color} + callback={color => setColor({...details, color: color})} + /> + </div> + + <div> + Background + <Colour + value={style.backgroundColor} + callback={color => setBackgroundColor({...details, color: color})} + /> + </div> + + <div> + Content + <input value={style.content} type="string" + onChange={e => dispatch(setContent({...details, value: e.target.value}))} + /> + </div> + + <div> + Padding + <input value={style.padding} type="number" min="0" + onChange={e => dispatch(setPadding({...details, value: e.target.value}))} + /> + </div> + + </OptBox> + + </ContextMenu> + ); +}; diff --git a/src/features/widgets/slice.js b/src/features/widgets/slice.js @@ -10,17 +10,17 @@ export const widgetSlice = createSlice({ initialState: { top: { left: [ - { padding: 10, backgroundColor: null, color: null, content: "一" }, - { padding: 10, backgroundColor: null, color: null, content: "二" }, - { padding: 10, backgroundColor: null, color: null, content: "三" }, - { padding: 10, backgroundColor: null, color: null, content: "四" }, + { padding: 10, backgroundColor: "inherit", color: "inherit", content: "一" }, + { padding: 10, backgroundColor: "inherit", color: "inherit", content: "二" }, + { padding: 10, backgroundColor: "inherit", color: "inherit", content: "三" }, + { padding: 10, backgroundColor: "inherit", color: "inherit", content: "四" }, ], centre: [ - { padding: 10, backgroundColor: null, color: null, content: "Pretend - Longer Repose" }, + { padding: 10, backgroundColor: "inherit", color: "inherit", content: "Pretend - Longer Repose" }, ], right: [ - { padding: 10, backgroundColor: null, color: null, content: "22/03/2044" }, - { padding: 10, backgroundColor: null, color: null, content: "23:42" }, + { padding: 10, backgroundColor: "inherit", color: "inherit", content: "22/03/2044" }, + { padding: 10, backgroundColor: "inherit", color: "inherit", content: "23:42" }, ], }, bottom: { @@ -56,12 +56,12 @@ export const widgetSlice = createSlice({ state[bar][pos][id].backgroundColor = color; }, setContent: (state, action) => { - const { bar, pos, id, content } = action.payload; - state[bar][pos][id].content = content; + const { bar, pos, id, value } = action.payload; + state[bar][pos][id].content = value; }, setPadding: (state, action) => { - const { bar, pos, id, padding } = action.payload; - state[bar][pos][id].padding = padding; + const { bar, pos, id, value } = action.payload; + state[bar][pos][id].padding = value; }, }, });