mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Make .compose-form__upload more widely available

Browse Source
environments/review-chats-g56n7m/deployments/1665
Alex Gleason 2 years ago
parent 6a27670271
commit e1edc9796b
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 85 additions and 93 deletions
Show Stats Download Patch File Download Diff File

35
app/soapbox/features/chats/components/chat.tsx
Unescape View File

@ -4,11 +4,12 @@ import React, { MutableRefObject, useEffect, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { uploadMedia } from 'soapbox/actions/media';
import { IconButton, Stack } from 'soapbox/components/ui';
import { Stack } from 'soapbox/components/ui';
import Upload from 'soapbox/components/upload';
import UploadProgress from 'soapbox/components/upload-progress';
import { useAppDispatch } from 'soapbox/hooks';
import { normalizeAttachment } from 'soapbox/normalizers';
import { IChat, useChatActions } from 'soapbox/queries/chats';
import { truncateFilename } from 'soapbox/utils/media';
import ChatComposer from './chat-composer';
import ChatMessageList from './chat-message-list';
@ -144,31 +145,13 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
data.append('file', files[0]);
dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => {
setAttachment(response.data);
setAttachment(normalizeAttachment(response.data));
setIsUploading(false);
}).catch(() => {
setIsUploading(false);
});
};
const renderAttachment = () => {
if (!attachment) return null;
return (
<div className='chat-box__attachment'>
<div className='chat-box__filename'>
{truncateFilename(attachment.preview_url, 20)}
</div>
<div className='chat-box__remove-attachment'>
<IconButton
src={require('@tabler/icons/x.svg')}
onClick={handleRemoveFile}
/>
</div>
</div>
);
};
useEffect(() => {
if (inputRef?.current) {
inputRef.current.focus();
@ -181,7 +164,15 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
<ChatMessageList chat={chat} />
</div>
{renderAttachment()}
{attachment && (
<div className='relative h-48'>
<Upload
media={attachment}
onDelete={handleRemoveFile}
withPreview
/>
</div>
)}
{isUploading && (
<div className='p-4'>

143
app/styles/components/compose-form.scss
Unescape View File

@ -30,94 +30,95 @@
font-family: inherit;
font-size: 14px;
background: var(--background-color);
.compose-form__upload-wrapper { overflow: hidden; }
}
}
.compose-form__uploads-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.compose-form__upload-wrapper { overflow: hidden; }
&.contains-media {
padding: 5px;
border-top: 1px solid var(--foreground-color);
}
}
.compose-form__uploads-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.compose-form__upload {
flex: 1 1 0;
min-width: 40%;
margin: 5px;
position: relative;
border-radius: 4px;
overflow: hidden;
&.contains-media {
padding: 5px;
border-top: 1px solid var(--foreground-color);
}
}
&__actions {
@apply bg-gradient-to-b from-gray-900/80 via-gray-900/50 to-transparent flex items-start justify-between opacity-0 transition-opacity duration-100 ease-linear;
.compose-form__upload {
flex: 1 1 0;
min-width: 40%;
margin: 5px;
position: relative;
border-radius: 4px;
overflow: hidden;
&.active {
@apply opacity-100;
}
&__actions {
@apply bg-gradient-to-b from-gray-900/80 via-gray-900/50 to-transparent flex items-start justify-between opacity-0 transition-opacity duration-100 ease-linear;
.icon-button {
@apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center;
}
}
&.active {
@apply opacity-100;
}
&-description {
@apply bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 absolute z-[2px] bottom-0 left-0 right-0 p-2.5 opacity-0 transition-opacity duration-100 ease-linear;
.icon-button {
@apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center;
}
}
&.active {
@apply opacity-100;
}
&-description {
@apply bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 absolute z-[2px] bottom-0 left-0 right-0 p-2.5 opacity-0 transition-opacity duration-100 ease-linear;
textarea {
@apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0;
&.active {
@apply opacity-100;
}
&::placeholder {
@apply text-white/60;
}
}
}
textarea {
@apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0;
&-preview {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
video {
width: 100%;
height: 100%;
object-fit: cover;
}
&::placeholder {
@apply text-white/60;
}
}
}
.compose-form__upload-thumbnail {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 160px;
&-preview {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
video {
width: 100%;
overflow: hidden;
position: relative;
height: 100%;
object-fit: cover;
}
}
}
&.video {
background-image: url('../assets/images/video-placeholder.png');
background-size: cover;
}
.compose-form__upload-thumbnail {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 160px;
width: 100%;
overflow: hidden;
position: relative;
&.video {
background-image: url('../assets/images/video-placeholder.png');
background-size: cover;
}
&.audio {
background-image: url('../assets/images/audio-placeholder.png');
background-size: cover;
}
}
} // end .compose-form .compose-form__modifiers
} // end .compose-form
&.audio {
background-image: url('../assets/images/audio-placeholder.png');
background-size: cover;
}
}
.privacy-dropdown__dropdown {
@apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm;

Write Preview
Loading…
Cancel
Save