[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 1fe684be362c1827f9ee9ee68dd6a45ac82afeab
parent 27a6b0f83b7b3106a0532cdbdb4c347b77a08d07
Author: mcol <mcol@posteo.net>
Date:   Wed,  8 Jul 2020 15:32:25 +0100

use window content to style context menus

Diffstat:
Msrc/components/menu/index.js | 8++++----
Msrc/components/optbox/index.js | 2+-
Msrc/features/status_bars/menu.js | 24++++++++++++++----------
3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/menu/index.js b/src/components/menu/index.js @@ -1,12 +1,12 @@ import React, { useState } from 'react'; import { useSelector } from 'react-redux'; -import { selectWindowContent } from 'features/window_content/slice'; +import { selectWindowContentCSS } from 'features/window_content/slice'; import './index.css'; export default function ContextMenu(props) { - const windowContent = useSelector(selectWindowContent); + const style = useSelector(selectWindowContentCSS); const [state, toggle] = useState({enabled: false, x: 0, y:0}); const enable = (e) => { @@ -25,12 +25,12 @@ export default function ContextMenu(props) { return ( <div className="context-menu" - style={{left: state.x, top: state.y}} + style={{left: state.x, top: state.y, ...style}} > <props.menu/> <button onClick={() => toggle({enabled: false, x: 0, y: 0})} - style={{color: windowContent.textColour}} + style={{color: style.color}} > Hide </button> diff --git a/src/components/optbox/index.js b/src/components/optbox/index.js @@ -11,7 +11,7 @@ export default function OptBox(props) { return ( <div className={`optbox ${props.className}`} - style={{width: props.width, color:windowContent.textColour}} + style={{width: props.width, color: windowContent.textColour}} > <h3>{props.label}</h3> {props.children} diff --git a/src/features/status_bars/menu.js b/src/features/status_bars/menu.js @@ -1,5 +1,5 @@ import React from 'react'; -import { useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { setColour, @@ -8,19 +8,23 @@ import { } from './slice'; import Colour from 'components/colour'; import OptBox from 'components/optbox'; +import Switch from 'components/switch'; export function Menu() { - const style = useSelector(selectStatusBars); + const statusBars = useSelector(selectStatusBars); + const dispatch = useDispatch(); return ( - <OptBox width={190}> - <div> - Colour - <Colour value={style.backgroundColor} callback={setColour} /> - Text - <Colour value={style.color} callback={setTextColour} /> - </div> - </OptBox> + <div> + <OptBox width={190}> + <div> + Colour + <Colour value={statusBars.backgroundColor} callback={setColour} /> + Text + <Colour value={statusBars.color} callback={setTextColour} /> + </div> + </OptBox> + </div> ); };