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

fixed image uploads

This commit is contained in:
Fedor Katurov 2019-10-09 19:08:36 +07:00
parent 287b3efed2
commit 1974feb042
4 changed files with 30 additions and 47 deletions

View file

@ -7,9 +7,9 @@ $cols: $content_width / $cell;
.grid_test { .grid_test {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));
grid-template-rows: 360px; grid-template-rows: 360px;
grid-auto-rows: 256px; grid-auto-rows: $cell;
grid-auto-flow: row dense; grid-auto-flow: row dense;
grid-column-gap: $grid_line; grid-column-gap: $grid_line;
grid-row-gap: $grid_line; grid-row-gap: $grid_line;

View file

@ -41,7 +41,6 @@ const CommentFormUnconnected: FC<IProps> = ({
nodeSetCommentData, nodeSetCommentData,
uploadUploadFiles, uploadUploadFiles,
}) => { }) => {
// const [data, setData] = useState<IComment>({ ...EMPTY_COMMENT });
const onInputChange = useCallback( const onInputChange = useCallback(
event => { event => {
event.preventDefault(); event.preventDefault();
@ -101,37 +100,16 @@ const CommentFormUnconnected: FC<IProps> = ({
const filtered_temps = temp_ids.filter( const filtered_temps = temp_ids.filter(
temp_id => temp_id =>
statuses[temp_id] && statuses[temp_id] &&
statuses[temp_id].uuid && (!statuses[temp_id].uuid || !added_files.some(file => file.id === statuses[temp_id].uuid))
!added_files.some(file => file.id === statuses[temp_id].uuid)
); );
console.log({ temp_ids, added_files }); if (added_files.length) {
// if (added_files.length) {
nodeSetCommentData(id, { nodeSetCommentData(id, {
...comment_data[id], ...comment_data[id],
temp_ids: filtered_temps, temp_ids: filtered_temps,
files: [...comment_data[id].files, ...added_files], files: [...comment_data[id].files, ...added_files],
}); });
// } }
// if (filtered_temps.length) {
// leaving only currently uploading files
// nodeSetCommentData(id, assocPath(['temp_ids'], filtered_temps, comment_data[id]));
// }
// console.log({
// statuses,
// temp_ids,
// filtered_temps,
// added_files,
// });
// Object.entries(statuses).forEach(([id, status]) => {
// if (temp.includes(id) && !!status.uuid && files[status.uuid]) {
// onFileAdd(files[status.uuid]);
// setTemp(temp.filter(el => el !== id));
// }
// });
}, [statuses, files]); }, [statuses, files]);
const comment = comment_data[id]; const comment = comment_data[id];
@ -149,7 +127,7 @@ const CommentFormUnconnected: FC<IProps> = ({
</div> </div>
<Group horizontal className={styles.buttons}> <Group horizontal className={styles.buttons}>
<input type="file" onInput={onInputChange} /> <input type="file" onInput={onInputChange} multiple />
<Filler /> <Filler />

View file

@ -5,11 +5,11 @@
} }
.comments { .comments {
flex: 3 1; flex: 2 1;
} }
.panel { .panel {
flex: 1 3; flex: 1 2;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;

View file

@ -1,7 +1,8 @@
@import "colors"; @import 'colors';
$cell: 256px; $cell: 320px;
$content_width: 1100px; $grid_line: 4px;
$content_width: $cell * 4 + $grid_line * 3;
$gap: 10px; $gap: 10px;
$spc: $gap * 2; $spc: $gap * 2;
@ -9,8 +10,6 @@ $radius: 6px;
$cell_radius: 4px; $cell_radius: 4px;
$panel_radius: $radius; $panel_radius: $radius;
$grid_line: 4px;
$input_height: 36px; $input_height: 36px;
$input_radius: $radius; $input_radius: $radius;
$info_height: 24px; $info_height: 24px;
@ -25,9 +24,9 @@ $medium: 500;
$light: 300; $light: 300;
$extra_light: 200; $extra_light: 200;
$font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, $font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
"Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
"Noto Color Emoji"; 'Noto Color Emoji';
$font_48_semibold: $semibold 48px $font; $font_48_semibold: $semibold 48px $font;
$font_24_bold: $bold 24px $font; $font_24_bold: $bold 24px $font;
@ -89,7 +88,7 @@ $input_shadow_filled: $input_shadow;
position: $position; position: $position;
&::after { &::after {
content: " "; content: ' ';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -107,7 +106,9 @@ $input_shadow_filled: $input_shadow;
} }
@mixin tablet { @mixin tablet {
@media (max-width: 599px) { @content; } @media (max-width: 599px) {
@content;
}
} }
@mixin vertical_at_tablet { @mixin vertical_at_tablet {
@ -117,8 +118,12 @@ $input_shadow_filled: $input_shadow;
& > * { & > * {
margin: $gap/2 0 !important; margin: $gap/2 0 !important;
&:first-child { margin-top: 0 !important; } &:first-child {
&:last-child { margin-bottom: 0 !important; } margin-top: 0 !important;
}
&:last-child {
margin-bottom: 0 !important;
}
} }
} }
} }