mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-02 10:03:28 +00:00
[MOB-100] Job manager design improvements (#2531)
* design improvements job manager mob * centering
This commit is contained in:
parent
58dd5c5d3e
commit
8d0a31c9d6
|
@ -1,3 +1,4 @@
|
||||||
|
import { JobProgressEvent, JobReport, useJobInfo } from '@sd/client';
|
||||||
import {
|
import {
|
||||||
Copy,
|
Copy,
|
||||||
Fingerprint,
|
Fingerprint,
|
||||||
|
@ -10,8 +11,7 @@ import {
|
||||||
} from 'phosphor-react-native';
|
} from 'phosphor-react-native';
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
import { View, ViewStyle } from 'react-native';
|
import { View, ViewStyle } from 'react-native';
|
||||||
import { JobProgressEvent, JobReport, useJobInfo } from '@sd/client';
|
import { tw, twStyle } from '~/lib/tailwind';
|
||||||
import { tw } from '~/lib/tailwind';
|
|
||||||
|
|
||||||
import { ProgressBar } from '../animation/ProgressBar';
|
import { ProgressBar } from '../animation/ProgressBar';
|
||||||
import JobContainer from './JobContainer';
|
import JobContainer from './JobContainer';
|
||||||
|
@ -33,7 +33,7 @@ const JobIcon: Record<string, Icon> = {
|
||||||
object_validator: Fingerprint
|
object_validator: Fingerprint
|
||||||
};
|
};
|
||||||
|
|
||||||
function Job({ job, isChild, progress }: JobProps) {
|
function Job({ job, isChild, progress, containerStyle }: JobProps) {
|
||||||
const jobData = useJobInfo(job, progress);
|
const jobData = useJobInfo(job, progress);
|
||||||
|
|
||||||
if (job.status === 'CompletedWithErrors') {
|
if (job.status === 'CompletedWithErrors') {
|
||||||
|
@ -42,7 +42,7 @@ function Job({ job, isChild, progress }: JobProps) {
|
||||||
// <pre className="custom-scroll inspector-scroll max-h-[300px] rounded border border-app-darkBox bg-app-darkBox/80 p-3">
|
// <pre className="custom-scroll inspector-scroll max-h-[300px] rounded border border-app-darkBox bg-app-darkBox/80 p-3">
|
||||||
// {job.errors_text.map((error, i) => (
|
// {job.errors_text.map((error, i) => (
|
||||||
// <p
|
// <p
|
||||||
// className="mb-1 w-full overflow-auto whitespace-normal break-words text-sm"
|
// className="w-full mb-1 overflow-auto text-sm break-words whitespace-normal"
|
||||||
// key={i}
|
// key={i}
|
||||||
// >
|
// >
|
||||||
// {error.trim()}
|
// {error.trim()}
|
||||||
|
@ -70,6 +70,7 @@ function Job({ job, isChild, progress }: JobProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<JobContainer
|
<JobContainer
|
||||||
|
containerStyle={twStyle(containerStyle)}
|
||||||
name={jobData.name}
|
name={jobData.name}
|
||||||
icon={JobIcon[job.name]}
|
icon={JobIcon[job.name]}
|
||||||
textItems={
|
textItems={
|
||||||
|
|
|
@ -24,14 +24,14 @@ export default function JobContainer(props: JobContainerProps) {
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
style={twStyle(
|
style={twStyle(
|
||||||
'flex flex-row justify-center',
|
'relative z-40 flex-row justify-center',
|
||||||
'border-b border-app-line/30 px-8 py-4',
|
'border-b border-app-line/30 px-8 py-4',
|
||||||
isChild && 'my-1.5 border-b-0 p-2 pl-12',
|
isChild && 'border-b-0 pl-12',
|
||||||
restProps.containerStyle
|
restProps.containerStyle
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{typeof Icon === 'number' ? (
|
{typeof Icon === 'number' ? (
|
||||||
<Image source={Icon} style={tw`ml-4 mr-1 h-8 w-8`} />
|
<Image source={Icon} style={tw`relative z-40 ml-4 mr-1 h-8 w-8`} />
|
||||||
) : (
|
) : (
|
||||||
Icon && (
|
Icon && (
|
||||||
<View
|
<View
|
||||||
|
@ -51,22 +51,24 @@ export default function JobContainer(props: JobContainerProps) {
|
||||||
return (
|
return (
|
||||||
<Text
|
<Text
|
||||||
key={index}
|
key={index}
|
||||||
style={tw`mt-[2px] pl-1.5 text-[13px] text-ink-faint`}
|
style={tw`ml-1.5 mt-0.5 text-sm text-ink-faint`}
|
||||||
numberOfLines={1}
|
numberOfLines={1}
|
||||||
>
|
>
|
||||||
{filteredItems.map((item, index) => {
|
{filteredItems.map((item, index) => {
|
||||||
const Icon = item?.icon;
|
const Icon = item?.icon;
|
||||||
return (
|
return (
|
||||||
<Fragment key={index}>
|
<Fragment key={index}>
|
||||||
|
<View style={tw`flex-row gap-1`}>
|
||||||
{Icon && (
|
{Icon && (
|
||||||
<Icon
|
<Icon
|
||||||
weight="fill"
|
weight="fill"
|
||||||
// TODO: this might be ugly
|
size={14}
|
||||||
style={tw`-mt-0.5 ml-[5px] inline`}
|
color={tw.color('ink-faint')}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<Text key={index}>{item?.text}</Text>
|
<Text style={tw`text-xs text-ink-faint`} key={index}>{item?.text}</Text>
|
||||||
{index < filteredItems.length - 1 && <Text> • </Text>}
|
{index < filteredItems.length - 1 && <Text style={tw`text-ink-faint`}>• </Text>}
|
||||||
|
</View>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -126,14 +126,22 @@ export default function ({ group, progress }: JobGroupProps) {
|
||||||
</JobContainer>
|
</JobContainer>
|
||||||
</Pressable>
|
</Pressable>
|
||||||
{showChildJobs && (
|
{showChildJobs && (
|
||||||
<AnimatedHeight style={tw`mb-4`}>
|
<AnimatedHeight>
|
||||||
{jobs.map((job) => (
|
{jobs.map((job, i) => (
|
||||||
|
<View style={tw`relative`} key={job.id}>
|
||||||
|
<View style={twStyle(`absolute bottom-0 left-9 top-0.5 w-px bg-app-button`, {
|
||||||
|
height: i === jobs.length - 1 ? 28 : '100%',
|
||||||
|
})}/>
|
||||||
|
<View
|
||||||
|
style={tw`top-7.5 absolute left-9 h-px w-4 bg-app-button`}
|
||||||
|
/>
|
||||||
<Job
|
<Job
|
||||||
|
containerStyle={tw`ml-5`}
|
||||||
isChild={jobs.length > 1}
|
isChild={jobs.length > 1}
|
||||||
key={job.id}
|
|
||||||
job={job}
|
job={job}
|
||||||
progress={progress[job.id] ?? null}
|
progress={progress[job.id] ?? null}
|
||||||
/>
|
/>
|
||||||
|
</View>
|
||||||
))}
|
))}
|
||||||
</AnimatedHeight>
|
</AnimatedHeight>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in a new issue