From 9fa543e55c3eb0311a3e7f37a72cb2ae6dd87435 Mon Sep 17 00:00:00 2001 From: Greg Solomon Date: Wed, 27 Apr 2022 16:45:49 -0400 Subject: [PATCH] Replace Popover menus with new MenuButton component --- .../src/desktop/tabs/forms/InputsPanel.js | 16 ++++++++------ .../home/widgets/roadmap/RoadmapViewItem.js | 10 ++++----- .../src/desktop/tabs/panels/BasicPanel.js | 22 ++++++++----------- .../src/desktop/tabs/panels/ToolbarPanel.js | 18 +++++++-------- 4 files changed, 31 insertions(+), 35 deletions(-) diff --git a/client-app/src/desktop/tabs/forms/InputsPanel.js b/client-app/src/desktop/tabs/forms/InputsPanel.js index 4f345a099..b8156423a 100644 --- a/client-app/src/desktop/tabs/forms/InputsPanel.js +++ b/client-app/src/desktop/tabs/forms/InputsPanel.js @@ -27,7 +27,8 @@ import {restaurants, usStates} from '../../../core/data'; import {wrapper} from '../../common'; import './InputsPanel.scss'; import {InputsPanelModel} from './InputsPanelModel'; -import {menu, menuItem, popover} from '@xh/hoist/kit/blueprint'; +import {menuItem} from '@xh/hoist/kit/blueprint'; +import {menuButton} from '@xh/hoist/desktop/cmp/contextmenu'; export const inputsPanel = hoistCmp.factory({ model: creates(InputsPanelModel), @@ -424,12 +425,13 @@ const setFocusMenu = hoistCmp.factory( menuItems = fields.map(f => { return menuItem({text: f.displayName, onClick: () => f.focus()}); }); - return popover({ - target: button({ - icon: Icon.target(), - text: 'Set Focus' - }), - content: menu(menuItems) + return menuButton({ + icon: Icon.target(), + text: 'Set Focus', + menuItems: menuItems, + popoverProps: { + minimal: false + } }); } ); \ No newline at end of file diff --git a/client-app/src/desktop/tabs/home/widgets/roadmap/RoadmapViewItem.js b/client-app/src/desktop/tabs/home/widgets/roadmap/RoadmapViewItem.js index 84d54e159..8a19097a4 100644 --- a/client-app/src/desktop/tabs/home/widgets/roadmap/RoadmapViewItem.js +++ b/client-app/src/desktop/tabs/home/widgets/roadmap/RoadmapViewItem.js @@ -8,8 +8,9 @@ import {hoistCmp, XH} from '@xh/hoist/core/index'; import {button} from '@xh/hoist/desktop/cmp/button'; import {capitalizeWords} from '@xh/hoist/format'; import {Icon} from '@xh/hoist/icon/index'; -import {menu, menuItem, popover} from '@xh/hoist/kit/blueprint'; +import {menuItem, popover} from '@xh/hoist/kit/blueprint'; import {truncate} from 'lodash'; +import {menuButton} from '@xh/hoist/desktop/cmp/contextmenu'; library.add(faGithub, faCodeMerge); @@ -104,10 +105,9 @@ function getGitIcon(gitLinks) { if (gitLinksList.length === 1) { return button({icon: gitIcon, onClick: () => window.open(gitLinksList[0])}); } else { - return popover({ - minimal: true, - target: button({icon: gitIcon}), - content: menu({items: getGitMenuItems(gitLinks)}) + return menuButton({ + icon: gitIcon, + menuItems: getGitMenuItems(gitLinks) }); } } diff --git a/client-app/src/desktop/tabs/panels/BasicPanel.js b/client-app/src/desktop/tabs/panels/BasicPanel.js index a3e0ca108..140b1e9e6 100644 --- a/client-app/src/desktop/tabs/panels/BasicPanel.js +++ b/client-app/src/desktop/tabs/panels/BasicPanel.js @@ -1,7 +1,6 @@ import React from 'react'; import {creates, hoistCmp, XH} from '@xh/hoist/core'; import {div, filler, p} from '@xh/hoist/cmp/layout'; -import {menu, menuItem, popover} from '@xh/hoist/kit/blueprint'; import {wrapper} from '../../common/Wrapper'; import {panel} from '@xh/hoist/desktop/cmp/panel'; import {select} from '@xh/hoist/desktop/cmp/input'; @@ -10,6 +9,7 @@ import {button} from '@xh/hoist/desktop/cmp/button'; import {Icon} from '@xh/hoist/icon'; import {usStates} from '../../../core/data'; import {BasicPanelModel} from './BasicPanelModel'; +import {menuButton} from '@xh/hoist/desktop/cmp/contextmenu'; export const basicPanel = hoistCmp.factory({ model: creates(BasicPanelModel), @@ -36,18 +36,14 @@ export const basicPanel = hoistCmp.factory({ height: 400, width: 700, tbar: [ - popover({ - position: 'bottom-left', - minimal: true, - target: button({ - icon: Icon.chevronDown(), - text: 'Menu Button' - }), - content: menu( - menuItem({text: 'Menu Item'}), - menuItem({text: 'Menu Item 2'}), - menuItem({text: 'Menu Item 3'}) - ) + menuButton({ + icon: Icon.chevronDown(), + text: 'Menu Button', + menuItems: [ + {text: 'Menu Item'}, + {text: 'Menu Item 2'}, + {text: 'Menu Item 3'} + ] }) ], item: div({ diff --git a/client-app/src/desktop/tabs/panels/ToolbarPanel.js b/client-app/src/desktop/tabs/panels/ToolbarPanel.js index 6a85165d4..fb2914e2d 100644 --- a/client-app/src/desktop/tabs/panels/ToolbarPanel.js +++ b/client-app/src/desktop/tabs/panels/ToolbarPanel.js @@ -5,10 +5,11 @@ import {buttonGroupInput, select, switchInput} from '@xh/hoist/desktop/cmp/input import {panel} from '@xh/hoist/desktop/cmp/panel'; import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar'; import {Icon, xhLogo} from '@xh/hoist/icon'; -import {menu, menuItem, popover} from '@xh/hoist/kit/blueprint'; +import {menuItem} from '@xh/hoist/kit/blueprint'; import {usStates} from '../../../core/data'; import {wrapper} from '../../common'; import {ToolbarPanelModel} from './ToolbarPanelModel'; +import {menuButton} from '@xh/hoist/desktop/cmp/contextmenu'; export const toolbarPanel = hoistCmp.factory({ model: creates(ToolbarPanelModel), @@ -57,18 +58,15 @@ const topBar = hoistCmp.factory( text: 'Edit', intent: 'primary' }), - popover({ - position: 'bottom-left', - minimal: true, - target: button({ - icon: Icon.chevronDown(), - text: 'Menu Button' - }), - content: menu( + menuButton({ + icon: Icon.chevronDown(), + text: 'Menu Button', + menuItems: [ menuItem({text: 'Menu Item'}), menuItem({text: 'Menu Item 2'}), menuItem({text: 'Menu Item 3'}) - ) + ] + }), filler(), switchInput({