starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-20 07:51:20 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Responsive (scroll) workspace header

Browse Source
This commit is contained in:
Gregory Schier
2024-02-15 16:30:08 -08:00
parent 7c18eeae8c
commit c2f5a3bf45
2 changed files with 10 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-web/components/SidebarActions.tsx
View File

@@ -16,7 +16,7 @@ export const SidebarActions = memo(function SidebarActions() {
const { hidden, show, hide } = useSidebarHidden(); const { hidden, show, hide } = useSidebarHidden();
return ( return (
<HStack> <HStack className="h-full" alignItems="center">
<IconButton <IconButton
onClick={async () => { onClick={async () => {
trackEvent('Sidebar', 'Toggle'); trackEvent('Sidebar', 'Toggle');

22
src-web/components/Workspace.tsx
View File

@@ -15,7 +15,6 @@ import { useSidebarHidden } from '../hooks/useSidebarHidden';
import { useSidebarWidth } from '../hooks/useSidebarWidth'; import { useSidebarWidth } from '../hooks/useSidebarWidth';
import { Button } from './core/Button'; import { Button } from './core/Button';
import { HotKeyList } from './core/HotKeyList'; import { HotKeyList } from './core/HotKeyList';
import { HStack } from './core/Stacks';
import { GrpcConnectionLayout } from './GrpcConnectionLayout'; import { GrpcConnectionLayout } from './GrpcConnectionLayout';
import { HttpRequestLayout } from './HttpRequestLayout'; import { HttpRequestLayout } from './HttpRequestLayout';
import { Overlay } from './Overlay'; import { Overlay } from './Overlay';
@@ -137,9 +136,7 @@ export default function Workspace() {
)} )}
> >
<HeaderSize className="border-transparent"> <HeaderSize className="border-transparent">
<HStack space={0.5}> <SidebarActions />
<SidebarActions />
</HStack>
</HeaderSize> </HeaderSize>
<Sidebar /> <Sidebar />
</motion.div> </motion.div>
@@ -159,11 +156,7 @@ export default function Workspace() {
/> />
</> </>
)} )}
<HeaderSize <HeaderSize data-tauri-drag-region style={head}>
data-tauri-drag-region
className="w-full bg-gray-50 border-b border-b-highlight text-gray-900"
style={head}
>
<WorkspaceHeader className="pointer-events-none" /> <WorkspaceHeader className="pointer-events-none" />
</HeaderSize> </HeaderSize>
{activeRequest == null ? ( {activeRequest == null ? (
@@ -181,18 +174,21 @@ interface HeaderSizeProps extends HTMLAttributes<HTMLDivElement> {
children: ReactNode; children: ReactNode;
} }
function HeaderSize({ className, ...props }: HeaderSizeProps) { function HeaderSize({ className, style, ...props }: HeaderSizeProps) {
const platform = useOsInfo(); const platform = useOsInfo();
const fullscreen = useIsFullscreen(); const fullscreen = useIsFullscreen();
const stoplightsVisible = platform?.osType === 'Darwin' && !fullscreen; const stoplightsVisible = platform?.osType === 'Darwin' && !fullscreen;
return ( return (
<div <div
style={style}
className={classNames( className={classNames(
className, className,
'h-md pt-[1px] flex items-center w-full border-b', 'h-md pt-[1px] w-full border-b min-w-0',
stoplightsVisible ? 'pl-20 pr-1' : 'pl-1', stoplightsVisible ? 'pl-20 pr-1' : 'pl-1',
)} )}
{...props} >
/> {/* NOTE: This needs display:grid or else the element shrinks (even though scrollable) */}
<div className="h-full w-full overflow-x-auto hide-scrollbars grid" {...props} />
</div>
); );
} }