mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-04-21 06:59:17 -04:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-631] TopBar improvements & misc fixes (#837)

Browse Source 
* fix things

* added back/forward buttons to settings

* split top bar context into left and right

* hook up path

* fix background jobs hidden from job manager

* core

* fix type + quick preview transition

* fix selected item color contrast

* fix close button on quick preview

* clean up job ui for light theme

* Improve media view overscan

---------

Co-authored-by: Brendan Allan <brendonovich@outlook.com>
This commit is contained in:
Jamie Pine
2023-05-20 17:17:27 -07:00
committed by GitHub
parent ce1cf7f495
commit 158366b69e
30 changed files with 270 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
interface/app/$libraryId/overview/CategoryButton.tsx
View File

@@ -14,7 +14,7 @@ export default ({ category, icon, items, selected, onClick }: CategoryButtonProp
onClick={onClick}
className={clsx(
'flex shrink-0 items-center rounded-md px-1.5 py-1 text-sm',
selected && 'bg-app-selected/20'
selected && 'bg-app-selectedItem'
)}
>
<img src={icon} className="mr-3 h-12 w-12" />

25
interface/app/$libraryId/overview/index.tsx
View File

@@ -16,7 +16,8 @@ import { useExplorerStore, useExplorerTopBarOptions, useIsDark } from '~/hooks';
import Explorer from '../Explorer';
import { SEARCH_PARAMS, useExplorerOrder } from '../Explorer/util';
import { usePageLayout } from '../PageLayout';
import TopBarChildren from '../TopBar/TopBarChildren';
import { TopBarPortal } from '../TopBar/Portal';
import TopBarOptions from '../TopBar/TopBarOptions';
import CategoryButton from '../overview/CategoryButton';
import Statistics from '../overview/Statistics';
@@ -92,12 +93,12 @@ export const Component = () => {
favorite: isFavoritesCategory ? true : undefined,
...(explorerStore.layoutMode === 'media'
? {
kind: [5, 7].includes(kind)
? [kind]
: isFavoritesCategory
kind: [5, 7].includes(kind)
? [kind]
: isFavoritesCategory
? [5, 7]
: [5, 7, kind]
}
}
: { kind: isFavoritesCategory ? [] : [kind] })
}
}
@@ -128,19 +129,25 @@ export const Component = () => {
return (
<>
<TopBarChildren
toolOptions={[explorerViewOptions, explorerToolOptions, explorerControlOptions]}
<TopBarPortal
right={
<TopBarOptions
options={[explorerViewOptions, explorerToolOptions, explorerControlOptions]}
/>
}
/>
<Explorer
inspectorClassName="!pt-0 !fixed !top-[50px] !right-[10px] !w-[260px]"
inspectorClassName="!pt-0 !fixed !top-[50px] !right-[10px] !w-[260px]"
explorerClassName="!overflow-visible" // required to ensure categories are sticky, remove with caution
viewClassName="!pl-0 !pt-0 !h-auto"
items={items}
onLoadMore={query.fetchNextPage}
hasNextPage={query.hasNextPage}
isFetchingNextPage={query.isFetchingNextPage}
scrollRef={page?.ref}
>
<Statistics />
<div className="no-scrollbar sticky top-0 z-50 mt-2 flex space-x-[1px] overflow-x-scroll bg-app/90 px-5 py-1.5 backdrop-blur">
<div className="no-scrollbar sticky top-0 z-10 mt-2 flex space-x-[1px] overflow-x-scroll bg-app/90 px-5 py-1.5 backdrop-blur">
{categories.data?.map((category) => {
const iconString = CategoryToIcon[category.name] || 'Document';
return (