diff options
author | Louis Chemineau <louis@chmn.me> | 2023-01-19 14:40:32 +0100 |
---|---|---|
committer | Louis Chemineau <louis@chmn.me> | 2023-01-19 14:40:32 +0100 |
commit | ba96d644e0d3c544f1a30f70a274d01af0aae2c5 (patch) | |
tree | ecaaf9cd88102ea28080dbe9fba8b6dead9919ac | |
parent | e7714a0efe3bda21220bba94d13477168748f42f (diff) |
Fix posting attachments
Signed-off-by: Louis Chemineau <louis@chmn.me>
-rw-r--r-- | src/components/Composer/Composer.vue | 15 | ||||
-rw-r--r-- | src/components/PostAttachment.vue | 42 | ||||
-rw-r--r-- | src/components/TimelineEntry.vue | 14 | ||||
-rw-r--r-- | src/components/TimelinePost.vue | 8 |
4 files changed, 56 insertions, 23 deletions
diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue index 9ef2c37a..b5f8a9ac 100644 --- a/src/components/Composer/Composer.vue +++ b/src/components/Composer/Composer.vue @@ -402,11 +402,12 @@ export default { this.$refs.fileUploadInput.click() }, handleFileChange(event) { - const previewUrl = URL.createObjectURL(event.target.files[0]) - this.previewUrls.push({ - description: '', - url: previewUrl, - result: event.target.files[0], + event.target.files.forEach((file) => { + this.previewUrls.push({ + description: '', + url: URL.createObjectURL(file), + result: file, + }) }) }, removeAttachment(idx) { @@ -481,8 +482,8 @@ export default { formData.append('type', this.type) for (const preview of this.previewUrls) { // TODO send the summary and other props too - formData.append('attachments', preview.result) - formData.append('attachmentDescriptions', preview.description) + formData.append('attachments[]', preview.result) + formData.append('attachmentDescriptions[]', preview.description) } if (this.replyTo) { formData.append('replyTo', this.replyTo.id) diff --git a/src/components/PostAttachment.vue b/src/components/PostAttachment.vue index 6a7644c3..4c8ab6f0 100644 --- a/src/components/PostAttachment.vue +++ b/src/components/PostAttachment.vue @@ -1,9 +1,15 @@ <template> - <masonry> - <div v-for="(item, index) in attachments" :key="index"> - <img :src="imageUrl(item)" @click="showModal(index)"> + <div class="post-attachments"> + <div v-for="(item, index) in attachments" + :key="index" + class="post-attachment" + @click="showModal(index)"> + <img v-if="item.mimeType.startsWith('image/')" :src="imageUrl(item)"> + <div v-else> + {{ item }} + </div> </div> - <NcModal v-show="modal" + <NcModal v-if="modal" :has-previous="current > 0" :has-next="current < (attachments.length - 1)" size="full" @@ -14,11 +20,10 @@ <canvas ref="modalCanvas" /> </div> </NcModal> - </masonry> + </div> </template> <script> - import serverData from '../mixins/serverData.js' import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' import { generateUrl } from '@nextcloud/router' @@ -101,3 +106,28 @@ export default { }, } </script> +<style lang="scss" scoped> +.post-attachments { + margin-top: 12px; + width: 100%; + display: flex; + gap: 12px; + overflow-x: scroll; + + .post-attachment { + height: 100px; + object-fit: cover; + border-radius: var(--border-radius-large); + overflow: hidden; + + > * { + cursor: pointer; + } + + img { + width: 100%; + height: 100%; + } + } +} +</style> diff --git a/src/components/TimelineEntry.vue b/src/components/TimelineEntry.vue index 2ce2baec..04941109 100644 --- a/src/components/TimelineEntry.vue +++ b/src/components/TimelineEntry.vue @@ -27,8 +27,8 @@ <UserEntry v-if="item.type === 'SocialAppNotification' && item.details.actor" :key="item.details.actor.id" :item="item.details.actor" /> <template v-else> <div class="wrapper"> - <TimelineAvatar :item="entryContent" /> - <TimelinePost class="message" + <TimelineAvatar class="entry__avatar" :item="entryContent" /> + <TimelinePost class="entry__content" :item="entryContent" :parent-announce="isBoost" /> </div> @@ -130,9 +130,19 @@ export default { display: flex; margin: auto; padding: 0; + &:focus { background-color: rgba(47, 47, 47, 0.068); } + + .entry__avatar { + flex-shrink: 0; + } + + .entry__content { + flex-grow: 1; + width: 0; + } } .notification-header { diff --git a/src/components/TimelinePost.vue b/src/components/TimelinePost.vue index 05809747..9c3b095d 100644 --- a/src/components/TimelinePost.vue +++ b/src/components/TimelinePost.vue @@ -220,7 +220,6 @@ export default { font-size: 15px; line-height: 1.6em; position: relative; - width: 100%; ::v-deep a.widget-default { text-decoration: none !important; @@ -276,13 +275,6 @@ export default { } } - span { - /* opacity: 0.5; */ - } - .entry-content { - display: flex; - } - .post-header { display: flex; flex-direction: row; |