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
Showing widget placeholders allowing inline widget creation. #14331
Conversation
6c6ca8d
to
496f3c6
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Works really well!
}), [creators, position, view]); | ||
|
||
return ( | ||
<Modal title={modalTitle} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
}; | ||
|
||
return ( | ||
<CreateWidgetButton type="button" onClick={onClick}><HugeIcon><WidgetIcon /></HugeIcon>{title}</CreateWidgetButton> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be nice to display a title for each button like "Create message count widget"
display: flex; | ||
flex-wrap: wrap; | ||
justify-content: space-evenly; | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's add a gap
here to ensure there is always a gap between each widget tile.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const PlaceholderBox = styled.div(({ theme }) => css` | ||
opacity: 0; | ||
transition: visibility 0s, opacity 0.2s linear; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's add cursor: pointer
to this element, just to make it even more clear that you can click everywhere and not only on the icon.
967dd22
to
6cdfb17
Compare
56cff62
to
79a00f0
Compare
79a00f0
to
bde2f13
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Works like a charm!
Description
Motivation and Context
This PR is adding a feature that adds widget placeholders in empty slots on the widget grid, allowing the user to create widgets in these spots. This removes the need for the user to create a widget and then move it to the desired spot.
/jenkins-pr-deps Graylog2/graylog-plugin-enterprise#4510
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Checklist: