random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix layout issues in fabric (#1996)

This commit is contained in:
Ashley Stanton-Nurse 2024-10-24 09:59:03 -07:00 committed by GitHub
parent d478af3869
commit 236f075cf6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 70 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
less/documentDB.less
View File

@ -3117,3 +3117,7 @@ a:link {
background: white; background: white;
height: 100%; height: 100%;
} }
.sidebarContainer {
height: 100%;
}

8
less/documentDBFabric.less
View File

@ -20,14 +20,18 @@ a:focus {
text-decoration: underline; text-decoration: underline;
} }
.splashLoaderContainer {
background-color: #f5f5f5;
}
#divExplorer { #divExplorer {
background-color: #f5f5f5; background-color: #f5f5f5;
padding: @FabricBoxMargin;
} }
.resourceTreeAndTabs { .resourceTreeAndTabs {
border-radius: 0px; border-radius: 0px;
box-shadow: @FabricBoxBorderShadow; box-shadow: @FabricBoxBorderShadow;
margin: @FabricBoxMargin;
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
background-color: #ffffff; background-color: #ffffff;
@ -46,7 +50,6 @@ a:focus {
background-color: #ffffff; background-color: #ffffff;
border-radius: @FabricBoxBorderRadius @FabricBoxBorderRadius 0px 0px; border-radius: @FabricBoxBorderRadius @FabricBoxBorderRadius 0px 0px;
box-shadow: @FabricBoxBorderShadow; box-shadow: @FabricBoxBorderShadow;
margin: @FabricBoxMargin;
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
padding-top: 2px; padding-top: 2px;
@ -167,7 +170,6 @@ a:focus {
.dataExplorerErrorConsoleContainer { .dataExplorerErrorConsoleContainer {
border-radius: 0px 0px @FabricBoxBorderRadius @FabricBoxBorderRadius; border-radius: 0px 0px @FabricBoxBorderRadius @FabricBoxBorderRadius;
box-shadow: @FabricBoxBorderShadow; box-shadow: @FabricBoxBorderShadow;
margin: @FabricBoxMargin;
margin-top: 0px; margin-top: 0px;
width: auto; width: auto;
align-self: auto; align-self: auto;

120
src/Explorer/Sidebar.tsx
View File

@ -282,67 +282,69 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
); );
return ( return (
<Allotment ref={allotment} onChange={onChange} onDragEnd={onDragEnd} className="resourceTreeAndTabs"> <div className="sidebarContainer">
{/* Collections Tree - Start */} <Allotment ref={allotment} onChange={onChange} onDragEnd={onDragEnd} className="resourceTreeAndTabs">
{hasSidebar && ( {/* Collections Tree - Start */}
// When collapsed, we force the pane to 24 pixels wide and make it non-resizable. {hasSidebar && (
<Allotment.Pane minSize={24} preferredSize={250}> // When collapsed, we force the pane to 24 pixels wide and make it non-resizable.
<CosmosFluentProvider className={mergeClasses(styles.sidebar)}> <Allotment.Pane minSize={24} preferredSize={250}>
<div className={styles.sidebarContainer}> <CosmosFluentProvider className={mergeClasses(styles.sidebar)}>
{loading && ( <div className={styles.sidebarContainer}>
// The Fluent UI progress bar has some issues in reduced-motion environments so we use a simple CSS animation here. {loading && (
// https://github.com/microsoft/fluentui/issues/29076 // The Fluent UI progress bar has some issues in reduced-motion environments so we use a simple CSS animation here.
<div className={styles.loadingProgressBar} title="Refreshing tree..." /> // https://github.com/microsoft/fluentui/issues/29076
)} <div className={styles.loadingProgressBar} title="Refreshing tree..." />
{expanded ? ( )}
<> {expanded ? (
<div className={styles.floatingControlsContainer}> <>
<div className={styles.floatingControls}> <div className={styles.floatingControlsContainer}>
<button <div className={styles.floatingControls}>
type="button" <button
data-test="Sidebar/RefreshButton" type="button"
className={styles.floatingControlButton} data-test="Sidebar/RefreshButton"
disabled={loading} className={styles.floatingControlButton}
title="Refresh" disabled={loading}
onClick={onRefreshClick} title="Refresh"
> onClick={onRefreshClick}
<ArrowSync12Regular /> >
</button> <ArrowSync12Regular />
<button </button>
type="button" <button
className={styles.floatingControlButton} type="button"
title="Collapse sidebar" className={styles.floatingControlButton}
onClick={() => collapse()} title="Collapse sidebar"
> onClick={() => collapse()}
<ChevronLeft12Regular /> >
</button> <ChevronLeft12Regular />
</button>
</div>
</div> </div>
</div> <div
<div className={styles.expandedContent}
className={styles.expandedContent} style={!hasGlobalCommands ? { gridTemplateRows: "1fr" } : undefined}
style={!hasGlobalCommands ? { gridTemplateRows: "1fr" } : undefined} >
{hasGlobalCommands && <GlobalCommands explorer={explorer} />}
<ResourceTree explorer={explorer} />
</div>
</>
) : (
<button
type="button"
className={styles.floatingControlButton}
title="Expand sidebar"
onClick={() => expand()}
> >
{hasGlobalCommands && <GlobalCommands explorer={explorer} />} <ChevronRight12Regular />
<ResourceTree explorer={explorer} /> </button>
</div> )}
</> </div>
) : ( </CosmosFluentProvider>
<button </Allotment.Pane>
type="button" )}
className={styles.floatingControlButton} <Allotment.Pane minSize={200}>
title="Expand sidebar" <Tabs explorer={explorer} />
onClick={() => expand()}
>
<ChevronRight12Regular />
</button>
)}
</div>
</CosmosFluentProvider>
</Allotment.Pane> </Allotment.Pane>
)} </Allotment>
<Allotment.Pane minSize={200}> </div>
<Tabs explorer={explorer} />
</Allotment.Pane>
</Allotment>
); );
}; };