Skip to content

fix(shares): reserve space for file preview while it's loading #11149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Antreesy merged 3 commits into from
Dec 11, 2023
Merged

fix(shares): reserve space for file preview while it's loading #11149

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
80ecb79
fix(shares): reserve space for file preview while it's loading
Antreesy Dec 8, 2023
bd420a7
fix(shares): fix preview size for uploaded non-media files
Antreesy Dec 8, 2023
2f3bc3c
fix(shares): fix anchor size and jump after preview loaded
Antreesy Dec 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
fix(shares): fix anchor size and jump after preview loaded 
Signed-off-by: Maksim Sukharev <[email protected]>
  • Loading branch information
@Antreesy
Antreesy committed Dec 11, 2023
commit 2f3bc3c78d9604a90658be24ca0be4eff458de03
10 changes: 4 additions & 6 deletions src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -584,10 +584,7 @@ export default {
.file-preview {
position: relative;
min-width: 0;
width: 100%;
/* The file preview can not be a block; otherwise it would fill the whole
width of the container and the loading icon would not be centered on the
image. */
max-width: 100%;
display: inline-block;

border-radius: 16px;
Expand Down Expand Up @@ -615,7 +612,7 @@ export default {

.loading {
display: inline-block;
width: 100%;
min-width: 32px;
background-color: var(--color-background-dark);
}

Expand Down Expand Up @@ -650,7 +647,8 @@ export default {
}

.image-container {
display: flex;
position: relative;
display: inline-flex;
height: 100%;

&.playable {
Expand Down