extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-25 01:14:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #182 from jeffprinty/feature/sidebar-collection-scrolling

Browse Source 
Enable scrolling in collections sidebar #118
This commit is contained in:
Anoop M D 2023-09-05 12:42:36 +05:30 committed by GitHub
commit 4aeb5cf56d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/bruno-app/src/components/Sidebar/Collections/index.js
View File

@ -61,7 +61,7 @@ const Collections = () => {
/> />
</div> </div>
<div className="mt-4 flex flex-col"> <div className="mt-4 flex flex-col overflow-y-auto absolute top-32 bottom-10 left-0 right-0">
{collections && collections.length {collections && collections.length
? collections.map((c) => { ? collections.map((c) => {
return ( return (
@ -77,4 +77,3 @@ const Collections = () => {
}; };
export default Collections; export default Collections;

17
packages/bruno-app/src/components/Sidebar/index.js
View File

@ -15,13 +15,11 @@ const MAX_LEFT_SIDEBAR_WIDTH = 600;
const Sidebar = () => { const Sidebar = () => {
const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth); const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
const [ preferencesOpen, setPreferencesOpen ] = useState(false); const [preferencesOpen, setPreferencesOpen] = useState(false);
const [asideWidth, setAsideWidth] = useState(leftSidebarWidth); const [asideWidth, setAsideWidth] = useState(leftSidebarWidth);
const { const { storedTheme } = useTheme();
storedTheme
} = useTheme();
const dispatch = useDispatch(); const dispatch = useDispatch();
const [dragging, setDragging] = useState(false); const [dragging, setDragging] = useState(false);
@ -76,24 +74,23 @@ const Sidebar = () => {
setAsideWidth(leftSidebarWidth); setAsideWidth(leftSidebarWidth);
}, [leftSidebarWidth]); }, [leftSidebarWidth]);
return ( return (
<StyledWrapper className="flex relative"> <StyledWrapper className="flex relative h-screen">
<aside> <aside>
<div className="flex flex-row h-full w-full"> <div className="flex flex-row h-screen w-full">
{preferencesOpen && <Preferences onClose={() => setPreferencesOpen(false)} />} {preferencesOpen && <Preferences onClose={() => setPreferencesOpen(false)} />}
<div className="flex flex-col w-full" style={{width: asideWidth}}> <div className="flex flex-col w-full" style={{ width: asideWidth }}>
<div className="flex flex-col flex-grow"> <div className="flex flex-col flex-grow">
<TitleBar /> <TitleBar />
<Collections /> <Collections />
</div> </div>
<div className="footer flex px-1 py-2 items-center cursor-pointer select-none"> <div className="footer flex px-1 py-2 absolute bottom-0 left-0 right-0 items-center cursor-pointer select-none">
<div className="flex items-center ml-1 text-xs "> <div className="flex items-center ml-1 text-xs ">
<IconSettings size={18} strokeWidth={1.5} className="mr-2 hover:text-gray-700" onClick={() => setPreferencesOpen(true)} /> <IconSettings size={18} strokeWidth={1.5} className="mr-2 hover:text-gray-700" onClick={() => setPreferencesOpen(true)} />
</div> </div>
<div className="pl-1" style={{position: 'relative', top: '3px'}}> <div className="pl-1" style={{ position: 'relative', top: '3px' }}>
{storedTheme === 'dark' ? ( {storedTheme === 'dark' ? (
<GitHubButton <GitHubButton
href="https://github.com/usebruno/bruno" href="https://github.com/usebruno/bruno"

1
packages/bruno-app/src/pageComponents/Index/StyledWrapper.js
View File

@ -5,6 +5,7 @@ const Wrapper = styled.div`
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
max-height: 100vh;
&.is-dragging { &.is-dragging {
cursor: col-resize !important; cursor: col-resize !important;