[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 e4345be0c7b57f73cf2eb59ff060af0566519b6c
parent c984b8e4d308983ee425ea8bbfa3c622e393f6c3
Author: mcol <mcol@posteo.net>
Date:   Thu,  9 Jul 2020 22:56:38 +0100

implement dragging on context menus

Diffstat:
Msrc/components/context_menu/index.js | 36++++++++++++++++++++----------------
Msrc/features/context_menus/slice.js | 6++++++
2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/components/context_menu/index.js b/src/components/context_menu/index.js @@ -1,7 +1,8 @@ import React from 'react'; +import { Rnd } from 'react-rnd'; import { useDispatch, useSelector } from 'react-redux'; -import { disable } from 'features/context_menus/slice'; +import { disable, dragMenu } from 'features/context_menus/slice'; import { selectWindowContentCSS } from 'features/window_content/slice'; import { selectShadowStyleCSS } from 'features/shadows/slice'; import { selectBorderStyle } from 'features/borders/slice'; @@ -11,34 +12,37 @@ import './index.css'; export default function ContextMenu(props) { const dispatch = useDispatch(); const windowContextStyle = useSelector(selectWindowContentCSS); - const borderStyle = useSelector(selectBorderStyle); - const shadowStyle = useSelector(selectShadowStyleCSS); const style = { - left: props.x, ...windowContextStyle, - ...borderStyle, - ...shadowStyle, - }; - - if (props.position === "above") { - style.bottom = window.innerHeight - props.y; - } else { - style.top = props.y; + ...useSelector(selectBorderStyle), + ...useSelector(selectShadowStyleCSS), }; return ( - <div + <Rnd + bounds="parent" className="context-menu" style={style} + enableResizing={false} + position={{ + x: props.x, + y: props.y, + }} + onDragStop={ + (e, d) => {dispatch(dragMenu({id: props.id, x: d.x, y: d.y}))} + } > - {props.children} + + {props.children} + <button onClick={() => dispatch(disable(props.id))} style={{color: windowContextStyle.color}} > - Hide + Hide </button> - </div> + + </Rnd> ); } diff --git a/src/features/context_menus/slice.js b/src/features/context_menus/slice.js @@ -26,12 +26,18 @@ export const contextMenuSlice = createSlice({ state[action.payload].enabled = false; }, + dragMenu: (state, action) => { + state[action.payload.id].x = action.payload.x; + state[action.payload.id].y = action.payload.y; + }, + }, }); export const { enable, disable, + dragMenu, } = contextMenuSlice.actions; export const selectContextMenus = state => state.contextMenus;