Skip to content
Snippets Groups Projects
Unverified Commit dfca7086 authored by Anton Kulyk's avatar Anton Kulyk Committed by GitHub
Browse files

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
parent 4415a111
No related branches found
No related tags found
No related merge requests found
Loading
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment