mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-04-26 09:30:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-1003] fix search bar position (#1252)

Browse Source 
fix search bar position
This commit is contained in:
nikec
2023-08-26 11:30:41 +02:00
committed by GitHub
parent e41a92012d
commit 2c09bfc3d9
4 changed files with 22 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
interface/app/$libraryId/TopBar/TopBarOptions.tsx
View File

@@ -37,7 +37,7 @@ export default ({ options }: TopBarChildrenProps) => {
}, []);
return (
<div data-tauri-drag-region className="flex flex-row">
<div data-tauri-drag-region className="flex flex-1 justify-end">
<div data-tauri-drag-region className={`flex gap-0`}>
{options?.map((group, groupIndex) => {
return group.map(

19
interface/app/$libraryId/TopBar/index.tsx
View File

@@ -20,19 +20,22 @@ const TopBar = (props: Props) => {
data-tauri-drag-region
style={{ height: TOP_BAR_HEIGHT }}
className={clsx(
'duration-250 top-bar-blur absolute left-0 top-0 z-50 flex',
'w-full flex-row items-center justify-between overflow-hidden',
'border-b border-sidebar-divider bg-app/90 px-3.5',
'transition-[background-color,border-color] ease-out',
'top-bar-blur absolute inset-x-0 z-50 flex items-center gap-3.5 overflow-hidden border-b !border-sidebar-divider bg-app/90 px-3.5',
'duration-250 transition-[background-color,border-color] ease-out',
isDragging && 'pointer-events-none'
)}
>
<div data-tauri-drag-region className="flex min-w-0 flex-row items-center">
<div
data-tauri-drag-region
className="flex flex-1 items-center gap-3.5 overflow-hidden"
>
<NavigationButtons />
<div ref={props.leftRef} className="contents" />
<div ref={props.leftRef} className="overflow-hidden" />
</div>
{props.noSearch || <SearchBar />}
<div ref={props.rightRef} className="contents" />
{!props.noSearch && <SearchBar />}
<div ref={props.rightRef} className={clsx(!props.noSearch && 'flex-1')} />
</div>
);
};

14
interface/app/$libraryId/location/$id.tsx
View File

@@ -122,14 +122,12 @@ export const Component = () => {
<ExplorerContextProvider explorer={explorer}>
<TopBarPortal
left={
<div className="group flex flex-row items-center space-x-2">
<span className="flex flex-row items-center">
<Folder size={22} className="ml-3 mr-2 mt-[-1px] inline-block" />
<span className="max-w-[100px] truncate text-sm font-medium">
{path && path?.length > 1
? getLastSectionOfPath(path)
: location.data?.name}
</span>
<div className="flex items-center gap-2">
<Folder size={22} className="mt-[-1px]" />
<span className="truncate text-sm font-medium">
{path && path?.length > 1
? getLastSectionOfPath(path)
: location.data?.name}
</span>
{location.data && (
<LocationOptions location={location.data} path={path || ''} />

13
interface/app/$libraryId/node/$id.tsx
View File

@@ -43,15 +43,10 @@ export const Component = () => {
<ExplorerContextProvider explorer={explorer}>
<TopBarPortal
left={
<div className="group flex flex-row items-center space-x-2">
<span className="flex flex-row items-center">
<img
src={Laptop}
className="ml-3 mr-2 mt-[-1px] inline-block h-6 w-6"
/>
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium">
{nodeState.data?.name || 'Node'}
</span>
<div className="flex items-center gap-2">
<img src={Laptop} className="mt-[-1px] h-6 w-6" />
<span className="truncate text-sm font-medium">
{nodeState.data?.name || 'Node'}
</span>
</div>
}