diff options
author | marco <marcoambrosini@pm.me> | 2022-04-13 11:42:28 +0200 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2022-04-13 16:14:20 +0200 |
commit | 25de64d55c9c8be6a3a029774f0f675adc63bfea (patch) | |
tree | 06b82a47c06254687e4dac90a001d74040080831 /src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue | |
parent | 4850527c89e9172f1b7a71ad2c75519d9c38241e (diff) |
Rushing things in
Signed-off-by: marco <marcoambrosini@pm.me>
Diffstat (limited to 'src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue')
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue | 51 |
1 files changed, 34 insertions, 17 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index 0655686fe..3ed04b3c9 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue @@ -25,7 +25,7 @@ <file-preview v-bind="filePreview" :tabindex="wrapperTabIndex" class="file-preview" - :class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor }" + :class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor, 'file-preview--row-layout': rowLayout}" @click.exact="handleClick" @keydown.enter="handleClick"> <div v-if="!isLoading" @@ -63,8 +63,8 @@ </template> </Button> <ProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" /> - <div class="name-container"> - <strong v-if="shouldShowFileDetail">{{ fileDetail }}</strong> + <div v-if="shouldShowFileDetail" class="name-container"> + {{ fileDetail }} </div> </file-preview> </template> @@ -203,6 +203,16 @@ export default { type: Boolean, default: false, }, + + rowLayout: { + type: Boolean, + default: false, + }, + + isSharedItemsTab: { + type: Boolean, + default: false, + }, }, data() { return { @@ -212,6 +222,9 @@ export default { }, computed: { shouldShowFileDetail() { + if (this.isSharedItemsTab && !this.rowLayout) { + return false + } // display the file detail below the preview if the preview // is not easily recognizable, when: return ( @@ -473,6 +486,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 @@ -522,8 +536,7 @@ export default { } .image-container { - display: inline-block; - position: relative; + display: flex; &.playable { .preview { @@ -554,19 +567,11 @@ export default { } .name-container { - /* Ellipsis with 100% width */ - display: table; - table-layout: fixed; + font-weight: bold; width: 100%; - - strong { - /* As the file preview is an inline block the name is set as a block to - force it to be on its own line below the preview. */ - display: block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } &:not(.file-preview--viewer-available) { @@ -589,6 +594,18 @@ export default { width: 100%; } } + + &--row-layout { + display: flex; + align-items: center; + height: 36px; + border-radius: var(--border-radius); + padding: 2px 4px; + + .name-container { + padding: 0 4px; + } + } } .remove-file { |