Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React grid layout #3575

Merged
merged 12 commits into from Mar 8, 2017
Merged

React grid layout #3575

merged 12 commits into from Mar 8, 2017

Conversation

@edmundoa
Copy link
Member

@edmundoa edmundoa commented Mar 6, 2017

This PR replaces gridster.js with React-Grid-Layout.

The main advantage is that React-Grid-Layout works more smoothly, with less surprises, and lets us do nicer things than gridster.js, like having responsive dashboards or fitting the widgets properly on the screen. In the development front, React-Grid-Layout is much easier to understand, and it integrates better with React and our current application.

This PR takes care of implementing all current functionalities using React-Grid-Layout. As a new addition, I made the number of columns available variable, and depending on the user's screen size. This will allow users with large screens to fit more widgets into the dashboard, while still being able to see them when using a smaller device.

edmundoa added 12 commits Feb 28, 2017
- Use move cursor when hovering over widgets that can be dragged
- Change target color to blue, like we had before
This allows us to adjust the number of columns displayed in the
dashboard using the screen width.

When dashboards are created on large screens, react-grid-layout will
take care of displaying out of bound widgets somewhere visible.
Use some CSS trickery and the `draggableHandle` property to avoid
re-rendering all widgets when the dashboard lock status changes.
See: react-grid-layout/react-grid-layout#371
- We use jQuery to listen to those events to ensure all widget elements
are being called to handle the event
- Also throttle those events, to avoid redrawing the widgets too often
@edmundoa edmundoa added this to the 2.3.0 milestone Mar 6, 2017
@dennisoelkers dennisoelkers self-assigned this Mar 6, 2017
@STRML
Copy link

@STRML STRML commented Mar 6, 2017

Excellent! I am happy to help if there are questions, bug reports, or feature requests in the future for RGL. Glad to see it in Graylog!

Copy link
Member

@dennisoelkers dennisoelkers left a comment

LGTM! Thank you for this!

@dennisoelkers dennisoelkers merged commit 34f150b into master Mar 8, 2017
4 checks passed
4 checks passed
@garybot2
ci-web-linter Jenkins build graylog-pr-linter-check 1414 has succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
licence/cla Contributor License Agreement is signed.
Details
@dennisoelkers dennisoelkers deleted the react-grid-layout branch Mar 8, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants