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

* 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

View File

@@ -1,5 +1,5 @@
import { proxy, useSnapshot } from 'valtio';
import { ExplorerItem, Ordering } from '@sd/client';
import { ExplorerItem, FilePathSearchOrdering } from '@sd/client';
import { resetStore } from '@sd/client/src/stores/util';
type UnionKeys<T> = T extends any ? keyof T : never;
@@ -14,7 +14,7 @@ export enum ExplorerKind {
export type CutCopyType = 'Cut' | 'Copy';
export type ExplorerOrderByKeys = UnionKeys<Ordering> | 'none';
export type ExplorerOrderByKeys = UnionKeys<FilePathSearchOrdering> | 'none';
export type ExplorerDirection = 'asc' | 'desc';
@@ -28,8 +28,6 @@ const state = {
tagAssignMode: false,
showInspector: false,
multiSelectIndexes: [] as number[],
contextMenuObjectId: null as number | null,
contextMenuActiveObject: null as object | null,
newThumbnails: {} as Record<string, boolean | undefined>,
cutCopyState: {
sourcePath: '', // this is used solely for preventing copy/cutting to the same path (as that will truncate the file)
@@ -44,7 +42,7 @@ const state = {
mediaAspectSquare: true,
orderBy: 'dateCreated' as ExplorerOrderByKeys,
orderByDirection: 'desc' as ExplorerDirection,
groupBy: 'none'
groupBy: 'none',
};
// Keep the private and use `useExplorerState` or `getExplorerStore` or you will get production build issues.

View File

@@ -11,13 +11,16 @@ import {
Tag
} from 'phosphor-react';
import OptionsPanel from '~/app/$libraryId/Explorer/OptionsPanel';
import { TOP_BAR_ICON_STYLE, ToolOption } from '~/app/$libraryId/TopBar';
import { TOP_BAR_ICON_STYLE, ToolOption } from '~/app/$libraryId/TopBar/TopBarOptions';
import { KeyManager } from '../app/$libraryId/KeyManager';
import { getExplorerStore, useExplorerStore } from './useExplorerStore';
import { useLibraryMutation } from '@sd/client';
export const useExplorerTopBarOptions = () => {
const explorerStore = useExplorerStore();
const reload = useLibraryMutation('locations.quickRescan');
const explorerViewOptions: ToolOption[] = [
{
toolTipLabel: 'Grid view',
@@ -94,7 +97,12 @@ export const useExplorerTopBarOptions = () => {
showAtResolution: 'xl:flex'
},
{
toolTipLabel: 'Regenerate thumbs (temp)',
toolTipLabel: 'Reload',
onClick: () => {
if (explorerStore.locationId) {
reload.mutate({ location_id: explorerStore.locationId, sub_path: '' })
}
},
icon: <ArrowClockwise className={TOP_BAR_ICON_STYLE} />,
individual: true,
showAtResolution: 'xl:flex'