Improve dashboards drag-n-drop and resizing experience, make them more responsive (#16255)
* Basic `react-gird-layout` usage for Dashboards (#16167) * Install react-grid-layout * Add basic NewGridLayout implementation * Wrap DashboardGrid with WidthProvider * Bind DashboardGrid's onDrag methods * Coerce layout item IDs to string * Add method rendering NewDashboardGrid * Refactor `onLayoutChange` method to handle new grid * Use react-grid-layout's CSS classes * Fix lag while dragging grid items * Switch back to ExplicitSize HOC * Fix grid in editing state is too short * Import missing `react-grid-layout` CSS * Fix RGL overwrites dragging placeholder color * Hide default RGL's resize handle * Fix random dashboard layout rearrangements Before dashboard cards' parameters (x, y, width, height) were updated individually for each card It worked fine because there was only one card moving at a time Now when cards are automatically moving when a user drags another card, a race conditon appears, cards' parameters get overwritten, and layout breaks Fixed by using bulk updates for dashboard cards drag and resizing events * Fix dashboard background grid * Align RGL with parent component edges * Fix grid offset * Fix dashboard grid height * Fix no automatic page scroll while dragging * Fix navbar is stuck when scrolling dashboard * Remove previous grid component * Fix grid doesn't respect item min size * Extract grid background into a separate utils file * Fix dashboards layout issues (#16236) * Fix RGL cards are higher than the previous ones * Return the fixed header in editing mode back * Add support for responsive dashboard layouts (#16213) * Fix `gridItemWidth` calculation * Memoize grid children * Add utility to adapt layout for breakpoints * Use responsive react-grid-layout for dashboards * Don't overwrite main layout with smaller ones * Pass correct `isMobile` prop to DashCard component * Extract `renderGridItem` method * Increase dashboard cards vertical margin for mobile * Remove dashboard's old renderMobile method * Add isMobileBreakpoint utility function * Disable dashboard drag and resize for mobile * Remove old method disabling mobile drag and resize * Fix grid background rendering * Switch to desktop and mobile breakpoints * Update card heights for dashboard's mobile view * Add a comment about `!important` in CSS * Minor code style fix * Remove not used functions
Showing
- frontend/src/metabase/css/dashboard.css 14 additions, 22 deletionsfrontend/src/metabase/css/dashboard.css
- frontend/src/metabase/dashboard/components/DashboardGrid.jsx 89 additions, 103 deletionsfrontend/src/metabase/dashboard/components/DashboardGrid.jsx
- frontend/src/metabase/dashboard/components/grid/GridItem.jsx 0 additions, 112 deletionsfrontend/src/metabase/dashboard/components/grid/GridItem.jsx
- frontend/src/metabase/dashboard/components/grid/GridLayout.jsx 130 additions, 285 deletions...end/src/metabase/dashboard/components/grid/GridLayout.jsx
- frontend/src/metabase/dashboard/components/grid/utils.js 50 additions, 0 deletionsfrontend/src/metabase/dashboard/components/grid/utils.js
- frontend/src/metabase/dashboard/dashboard.js 18 additions, 0 deletionsfrontend/src/metabase/dashboard/dashboard.js
- frontend/src/metabase/lib/dashboard_grid.js 13 additions, 2 deletionsfrontend/src/metabase/lib/dashboard_grid.js
- package.json 1 addition, 0 deletionspackage.json
- yarn.lock 26 additions, 2 deletionsyarn.lock
Loading
Please register or sign in to comment