moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve style of UploadProgress

This commit is contained in:
Justin 2022-03-30 11:22:37 -04:00
parent a15697faef
commit 6ccc1f10ec
3 changed files with 18 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/soapbox/features/compose/components/upload-progress.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import spring from 'react-motion/lib/spring'; import { spring } from 'react-motion';
import Icon from 'soapbox/components/icon'; import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks'; import { useAppSelector } from 'soapbox/hooks';
import Motion from '../../ui/util/optional_motion'; import Motion from '../../ui/util/optional_motion';
@ -16,23 +16,29 @@ const UploadProgress = () => {
} }
return ( return (
<div className='upload-progress'> <HStack alignItems='center' space={2}>
<div className='upload-progress__icon'> <Icon
<Icon id='upload' /> src={require('@tabler/icons/icons/cloud-upload.svg')}
</div> className='w-7 h-7 text-gray-500'
/>
<div className='upload-progress__message'> <Stack space={1}>
<FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' /> <Text theme='muted'>
<FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />
</Text>
<div className='upload-progress__backdrop'> <div className='w-full h-1.5 rounded-lg bg-gray-200 relative'>
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}> <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
{({ width }) => {({ width }) =>
<div className='upload-progress__tracker' style={{ width: `${width}%` }} /> (<div
className='absolute left-0 top-0 h-1.5 bg-primary-600 rounded-lg'
style={{ width: `${width}%` }}
/>)
} }
</Motion> </Motion>
</div> </div>
</div> </Stack>
</div> </HStack>
); );
}; };

20
app/styles/chats.scss
View File

@ -280,26 +280,6 @@
} }
.chat-box { .chat-box {
.upload-progress {
padding: 0 10px;
align-items: center;
height: 25px;
.fa {
font-size: 22px;
}
&__message {
font-size: 13px;
flex: 1;
align-items: center;
}
&__backdrop {
margin-top: 2px;
}
}
&__attachment { &__attachment {
display: flex; display: flex;
align-items: center; align-items: center;

41
app/styles/components/compose-form.scss
View File

@ -320,47 +320,6 @@
transform: translateY(1px); transform: translateY(1px);
} }
.upload-progress {
padding: 10px;
color: var(--highlight-text-color);
overflow: hidden;
display: flex;
.fa {
font-size: 34px;
margin-right: 10px;
}
span {
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
display: block;
}
}
.upload-progess__message {
flex: 1 1 auto;
}
.upload-progress__backdrop {
width: 100%;
height: 6px;
border-radius: 6px;
background: var(--brand-color--med);
position: relative;
margin-top: 5px;
}
.upload-progress__tracker {
position: absolute;
left: 0;
top: 0;
height: 6px;
background: var(--brand-color);
border-radius: 6px;
}
.privacy-dropdown__dropdown { .privacy-dropdown__dropdown {
@apply absolute bg-white dark:bg-slate-900 z-40 rounded-md shadow-lg ml-10 text-sm; @apply absolute bg-white dark:bg-slate-900 z-40 rounded-md shadow-lg ml-10 text-sm;