[FEATURE] Panels can be viewed in full screen #1991
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Gladorme
force-pushed
the
gladorme/panel-full-screen
branch
from
68222f9
to
2b64cbe
Compare
There was a problem hiding this comment.
That's really amazing! I love this new feature and the way you implemented it.
I totally don't understand the zustand part and I guess it's been a nightmare to implement but you seem to not introduce new notion. Just subscribing yourself in the current implementation.
Congrats!
ui/dashboards/src/context/DashboardProvider/view-panel-slice.ts
Outdated
Show resolved
Hide resolved
|
Little last comment, you could make the icon reversed when we're in full size and want to reduce back to normal. |
Signed-off-by: Guillaume LADORME <Gladorme@users.noreply.github.com>
Signed-off-by: Guillaume LADORME <Gladorme@users.noreply.github.com>
Signed-off-by: Guillaume LADORME <Gladorme@users.noreply.github.com>
Signed-off-by: Guillaume LADORME <Gladorme@users.noreply.github.com>
Gladorme
force-pushed
the
gladorme/panel-full-screen
branch
from
b84824e
to
cdf2705
Compare
Signed-off-by: Guillaume LADORME <Gladorme@users.noreply.github.com>
Gladorme
force-pushed
the
gladorme/panel-full-screen
branch
from
cdf2705
to
1dee916
Compare
| @@ -26,16 +27,20 @@ export type DashboardProps = BoxProps & { | |||
| emptyDashboardProps?: EmptyDashboardProps; | |||
| panelOptions?: PanelOptions; | |||
| }; | |||
| const HEADER_HEIGHT = 165; // Approximate height of the header in dashboard view (including the navbar and variables toolbar) | |||
There was a problem hiding this comment.
Is this working if user zoom in the browser ? 馃槃
There was a problem hiding this comment.
Well it's an approximate height for desktop screen, this value is here only while the ref is not loaded. I think I can set it to 0 馃
| import { StringParam, useQueryParam } from 'use-query-params'; | ||
| import { DashboardProvider, DashboardProviderProps } from './DashboardProvider'; | ||
|
|
||
| export function DashboardProviderWithQueryParams({ children, initialState }: DashboardProviderProps) { |
celian-garcia
approved these changes
May 16, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Add a panel action to show a panel "full-screen", it will still show nav + dashboard header (variables, ...)
Removing footer on dashboard view (better for full screen panel visualization) 馃檲
Screenshots
Dashboard with no panel showed:
Dashboard with a panel showed:
Checklist
[<catalog_entry>] <commit message>naming convention using one of thefollowing
catalog_entryvalues:FEATURE,ENHANCEMENT,BUGFIX,BREAKINGCHANGE,DOC,IGNORE.UI Changes
See Storybook
and e2e docs for more details. Common issues
include: