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})`,
},
treeItem: {},
nodeLabel: {},
nodeLabel: {
whiteSpace: "nowrap", // Don't wrap text, there will be a scrollbar.
},
treeItemLayout: {
fontSize: tokens.fontSizeBase300,
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
className=""
className="___1h29e9h_0000000 fz5stix"
>
rootLabel
</span>
@ -183,7 +183,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47"
>
<span
class=""
class="___1h29e9h_0000000 fz5stix"
>
rootLabel
</span>
@ -235,7 +235,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47"
>
<span
class=""
class="___1h29e9h_0000000 fz5stix"
>
rootLabel
</span>
@ -283,7 +283,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47"
>
<span
class=""
class="___1h29e9h_0000000 fz5stix"
>
child1Label
</span>
@ -327,7 +327,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47"
>
<span
class=""
class="___1h29e9h_0000000 fz5stix"
>
child2LoadingLabel
</span>
@ -367,7 +367,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47"
>
<span
class=""
class="___1h29e9h_0000000 fz5stix"
>
child3ExpandingLabel
</span>
@ -423,7 +423,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
className="fui-TreeItemLayout__main rklbe47"
>
<span
className=""
className="___1h29e9h_0000000 fz5stix"
>
rootLabel
</span>
@ -614,7 +614,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47"
>
<span
class=""
class="___1h29e9h_0000000 fz5stix"
>
child1Label
</span>
@ -666,7 +666,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47"
>
<span
class=""
class="___1h29e9h_0000000 fz5stix"
>
child1Label
</span>
@ -720,7 +720,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
className="fui-TreeItemLayout__main rklbe47"
>
<span
className=""
className="___1h29e9h_0000000 fz5stix"
>
child1Label
</span>
@ -848,7 +848,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47"
>
<span
class=""
class="___1h29e9h_0000000 fz5stix"
>
child2LoadingLabel
</span>
@ -900,7 +900,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47"
>
<span
class=""
class="___1h29e9h_0000000 fz5stix"
>
child2LoadingLabel
</span>
@ -954,7 +954,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
className="fui-TreeItemLayout__main rklbe47"
>
<span
className=""
className="___1h29e9h_0000000 fz5stix"
>
child2LoadingLabel
</span>
@ -1063,7 +1063,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47"
>
<span
class=""
class="___1h29e9h_0000000 fz5stix"
>
child3ExpandingLabel
</span>
@ -1111,7 +1111,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
class="fui-TreeItemLayout__main rklbe47"
>
<span
class=""
class="___1h29e9h_0000000 fz5stix"
>
child3ExpandingLabel
</span>
@ -1153,7 +1153,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
className="fui-TreeItemLayout__main rklbe47"
>
<span
className=""
className="___1h29e9h_0000000 fz5stix"
>
child3ExpandingLabel
</span>
@ -1195,7 +1195,7 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
}
>
<span
className=""
className="___1h29e9h_0000000 fz5stix"
>
rootLabel
</span>
@ -1222,7 +1222,7 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
}
>
<span
className=""
className="___1h29e9h_0000000 fz5stix"
>
rootLabel
</span>
@ -1249,7 +1249,7 @@ exports[`TreeNodeComponent renders a node as expandable if it has empty, but def
}
>
<span
className=""
className="___1h29e9h_0000000 fz5stix"
>
rootLabel
</span>
@ -1324,7 +1324,7 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
}
>
<span
className=""
className="___1h29e9h_0000000 fz5stix"
>
rootLabel
</span>
@ -1374,7 +1374,7 @@ exports[`TreeNodeComponent renders a single node 1`] = `
}
>
<span
className=""
className="___1h29e9h_0000000 fz5stix"
>
rootLabel
</span>
@ -1403,7 +1403,7 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
}
>
<span
className=""
className="___1h29e9h_0000000 fz5stix"
>
rootLabel
</span>
@ -1430,7 +1430,7 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
}
>
<span
className=""
className="___1h29e9h_0000000 fz5stix"
>
rootLabel
</span>
@ -1506,7 +1506,7 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
}
>
<span
className=""
className="___1h29e9h_0000000 fz5stix"
>
rootLabel
</span>
@ -1585,7 +1585,7 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
}
>
<span
className=""
className="___1h29e9h_0000000 fz5stix"
>
rootLabel
</span>

38
src/Explorer/Sidebar.tsx
View File

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