muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

fixes for audio and image block

Browse source
This commit is contained in:
Fedor Katurov 2019-10-15 16:01:27 +07:00
parent 6ebdd62f67
commit 794318ed80
3 changed files with 30 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/node/CommentContent/index.tsx
View file

@ -42,7 +42,7 @@ const CommentContent: FC<IProps> = ({ comment }) => {
)} )}
{groupped.image && groupped.image.length > 0 && ( {groupped.image && groupped.image.length > 0 && (
<div className={styles.block}> <div className={classnames(styles.block, styles.block_image)}>
<div className={styles.images}> <div className={styles.images}>
{groupped.image.map(file => ( {groupped.image.map(file => (
<div key={file.id}> <div key={file.id}>
@ -58,7 +58,7 @@ const CommentContent: FC<IProps> = ({ comment }) => {
{groupped.audio && groupped.audio.length > 0 && ( {groupped.audio && groupped.audio.length > 0 && (
<> <>
{groupped.audio.map(file => ( {groupped.audio.map(file => (
<div className={classnames(styles.block, styles.audio_block)} key={file.id}> <div className={classnames(styles.block, styles.block_audio)} key={file.id}>
<AudioPlayer file={file} /> <AudioPlayer file={file} />
<div className={styles.date}>{getPrettyDate(comment.created_at)}</div> <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>

13
src/components/node/CommentContent/styles.scss
View file

@ -22,6 +22,17 @@
.block_audio { .block_audio {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-bottom: 0 !important;
}
.block_image {
padding-bottom: 0 !important;
.date {
background: transparentize($color: $content_bg, $amount: 0.2);
border-radius: $radius 0 $radius 0;
color: transparentize(white, 0.2);
}
} }
.text { .text {
@ -44,7 +55,7 @@
right: 0; right: 0;
font: $font_12_regular; font: $font_12_regular;
color: transparentize($color: white, $amount: 0.8); color: transparentize($color: white, $amount: 0.8);
padding: 4px 6px 4px 4px; padding: 4px 6px 4px 6px;
border-radius: 0 0 $radius 0; border-radius: 0 0 $radius 0;
} }

32
src/components/node/CommentForm/index.tsx
View file

@ -134,6 +134,22 @@ const CommentFormUnconnected: FC<IProps> = ({
/> />
</div> </div>
{comment.temp_ids.map(
temp_id =>
statuses[temp_id] &&
statuses[temp_id].is_uploading && (
<div key={statuses[temp_id].temp_id}>{statuses[temp_id].progress}</div>
)
)}
{comment.files.map(file => {
if (file.type === UPLOAD_TYPES.AUDIO) {
return <AudioPlayer file={file} />;
}
return <div>file.name</div>;
})}
<Group horizontal className={styles.buttons}> <Group horizontal className={styles.buttons}>
<ButtonGroup> <ButtonGroup>
<Button iconLeft="image" size="small" grey iconOnly> <Button iconLeft="image" size="small" grey iconOnly>
@ -154,22 +170,6 @@ const CommentFormUnconnected: FC<IProps> = ({
</Button> </Button>
</Group> </Group>
</form> </form>
{comment.temp_ids.map(
temp_id =>
statuses[temp_id] &&
statuses[temp_id].is_uploading && (
<div key={statuses[temp_id].temp_id}>{statuses[temp_id].progress}</div>
)
)}
{comment.files.map(file => {
if (file.type === UPLOAD_TYPES.AUDIO) {
return <AudioPlayer file={file} />;
}
return <div>file.name</div>;
})}
</CommentWrapper> </CommentWrapper>
); );
}; };