From edc213d22902e9676231119522563fa338c62793 Mon Sep 17 00:00:00 2001 From: Rafal Date: Sat, 11 Nov 2023 19:47:25 +0100 Subject: [PATCH] fix(ui): Issues with overlapping content in the app details view on smaller screens (#16268) Signed-off-by: Rafal Pelczar --- .../application-details.scss | 28 +- .../application-details.tsx | 304 +++++++++--------- .../app/shared/components/layout/layout.tsx | 25 +- ui/src/app/shared/components/page/page.scss | 4 +- 4 files changed, 184 insertions(+), 177 deletions(-) diff --git a/ui/src/app/applications/components/application-details/application-details.scss b/ui/src/app/applications/components/application-details/application-details.scss index af1ca3e9d07dc..82402ffd0d8b4 100644 --- a/ui/src/app/applications/components/application-details/application-details.scss +++ b/ui/src/app/applications/components/application-details/application-details.scss @@ -8,16 +8,16 @@ $header: 120px; .application-details { height: 100vh; width: 100%; - &__status-panel { - position: fixed; - left: $sidebar-width; - right: 0; - z-index: 3; - @media screen and (max-width: map-get($breakpoints, xlarge)) { - top: 150px; - } - @media screen and (max-width: map-get($breakpoints, large)) { - top: 146px; + + &__wrapper { + display: flex; + flex-direction: column; + height: calc(100vh - 2 * $top-bar-height); + overflow: hidden; + + @media screen and (max-width: map-get($breakpoints, xxlarge)) { + height: calc(100vh - 3 * $top-bar-height); + margin-top: $top-bar-height; } } @@ -27,13 +27,11 @@ $header: 120px; &__tree { padding: 1em; + + flex: 1; overflow-x: auto; overflow-y: auto; - margin-top: 150px; - height: calc(100vh - 2 * 70px - 115px); - @media screen and (max-width: map-get($breakpoints, xlarge)) { - margin-top: 165px; - } + overscroll-behavior-x: none; } &__sliding-panel-pagination-wrap { diff --git a/ui/src/app/applications/components/application-details/application-details.tsx b/ui/src/app/applications/components/application-details/application-details.tsx index 3f12660fb0191..9b0a13f638c7b 100644 --- a/ui/src/app/applications/components/application-details/application-details.tsx +++ b/ui/src/app/applications/components/application-details/application-details.tsx @@ -416,125 +416,20 @@ export class ApplicationDetails extends React.Component ) }}> -
- this.selectNode(appFullName, 0, 'diff')} - showOperation={() => this.setOperationStatusVisible(true)} - showConditions={() => this.setConditionsStatusVisible(true)} - showMetadataInfo={revision => this.setState({...this.state, revision})} - /> -
-
- {refreshing &&

Refreshing

} - {((pref.view === 'tree' || pref.view === 'network') && ( - <> - services.viewPreferences.getPreferences()}> - {viewPref => ( - - )} - -
- { - toggleNameDirection(); - }} - title={this.state.truncateNameOnRight ? 'Truncate resource name right' : 'Truncate resource name left'}> - - - {(pref.view === 'tree' || pref.view === 'network') && ( - - this.toggleCompactView(application.metadata.name, pref)}> - - - - )} - - - expandAll()} title='Expand all child nodes of all parent nodes'> - - - collapseAll()} title='Collapse all child nodes of all parent nodes'> - - - - - setZoom(0.1)} title='Zoom in'> - - - setZoom(-0.1)} title='Zoom out'> - - -
{zoomNum}%
- -
- this.filterTreeNode(node, treeFilter)} - selectedNodeFullName={this.selectedNodeKey} - onNodeClick={fullName => this.selectNode(fullName)} - nodeMenu={node => - AppUtils.renderResourceMenu(node, application, tree, this.appContext.apis, this.appChanged, () => - this.getApplicationActionMenu(application, false) - ) - } - showCompactNodes={pref.groupNodes} - userMsgs={pref.userHelpTipMsgs} - tree={tree} - app={application} - showOrphanedResources={pref.orphanedResources} - useNetworkingHierarchy={pref.view === 'network'} - onClearFilter={clearFilter} - onGroupdNodeClick={groupdedNodeIds => openGroupNodeDetails(groupdedNodeIds)} - zoom={pref.zoom} - podGroupCount={pref.podGroupCount} - appContext={this.appContext} - nameDirection={this.state.truncateNameOnRight} - filters={pref.resourceFilter} - setTreeFilterGraph={setFilterGraph} - updateUsrHelpTipMsgs={updateHelpTipState} - setShowCompactNodes={setShowCompactNodes} - setNodeExpansion={(node, isExpanded) => this.setNodeExpansion(node, isExpanded)} - getNodeExpansion={node => this.getNodeExpansion(node)} - /> - - )) || - (pref.view === 'pods' && ( - this.selectNode(fullName)} - nodeMenu={node => - AppUtils.renderResourceMenu(node, application, tree, this.appContext.apis, this.appChanged, () => - this.getApplicationActionMenu(application, false) - ) - } - quickStarts={node => AppUtils.renderResourceButtons(node, application, tree, this.appContext.apis, this.appChanged)} - /> - )) || - (this.state.extensionsMap[pref.view] != null && ( - - )) || ( -
+
+
+ this.selectNode(appFullName, 0, 'diff')} + showOperation={() => this.setOperationStatusVisible(true)} + showConditions={() => this.setConditionsStatusVisible(true)} + showMetadataInfo={revision => this.setState({...this.state, revision})} + /> +
+
+ {refreshing &&

Refreshing

} + {((pref.view === 'tree' || pref.view === 'network') && ( + <> services.viewPreferences.getPreferences()}> {viewPref => ( )} - {(filteredRes.length > 0 && ( - this.setState({page})} - preferencesKey='application-details'> - {data => ( - this.selectNode(fullName)} - resources={data} - nodeMenu={node => - AppUtils.renderResourceMenu( - {...node, root: node}, - application, - tree, - this.appContext.apis, - this.appChanged, - () => this.getApplicationActionMenu(application, false) - ) - } + + this.filterTreeNode(node, treeFilter)} + selectedNodeFullName={this.selectedNodeKey} + onNodeClick={fullName => this.selectNode(fullName)} + nodeMenu={node => + AppUtils.renderResourceMenu(node, application, tree, this.appContext.apis, this.appChanged, () => + this.getApplicationActionMenu(application, false) + ) + } + showCompactNodes={pref.groupNodes} + userMsgs={pref.userHelpTipMsgs} + tree={tree} + app={application} + showOrphanedResources={pref.orphanedResources} + useNetworkingHierarchy={pref.view === 'network'} + onClearFilter={clearFilter} + onGroupdNodeClick={groupdedNodeIds => openGroupNodeDetails(groupdedNodeIds)} + zoom={pref.zoom} + podGroupCount={pref.podGroupCount} + appContext={this.appContext} + nameDirection={this.state.truncateNameOnRight} + filters={pref.resourceFilter} + setTreeFilterGraph={setFilterGraph} + updateUsrHelpTipMsgs={updateHelpTipState} + setShowCompactNodes={setShowCompactNodes} + setNodeExpansion={(node, isExpanded) => this.setNodeExpansion(node, isExpanded)} + getNodeExpansion={node => this.getNodeExpansion(node)} + /> + + )) || + (pref.view === 'pods' && ( + this.selectNode(fullName)} + nodeMenu={node => + AppUtils.renderResourceMenu(node, application, tree, this.appContext.apis, this.appChanged, () => + this.getApplicationActionMenu(application, false) + ) + } + quickStarts={node => AppUtils.renderResourceButtons(node, application, tree, this.appContext.apis, this.appChanged)} + /> + )) || + (this.state.extensionsMap[pref.view] != null && ( + + )) || ( +
+ services.viewPreferences.getPreferences()}> + {viewPref => ( + )} - - )) || ( - -

No resources found

-
Try to change filter criteria
- - )} -
- )} + + {(filteredRes.length > 0 && ( + this.setState({page})} + preferencesKey='application-details'> + {data => ( + this.selectNode(fullName)} + resources={data} + nodeMenu={node => + AppUtils.renderResourceMenu( + {...node, root: node}, + application, + tree, + this.appContext.apis, + this.appChanged, + () => this.getApplicationActionMenu(application, false) + ) + } + tree={tree} + /> + )} + + )) || ( + +

No resources found

+
Try to change filter criteria
+ + )} +
+ )} +
0} onClose={() => this.closeGroupedNodesPanel()}>
@@ -748,12 +750,12 @@ export class ApplicationDetails extends React.Component, + title: , action: () => this.selectNode(fullName) }, { iconClassName: 'fa fa-file-medical', - title: , + title: , action: () => this.selectNode(fullName, 0, 'diff'), disabled: app.status.sync.status === appModels.SyncStatuses.Synced }, diff --git a/ui/src/app/shared/components/layout/layout.tsx b/ui/src/app/shared/components/layout/layout.tsx index dcf98dde565eb..096fdde68e99b 100644 --- a/ui/src/app/shared/components/layout/layout.tsx +++ b/ui/src/app/shared/components/layout/layout.tsx @@ -14,14 +14,21 @@ export interface LayoutProps { const getBGColor = (theme: string): string => (theme === 'light' ? '#dee6eb' : '#100f0f'); -export const Layout = (props: LayoutProps) => ( -
-
- - {props.pref.theme ? (document.body.style.background = getBGColor(props.pref.theme)) : null} -
- {props.children} +export const Layout = (props: LayoutProps) => { + React.useEffect(() => { + if (props.pref.theme) { + document.body.style.background = getBGColor(props.pref.theme); + } + }, [props.pref.theme]); + + return ( +
+
+ +
+ {props.children} +
-
-); + ); +}; diff --git a/ui/src/app/shared/components/page/page.scss b/ui/src/app/shared/components/page/page.scss index 4194f2b00693f..1031a121bedb4 100644 --- a/ui/src/app/shared/components/page/page.scss +++ b/ui/src/app/shared/components/page/page.scss @@ -75,10 +75,10 @@ } .sb-page-wrapper { - padding-left: $sidebar-width - 60px; + padding-left: $sidebar-width; &__sidebar-collapsed { - padding-left: $collapsed-sidebar-width - 60px; + padding-left: $collapsed-sidebar-width; .flex-top-bar { left: $collapsed-sidebar-width; }