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

fixed size display for locations cards

Browse source
This commit is contained in:
myung03 2024-05-14 16:05:58 -07:00
parent 8bfcf58a0d
commit 4181fd7869
2 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
interface/app/$libraryId/overview/StatCard.tsx
View file

@ -12,11 +12,12 @@ type StatCardProps = {
freeSpace?: string | number[];
color: string;
connectionType: 'lan' | 'p2p' | 'cloud' | null;
devices: boolean;
};
const Pill = tw.div`px-1.5 py-[1px] rounded text-tiny font-medium text-ink-dull bg-app-box border border-app-line`;
const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
const StatCard = ({ icon, name, devices, connectionType, ...stats }: StatCardProps) => {
const [mounted, setMounted] = useState(false);
const isDark = useIsDark();
@ -44,7 +45,7 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
return (
<Card className="flex w-[280px] shrink-0 flex-col bg-app-box/50 !p-0 ">
<div className="flex flex-row items-center gap-5 p-4 px-6">
<div className="max-h-28 flex flex-row items-center gap-5 p-4 px-6">
{stats.freeSpace && (
<CircularProgress
radius={40}
@ -71,12 +72,11 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
<span className="truncate font-medium">{name}</span>
<span className="mt-1 truncate text-tiny text-ink-faint">
{freeSpace.value}
{freeSpace.unit} {t('free_of')} {totalSpace.value}
{totalSpace.unit}
{freeSpace.unit} {devices && t('free_of') + " " + totalSpace.value + totalSpace.unit}
</span>
</div>
</div>
<div className="flex h-10 flex-row items-center gap-1.5 border-t border-app-line px-2">
<div className="flex h-10 flex-row items-center gap-1.5 border-t border-app-line px-2">
<Pill className="uppercase">{connectionType || t('local')}</Pill>
<div className="grow" />
{/* <Button size="icon" variant="outline">

4
interface/app/$libraryId/overview/index.tsx
View file

@ -3,6 +3,7 @@ import { useBridgeQuery, useLibraryQuery } from '@sd/client';
import { useLocale, useOperatingSystem } from '~/hooks';
import { useRouteTitle } from '~/hooks/useRouteTitle';
import { hardwareModelToIcon } from '~/util/hardware';
import { Resizable } from '@sd/ui';
import { SearchContextProvider, useSearchFromSearchParams } from '../search';
import SearchBar from '../search/SearchBar';
@ -75,7 +76,6 @@ export const Component = () => {
/>
<div className="mt-4 flex flex-col gap-3 pt-3">
<OverviewSection>
<LibraryStatistics />
</OverviewSection>
<OverviewSection>
<FileKindStatistics />
@ -88,6 +88,7 @@ export const Component = () => {
totalSpace={
stats.data?.statistics?.total_local_bytes_capacity || '0'
}
devices={true}
freeSpace={stats.data?.statistics?.total_local_bytes_free || '0'}
color="#0362FF"
connectionType={null}
@ -151,6 +152,7 @@ export const Component = () => {
totalSpace={item.size_in_bytes || [0]}
color="#0362FF"
connectionType={null}
devices={false}
/>
</Link>
))}