kopia lustrzana https://github.com/nextcloud/social
Merge pull request #1588 from nextcloud/artonge/fix/posting_attachments
Fix posting attachmentspull/1593/head
Louis
GitHub
commit
c973a1663f
|
|
@ -124,14 +124,10 @@ class LocalController extends Controller {
|
|||
*
|
||||
* @NoAdminRequired
|
||||
*/
|
||||
public function postCreate(string $content = '', $to = null, string $type = null, ?string $replyTo = null, $attachments = null, ?string $hashtags = null): DataResponse {
|
||||
public function postCreate(string $content = '', array $to = [], string $type = null, ?string $replyTo = null, $attachments = null, array $hashtags = []): DataResponse {
|
||||
$content = $content ?: '';
|
||||
$to = is_string($to) ? [$to] : $to;
|
||||
$to = $to ?? [];
|
||||
$replyTo = $replyTo ?? '';
|
||||
$type = $type ?? Stream::TYPE_PUBLIC;
|
||||
$hashtags = $hashtags === '' ? [] : $hashtags;
|
||||
$hashtags = $hashtags ?? [];
|
||||
$attachments = $attachments ?? [];
|
||||
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@
|
|||
<div class="new-post" data-id="">
|
||||
<input id="file-upload"
|
||||
ref="fileUploadInput"
|
||||
multiple
|
||||
type="file"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
|
|
@ -83,6 +82,7 @@
|
|||
<div class="options">
|
||||
<NcButton v-tooltip="t('social', 'Add attachment')"
|
||||
type="tertiary"
|
||||
:disabled="previewUrls.length >= 1"
|
||||
:aria-label="t('social', 'Add attachment')"
|
||||
@click.prevent="clickImportInput">
|
||||
<template #icon>
|
||||
|
|
@ -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) {
|
||||
|
|
@ -421,7 +422,6 @@ export default {
|
|||
}
|
||||
this.post += this.$twemoji.parse(emoji) + ' '
|
||||
this.$refs.composerInput.innerHTML += this.$twemoji.parse(emoji) + ' '
|
||||
this.$refs.emojiPicker.hide()
|
||||
},
|
||||
togglePopoverMenu() {
|
||||
this.menuOpened = !this.menuOpened
|
||||
|
|
@ -476,14 +476,12 @@ export default {
|
|||
|
||||
const formData = new FormData()
|
||||
formData.append('content', content)
|
||||
formData.append('to', to)
|
||||
formData.append('hashtags', hashtags)
|
||||
to.forEach(to => formData.append('to[]', to))
|
||||
hashtags.forEach(hashtag => formData.append('hashtags[]', hashtag))
|
||||
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)
|
||||
}
|
||||
this.previewUrls.forEach(preview => formData.append('attachments[]', preview.result))
|
||||
this.previewUrls.forEach(preview => formData.append('attachmentDescriptions[]', preview.description))
|
||||
|
||||
if (this.replyTo) {
|
||||
formData.append('replyTo', this.replyTo.id)
|
||||
}
|
||||
|
|
@ -556,122 +554,146 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.new-post {
|
||||
padding: 10px;
|
||||
background-color: var(--color-main-background);
|
||||
position: sticky;
|
||||
z-index: 100;
|
||||
margin-bottom: 10px;
|
||||
top: 0;
|
||||
.new-post {
|
||||
padding: 10px;
|
||||
background-color: var(--color-main-background);
|
||||
position: sticky;
|
||||
z-index: 100;
|
||||
margin-bottom: 10px;
|
||||
top: 0;
|
||||
|
||||
&-form {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
margin-left: 39px;
|
||||
&__emoji-picker {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-post-author {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.post-author {
|
||||
padding: 6px;
|
||||
|
||||
.post-author-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.post-author-id {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reply-to {
|
||||
background-image: url(../../../img/reply.svg);
|
||||
background-position: 8px 12px;
|
||||
background-repeat: no-repeat;
|
||||
margin-left: 39px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
background-color: var(--color-background-hover);
|
||||
border-radius: var(--border-radius-large);
|
||||
padding: 5px;
|
||||
padding-left: 30px;
|
||||
|
||||
.reply-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.close-button {
|
||||
margin-left: auto;
|
||||
opacity: .7;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
height: 30px;
|
||||
width: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
width: 100%;
|
||||
padding-right: 44px;
|
||||
min-height: 70px;
|
||||
min-width: 2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
[contenteditable=true]:empty:before {
|
||||
content: attr(placeholder);
|
||||
display: block; /* For Firefox */
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
input[type=submit].inline {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin: 0;
|
||||
padding: 13px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.emptySpace {
|
||||
flex-grow:1;
|
||||
}
|
||||
|
||||
.popovermenu-parent {
|
||||
&-form {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
margin-left: 39px;
|
||||
&__emoji-picker {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.popovermenu {
|
||||
top: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-picker-wrapper {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2;
|
||||
}
|
||||
.new-post-author {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
/* Tribute-specific styles TODO: properly scope component css */
|
||||
.tribute-container {
|
||||
.post-author {
|
||||
padding: 6px;
|
||||
|
||||
.post-author-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.post-author-id {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reply-to {
|
||||
background-image: url(../../../img/reply.svg);
|
||||
background-position: 8px 12px;
|
||||
background-repeat: no-repeat;
|
||||
margin-left: 39px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
background-color: var(--color-background-hover);
|
||||
border-radius: var(--border-radius-large);
|
||||
padding: 5px;
|
||||
padding-left: 30px;
|
||||
|
||||
.reply-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.close-button {
|
||||
margin-left: auto;
|
||||
opacity: .7;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
height: 30px;
|
||||
width: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
width: 100%;
|
||||
padding-right: 44px;
|
||||
min-height: 70px;
|
||||
min-width: 2px;
|
||||
display: block;
|
||||
|
||||
:deep(.mention) {
|
||||
color: var(--color-primary-element);
|
||||
background-color: var(--color-background-dark);
|
||||
border-radius: 5px;
|
||||
padding-top: 1px;
|
||||
padding-left: 2px;
|
||||
padding-bottom: 1px;
|
||||
padding-right: 5px;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[contenteditable=true]:empty:before {
|
||||
content: attr(placeholder);
|
||||
display: block; /* For Firefox */
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
input[type=submit].inline {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin: 0;
|
||||
padding: 13px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.emptySpace {
|
||||
flex-grow:1;
|
||||
}
|
||||
|
||||
.popovermenu-parent {
|
||||
position: relative;
|
||||
}
|
||||
.popovermenu {
|
||||
top: 55px;
|
||||
}
|
||||
|
||||
.attachment-picker-wrapper {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2;
|
||||
}
|
||||
|
||||
.hashtag {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
/* Tribute-specific styles TODO: properly scope component css */
|
||||
.tribute-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -694,43 +716,42 @@ export default {
|
|||
border-radius: 4px;
|
||||
background-clip: padding-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
color: var(--color-text);
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
li {
|
||||
color: var(--color-text);
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.highlight,
|
||||
&:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-text);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 10px;
|
||||
margin-left: -3px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.no-match {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight,
|
||||
&:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-text);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 10px;
|
||||
margin-left: -3px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.no-match {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.menu-highlighted {
|
||||
|
|
@ -750,28 +771,5 @@ export default {
|
|||
color: var(--color-primary-text) !important;
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
.message .mention {
|
||||
color: var(--color-primary-element);
|
||||
background-color: var(--color-background-dark);
|
||||
border-radius: 5px;
|
||||
padding-top: 1px;
|
||||
padding-left: 2px;
|
||||
padding-bottom: 1px;
|
||||
padding-right: 5px;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.hashtag {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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,29 @@ 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;
|
||||
flex-shrink: 0;
|
||||
|
||||
> * {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue