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

Improve sidebar UI layout when narrow (#1938) 

* improve how the sidebar reacts to being a smol lil' guy

* fix snapshots

* shrink minimum sizes to allow small screens to work in some way
This commit is contained in:
Ashley Stanton-Nurse 2024-08-21 09:55:57 -07:00 committed by GitHub
parent 5a5e155205
commit d3722f2c99
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 57 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Explorer/Controls/TreeComponent/Styles.ts
View File

@ -25,7 +25,9 @@ export const useTreeStyles = makeStyles({
height: `var(${treeIconWidth})`, height: `var(${treeIconWidth})`,
}, },
treeItem: {}, treeItem: {},
nodeLabel: {}, nodeLabel: {
whiteSpace: "nowrap", // Don't wrap text, there will be a scrollbar.
},
treeItemLayout: { treeItemLayout: {
fontSize: tokens.fontSizeBase300, fontSize: tokens.fontSizeBase300,
height: tokens.layoutRowHeight, height: tokens.layoutRowHeight,

50
src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
View File

@ -19,7 +19,7 @@ exports[`TreeNodeComponent does not render children if the node is loading 1`] =
} }
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
rootLabel rootLabel
</span> </span>
@ -183,7 +183,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
<span <span
class="" class="___1h29e9h_0000000 fz5stix"
> >
rootLabel rootLabel
</span> </span>
@ -235,7 +235,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
<span <span
class="" class="___1h29e9h_0000000 fz5stix"
> >
rootLabel rootLabel
</span> </span>
@ -283,7 +283,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
<span <span
class="" class="___1h29e9h_0000000 fz5stix"
> >
child1Label child1Label
</span> </span>
@ -327,7 +327,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
<span <span
class="" class="___1h29e9h_0000000 fz5stix"
> >
child2LoadingLabel child2LoadingLabel
</span> </span>
@ -367,7 +367,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
<span <span
class="" class="___1h29e9h_0000000 fz5stix"
> >
child3ExpandingLabel child3ExpandingLabel
</span> </span>
@ -423,7 +423,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
className="fui-TreeItemLayout__main rklbe47" className="fui-TreeItemLayout__main rklbe47"
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
rootLabel rootLabel
</span> </span>
@ -614,7 +614,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
<span <span
class="" class="___1h29e9h_0000000 fz5stix"
> >
child1Label child1Label
</span> </span>
@ -666,7 +666,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
<span <span
class="" class="___1h29e9h_0000000 fz5stix"
> >
child1Label child1Label
</span> </span>
@ -720,7 +720,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
className="fui-TreeItemLayout__main rklbe47" className="fui-TreeItemLayout__main rklbe47"
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
child1Label child1Label
</span> </span>
@ -848,7 +848,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
<span <span
class="" class="___1h29e9h_0000000 fz5stix"
> >
child2LoadingLabel child2LoadingLabel
</span> </span>
@ -900,7 +900,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
<span <span
class="" class="___1h29e9h_0000000 fz5stix"
> >
child2LoadingLabel child2LoadingLabel
</span> </span>
@ -954,7 +954,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
className="fui-TreeItemLayout__main rklbe47" className="fui-TreeItemLayout__main rklbe47"
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
child2LoadingLabel child2LoadingLabel
</span> </span>
@ -1063,7 +1063,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
<span <span
class="" class="___1h29e9h_0000000 fz5stix"
> >
child3ExpandingLabel child3ExpandingLabel
</span> </span>
@ -1111,7 +1111,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
<span <span
class="" class="___1h29e9h_0000000 fz5stix"
> >
child3ExpandingLabel child3ExpandingLabel
</span> </span>
@ -1153,7 +1153,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
className="fui-TreeItemLayout__main rklbe47" className="fui-TreeItemLayout__main rklbe47"
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
child3ExpandingLabel child3ExpandingLabel
</span> </span>
@ -1195,7 +1195,7 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
} }
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
rootLabel rootLabel
</span> </span>
@ -1222,7 +1222,7 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
} }
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
rootLabel rootLabel
</span> </span>
@ -1249,7 +1249,7 @@ exports[`TreeNodeComponent renders a node as expandable if it has empty, but def
} }
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
rootLabel rootLabel
</span> </span>
@ -1324,7 +1324,7 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
} }
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
rootLabel rootLabel
</span> </span>
@ -1374,7 +1374,7 @@ exports[`TreeNodeComponent renders a single node 1`] = `
} }
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
rootLabel rootLabel
</span> </span>
@ -1403,7 +1403,7 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
} }
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
rootLabel rootLabel
</span> </span>
@ -1430,7 +1430,7 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
} }
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
rootLabel rootLabel
</span> </span>
@ -1506,7 +1506,7 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
} }
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
rootLabel rootLabel
</span> </span>
@ -1585,7 +1585,7 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
} }
> >
<span <span
className="" className="___1h29e9h_0000000 fz5stix"
> >
rootLabel rootLabel
</span> </span>

38
src/Explorer/Sidebar.tsx
View File

@ -1,6 +1,7 @@
import { import {
Button, Button,
Menu, Menu,
MenuButton,
MenuButtonProps, MenuButtonProps,
MenuItem, MenuItem,
MenuList, MenuList,
@ -60,6 +61,7 @@ const useSidebarStyles = makeStyles({
alignItems: "center", alignItems: "center",
justifyItems: "center", justifyItems: "center",
width: "100%", width: "100%",
containerType: "size", // Use this container for "@container" queries below this.
...cosmosShorthands.borderBottom(), ...cosmosShorthands.borderBottom(),
}, },
loadingProgressBar: { loadingProgressBar: {
@ -83,6 +85,18 @@ const useSidebarStyles = makeStyles({
}, },
}, },
}, },
globalCommandsMenuButton: {
display: "initial",
"@container (min-width: 250px)": {
display: "none",
},
},
globalCommandsSplitButton: {
display: "none",
"@container (min-width: 250px)": {
display: "flex",
},
},
}); });
interface GlobalCommandsProps { interface GlobalCommandsProps {
@ -171,13 +185,19 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
<Menu positioning="below-end"> <Menu positioning="below-end">
<MenuTrigger disableButtonEnhancement> <MenuTrigger disableButtonEnhancement>
{(triggerProps: MenuButtonProps) => ( {(triggerProps: MenuButtonProps) => (
<SplitButton <>
menuButton={{ ...triggerProps, "aria-label": "More commands" }} <SplitButton
primaryActionButton={{ onClick: onPrimaryActionClick }} menuButton={{ ...triggerProps, "aria-label": "More commands" }}
icon={primaryAction.icon} primaryActionButton={{ onClick: onPrimaryActionClick }}
> className={styles.globalCommandsSplitButton}
{primaryAction.label} icon={primaryAction.icon}
</SplitButton> >
{primaryAction.label}
</SplitButton>
<MenuButton {...triggerProps} icon={primaryAction.icon} className={styles.globalCommandsMenuButton}>
New...
</MenuButton>
</>
)} )}
</MenuTrigger> </MenuTrigger>
<MenuPopover> <MenuPopover>
@ -199,7 +219,7 @@ interface SidebarProps {
explorer: Explorer; explorer: Explorer;
} }
const CollapseThreshold = 50; const CollapseThreshold = 140;
export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => { export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
const styles = useSidebarStyles(); const styles = useSidebarStyles();
@ -314,7 +334,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
</CosmosFluentProvider> </CosmosFluentProvider>
</Allotment.Pane> </Allotment.Pane>
)} )}
<Allotment.Pane minSize={800}> <Allotment.Pane minSize={200}>
<Tabs explorer={explorer} /> <Tabs explorer={explorer} />
</Allotment.Pane> </Allotment.Pane>
</Allotment> </Allotment>