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:
M
src/features/status_bars/index.js
 | 
2
+-
M
src/features/status_bars/menu.js
 | 
49
++++++++++++++++++++++++++++++++++++++++++++-----
M
src/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>
 		</>
 	);
 };