bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'video-upload-progress' into 'next'

Browse source 
Convert VideoProgress to TW and TSX

See merge request soapbox-pub/soapbox-fe!1164
This commit is contained in:
Justin 2022-03-30 15:48:38 +00:00
commit 6099b520a3
7 changed files with 49 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/features/chats/components/chat_box.js
View file

@ -12,8 +12,8 @@ import {
} from 'soapbox/actions/chats';
import { uploadMedia } from 'soapbox/actions/media';
import IconButton from 'soapbox/components/icon_button';
import UploadProgress from 'soapbox/features/compose/components/upload-progress';
import UploadButton from 'soapbox/features/compose/components/upload_button';
import UploadProgress from 'soapbox/features/compose/components/upload_progress';
import { truncateFilename } from 'soapbox/utils/media';
import ChatMessageList from './chat_message_list';

45
app/soapbox/features/compose/components/upload-progress.tsx Normal file
View file

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

4
app/soapbox/features/compose/components/upload_form.js
View file

@ -4,8 +4,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
// import SensitiveButtonContainer from '../containers/sensitive_button_container';
import UploadProgress from '../components/upload-progress';
import UploadContainer from '../containers/upload_container';
import UploadProgressContainer from '../containers/upload_progress_container';
export default class UploadForm extends ImmutablePureComponent {
@ -21,7 +21,7 @@ export default class UploadForm extends ImmutablePureComponent {
return (
<div className='compose-form__upload-wrapper'>
<UploadProgressContainer />
<UploadProgress />
<div className={classes}>
{mediaIds.map(id => (

45
app/soapbox/features/compose/components/upload_progress.js
View file

@ -1,45 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import { FormattedMessage } from 'react-intl';
import spring from 'react-motion/lib/spring';
import Icon from 'soapbox/components/icon';
import Motion from '../../ui/util/optional_motion';
export default class UploadProgress extends React.PureComponent {
static propTypes = {
active: PropTypes.bool,
progress: PropTypes.number,
};
render() {
const { active, progress } = this.props;
if (!active) {
return null;
}
return (
<div className='upload-progress'>
<div className='upload-progress__icon'>
<Icon id='upload' />
</div>
<div className='upload-progress__message'>
<FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />
<div className='upload-progress__backdrop'>
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
{({ width }) =>
<div className='upload-progress__tracker' style={{ width: `${width}%` }} />
}
</Motion>
</div>
</div>
</div>
);
}
}

2
app/soapbox/features/compose/containers/upload_progress_container.js
View file

@ -1,6 +1,6 @@
import { connect } from 'react-redux';
import UploadProgress from '../components/upload_progress';
import UploadProgress from '../components/upload-progress';
const mapStateToProps = state => ({
active: state.getIn(['compose', 'is_uploading']),

20
app/styles/chats.scss
View file

@ -280,26 +280,6 @@
}
.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 {
display: flex;
align-items: center;

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

@ -320,47 +320,6 @@
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 {
@apply absolute bg-white dark:bg-slate-900 z-40 rounded-md shadow-lg ml-10 text-sm;