Add option to 'pin' the menu to the screen as a fixed side panel #441
Conversation
static/dtale/menu/XArrayOption.jsx
Outdated
| @@ -21,35 +22,32 @@ function renderDimensionSelection(dimensionSelection) { | |||
| class ReactXArrayOption extends React.Component { | |||
| constructor(props) { | |||
| super(props); | |||
| this.buttonRef = React.createRef(); | |||
There was a problem hiding this comment.
I don't think you need this buttonRef isn't that all handled within MenuItem?
There was a problem hiding this comment.
100% right, hat's a mistake that I forgot to remove :) will get that
| @@ -17,7 +18,7 @@ class ReactThemeOption extends React.Component { | |||
| const { setTheme, theme } = this.props; | |||
| const updateTheme = newTheme => () => serverStateManagement.updateTheme(newTheme, () => setTheme(newTheme)); | |||
| return ( | |||
| <li className="hoverable" style={{ color: "#565b68" }}> | |||
| <MenuItem style={{ color: "#565b68" }} description={Descriptions.theme}> | |||
There was a problem hiding this comment.
Since I'm looking at the theme option, have you tested your changes against "Dark Mode"? I don't believe the theme really changes anything about the menu, but might want to validate nothing screwy happens.
static/dtale/DataViewer.jsx
Outdated
| @@ -219,6 +219,8 @@ class ReactDataViewer extends React.Component { | |||
| return ( | |||
| <GridEventHandler propagateState={this.propagateState} gridState={this.state}> | |||
| <DtaleHotkeys propagateState={this.propagateState} {...this.state} /> | |||
| <MenuTooltip /> | |||
There was a problem hiding this comment.
Would it work to keep the MenuTooltip within DataViewerMenu or does it need to be at the outer most level? Just curious
There was a problem hiding this comment.
It does work in DataViewerMenu, nice! That makes a lot more sense, so I'll change that. I wasn't sure if it needed to be outside the container with the overflow: scroll
static/dtale/DataViewer.jsx
Outdated
| @@ -23,6 +23,7 @@ import { ColumnMenu } from "./column/ColumnMenu"; | |||
| import { exports as gu } from "./gridUtils"; | |||
| import Descriptions from "./menu-descriptions.json"; | |||
| import { DataViewerMenu } from "./menu/DataViewerMenu"; | |||
| import { MenuTooltip } from "./menu/MenuTooltip"; | |||
There was a problem hiding this comment.
In order to fix horizontal scroll issue when the menu is pinned please add the following to this file:
- Line 243:
width={width - (this.props.menuPinned ? 198 : 3)} - Line 284:
menuPinned: PropTypes.bool, - Line 288:
({ dataId, iframe, theme, settings, menuPinned }) => ({ dataId, iframe, theme, settings, menuPinned }),
…could cause the menu to disappear
Codecov Report
@@ Coverage Diff @@
## master #441 +/- ##
==========================================
+ Coverage 91.26% 92.30% +1.03%
==========================================
Files 216 222 +6
Lines 10978 13265 +2287
Branches 1208 1215 +7
==========================================
+ Hits 10019 12244 +2225
- Misses 576 633 +57
- Partials 383 388 +5
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report at Codecov.
|
Certain workflows require frequent menu access (ex: if you are fiddling around with custom filters and need to go through a lot of trial & error to get them just right), so this is just a small QoL update to reduce clicks. It's also a nice option for new users, since it makes it easy to see all the available functionality while they're testing it out
(I'm sure I'll need to make some tweaks, I'm just getting the ball rolling)
I also haven't been able to test out the build, my circleci setup seems to be busted and I can't get any new branches to show up..hm