Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-04 14:33:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-1265, ENG-1263] Fix show object size (#1552)

Browse source 
* Fix show size

* Hide toggle & fix height
This commit is contained in:
nikec 2023-10-13 02:34:07 +02:00 committed by GitHub
parent 60e1c04170
commit 3a33d469b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
interface/app/$libraryId/Explorer/OptionsPanel.tsx
View file

@ -1,3 +1,4 @@
import { useMatch } from 'react-router';
import { RadixCheckbox, Select, SelectOption, Slider, tw, z } from '@sd/ui';
import { getExplorerLayoutStore, useExplorerLayoutStore } from '~/../packages/client/src';
import { SortOrderSchema } from '~/app/route-schemas';
@ -20,6 +21,8 @@ export default () => {
const settings = explorer.useSettingsSnapshot();
const isEphemeralLocation = useMatch('/:libraryId/ephemeral/:ephemeralId');
return (
<div className="flex w-80 flex-col gap-4 p-4">
{(settings.layoutMode === 'grid' || settings.layoutMode === 'media') && (
@ -132,7 +135,7 @@ export default () => {
}}
/>
{settings.layoutMode === 'grid' && (
{settings.layoutMode === 'grid' && !isEphemeralLocation && (
<RadixCheckbox
checked={settings.showBytesInGridView}
label="Show Object size"

5
interface/app/$libraryId/Explorer/View/GridList.tsx
View file

@ -8,6 +8,7 @@ import {
useState,
type ReactNode
} from 'react';
import { useMatch } from 'react-router';
import Selecto from 'react-selecto';
import { useKey } from 'rooks';
import { type ExplorerItem } from '@sd/client';
@ -108,6 +109,7 @@ export default ({ children }: { children: RenderItem }) => {
const realOS = useOperatingSystem(true);
const isChrome = CHROME_REGEX.test(navigator.userAgent);
const isEphemeralLocation = useMatch('/:libraryId/ephemeral/:ephemeralId');
const explorer = useExplorerContext();
const settings = explorer.useSettingsSnapshot();
@ -121,7 +123,8 @@ export default ({ children }: { children: RenderItem }) => {
const [dragFromThumbnail, setDragFromThumbnail] = useState(false);
const itemDetailsHeight = settings.gridItemSize / 4 + (settings.showBytesInGridView ? 20 : 0);
const itemDetailsHeight =
settings.gridItemSize / 4 + (settings.showBytesInGridView && !isEphemeralLocation ? 20 : 0);
const itemHeight = settings.gridItemSize + itemDetailsHeight;
const padding = settings.layoutMode === 'grid' ? 12 : 0;

20
interface/app/$libraryId/Explorer/View/GridView.tsx
View file

@ -26,18 +26,12 @@ const GridViewItem = memo(({ data, selected, cut, isRenaming }: GridViewItemProp
const isEphemeralLocation = useMatch('/:libraryId/ephemeral/:ephemeralId');
const isFolder = 'is_dir' in data.item ? data.item.is_dir || data.type === 'Location' : false;
//do not refactor please - this has been done for readability
const shouldShowSize = () => {
if (isEphemeralLocation) return false;
if (isFolder) return false;
if (!filePathData?.is_dir && !location) return false;
if (showBytesInGridView) return true;
if (isRenaming) return false;
if (!selected) return false;
return true;
};
const showSize =
showBytesInGridView &&
!isEphemeralLocation &&
!isFolder &&
!location &&
(!isRenaming || (isRenaming && !selected));
return (
<ViewItem data={data} className="h-full w-full">
@ -55,7 +49,7 @@ const GridViewItem = memo(({ data, selected, cut, isRenaming }: GridViewItemProp
<div className="flex flex-col justify-center">
<RenamableItemText item={data} style={{ maxHeight: gridItemSize / 3 }} />
{shouldShowSize() && filePathData?.size_in_bytes_bytes && (
{showSize && filePathData?.size_in_bytes_bytes && (
<span
className={clsx(
'cursor-default truncate rounded-md px-1.5 py-[1px] text-center text-tiny text-ink-dull '