[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 2413003a121c778aa64f83605f010db05ee69f42
parent 28fc6e172d2936f465bb289d60df66214fba5078
Author: mcol <mcol@posteo.net>
Date:   Wed,  8 Jul 2020 16:25:13 +0100

move status bar panel items to context menu

Diffstat:
Msrc/features/status_bars/index.js | 2+-
Msrc/features/status_bars/menu.js | 49++++++++++++++++++++++++++++++++++++++++++++-----
Msrc/features/status_bars/panel.js | 62--------------------------------------------------------------
3 files changed, 45 insertions(+), 68 deletions(-)

diff --git a/src/features/status_bars/index.js b/src/features/status_bars/index.js @@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'; import { selectStatusBars } from './slice'; import { selectShadowStyleCSS } from 'features/shadows/slice'; import ContextMenu from 'components/menu'; -import { Menu } from './menu'; +import Menu from './menu'; import './index.css'; export default function StatusBar() { diff --git a/src/features/status_bars/menu.js b/src/features/status_bars/menu.js @@ -2,8 +2,14 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { + setWidth, + setHeight, + setXOffset, + setYOffset, setColour, setTextColour, + setCornerRadius, + toggleShadows, selectStatusBars, } from './slice'; import Colour from 'components/colour'; @@ -11,19 +17,52 @@ import OptBox from 'components/optbox'; import Switch from 'components/switch'; -export function Menu() { - const statusBars = useSelector(selectStatusBars); +export default function Menu() { + const style = useSelector(selectStatusBars); const dispatch = useDispatch(); return ( <div> - <OptBox width={190}> + <OptBox width={330}> <div> Colour - <Colour value={statusBars.backgroundColor} callback={setColour} /> + <Colour value={style.backgroundColor} callback={setColour} /> Text - <Colour value={statusBars.color} callback={setTextColour} /> + <Colour value={style.color} callback={setTextColour} /> </div> + + <div> + Width + <input value={style.width} type="number" min="0" + onChange={e => dispatch(setWidth(e.target.value))} + /> + Height + <input value={style.height} type="number" min="0" + onChange={e => dispatch(setHeight(e.target.value))} + /> + </div> + + <div> + X offset + <input value={style.xOffset} type="number" + onChange={e => dispatch(setXOffset(e.target.value))} + /> + Y offset + <input value={style.yOffset} type="number" + onChange={e => dispatch(setYOffset(e.target.value))} + /> + </div> + + <div> + Corner radius + <input value={style.cornerRadius} type="number" min="0" + onChange={e => dispatch(setCornerRadius(e.target.value))} + /> + + Shadows + <Switch value={style.shadows} callback={toggleShadows} /> + </div> + </OptBox> </div> ); diff --git a/src/features/status_bars/panel.js b/src/features/status_bars/panel.js @@ -3,20 +3,10 @@ import { useDispatch, useSelector } from 'react-redux'; import { setPosition, - setWidth, - setHeight, - setColour, - setTextColour, - setXOffset, - setYOffset, - setCornerRadius, - toggleShadows, selectStatusBars, } from './slice'; -import Colour from 'components/colour'; import OptBox from 'components/optbox'; import Option from 'components/option'; -import Switch from 'components/switch'; export function StatusBarCtl() { @@ -40,58 +30,6 @@ export function StatusBarCtl() { </OptBox> - <OptBox className="StatusBarCtl" label="Top Geometry" width={190}> - - <div> - Width - <input value={style.width} type="number" min="0" - onChange={e => dispatch(setWidth(e.target.value))} - /> - </div> - - <div> - Height - <input value={style.height} type="number" min="0" - onChange={e => dispatch(setHeight(e.target.value))} - /> - </div> - - <div> - X offset - <input value={style.xOffset} type="number" - onChange={e => dispatch(setXOffset(e.target.value))} - /> - </div> - - <div> - Y offset - <input value={style.yOffset} type="number" - onChange={e => dispatch(setYOffset(e.target.value))} - /> - </div> - - </OptBox> - - <OptBox className="StatusBarCtl" label="Status bar" width={360}> - - <div> - Colour - <Colour value={style.backgroundColor} callback={setColour} /> - Text - <Colour value={style.color} callback={setTextColour} /> - </div> - - <div> - Corner radius - <input value={style.cornerRadius} type="number" min="0" - onChange={e => dispatch(setCornerRadius(e.target.value))} - /> - - Shadows - <Switch value={style.shadows} callback={toggleShadows} /> - </div> - - </OptBox> </> ); };