summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/api/models/messaging-message.ts2
-rw-r--r--src/web/app/common/views/components/messaging-room.form.vue36
-rw-r--r--src/web/app/common/views/components/messaging-room.message.vue107
3 files changed, 91 insertions, 54 deletions
diff --git a/src/api/models/messaging-message.ts b/src/api/models/messaging-message.ts
index 90cf1cd71c..fcb356c5ca 100644
--- a/src/api/models/messaging-message.ts
+++ b/src/api/models/messaging-message.ts
@@ -67,7 +67,7 @@ export const pack = (
// Populate user
_message.user = await packUser(_message.user_id, me);
- if (_message.file) {
+ if (_message.file_id) {
// Populate file
_message.file = await packFile(_message.file_id);
}
diff --git a/src/web/app/common/views/components/messaging-room.form.vue b/src/web/app/common/views/components/messaging-room.form.vue
index 9b5f1522f1..48ccaa4d27 100644
--- a/src/web/app/common/views/components/messaging-room.form.vue
+++ b/src/web/app/common/views/components/messaging-room.form.vue
@@ -8,18 +8,18 @@
placeholder="%i18n:common.input-message-here%"
v-autocomplete="'text'"
></textarea>
- <div class="file" v-if="file">{{ file.name }}</div>
- <mk-uploader ref="uploader"/>
- <button class="send" @click="send" :disabled="sending" title="%i18n:common.send%">
+ <div class="file" @click="file = null" v-if="file">{{ file.name }}</div>
+ <mk-uploader ref="uploader" @uploaded="onUploaded"/>
+ <button class="send" @click="send" :disabled="!canSend || sending" title="%i18n:common.send%">
<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
</button>
- <button class="attach-from-local" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
+ <button class="attach-from-local" @click="chooseFile" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
%fa:upload%
</button>
<button class="attach-from-drive" @click="chooseFileFromDrive" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
%fa:R folder-open%
</button>
- <input name="file" type="file" accept="image/*"/>
+ <input ref="file" type="file" @change="onChangeFile"/>
</div>
</template>
@@ -39,6 +39,9 @@ export default Vue.extend({
computed: {
draftId(): string {
return this.user.id;
+ },
+ canSend(): boolean {
+ return (this.text != null && this.text != '') || this.file != null;
}
},
watch: {
@@ -88,15 +91,24 @@ export default Vue.extend({
});
},
- upload() {
- // TODO
+ onChangeFile() {
+ this.upload((this.$refs.file as any).files[0]);
+ },
+
+ upload(file) {
+ (this.$refs.uploader as any).upload(file);
+ },
+
+ onUploaded(file) {
+ this.file = file;
},
send() {
this.sending = true;
(this as any).api('messaging/messages/create', {
user_id: this.user.id,
- text: this.text
+ text: this.text ? this.text : undefined,
+ file_id: this.file ? this.file.id : undefined
}).then(message => {
this.clear();
}).catch(err => {
@@ -158,13 +170,18 @@ export default Vue.extend({
box-shadow none
background transparent
+ > .file
+ padding 8px
+ color #444
+ background #eee
+ cursor pointer
+
> .send
position absolute
bottom 0
right 0
margin 0
padding 10px 14px
- line-height 1em
font-size 1em
color #aaa
transition color 0.1s ease
@@ -222,7 +239,6 @@ export default Vue.extend({
.attach-from-drive
margin 0
padding 10px 14px
- line-height 1em
font-size 1em
font-weight normal
text-decoration none
diff --git a/src/web/app/common/views/components/messaging-room.message.vue b/src/web/app/common/views/components/messaging-room.message.vue
index 9772c7c0dd..56854ca2ff 100644
--- a/src/web/app/common/views/components/messaging-room.message.vue
+++ b/src/web/app/common/views/components/messaging-room.message.vue
@@ -3,23 +3,27 @@
<router-link class="avatar-anchor" :to="`/${message.user.username}`" :title="message.user.username" target="_blank">
<img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/>
</router-link>
- <div class="content-container">
- <div class="balloon">
+ <div class="content">
+ <div class="balloon" :data-no-text="message.text == null">
<p class="read" v-if="isMe && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p>
<button class="delete-button" v-if="isMe" title="%i18n:common.delete%">
<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
</button>
<div class="content" v-if="!message.is_deleted">
<mk-post-html class="text" v-if="message.ast" :ast="message.ast" :i="os.i"/>
- <mk-url-preview v-for="url in urls" :url="url" :key="url"/>
- <div class="image" v-if="message.file">
- <img :src="message.file.url" alt="image" :title="message.file.name"/>
+ <div class="file" v-if="message.file">
+ <a :href="message.file.url" target="_blank" :title="message.file.name">
+ <img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
+ <p v-else>{{ message.file.name }}</p>
+ </a>
</div>
</div>
<div class="content" v-if="message.is_deleted">
<p class="is-deleted">%i18n:common.tags.mk-messaging-message.deleted%</p>
</div>
</div>
+ <div></div>
+ <mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<footer>
<mk-time :time="message.created_at"/>
<template v-if="message.is_edited">%fa:pencil-alt%</template>
@@ -57,13 +61,10 @@ export default Vue.extend({
padding 10px 12px 10px 12px
background-color transparent
- &:after
- content ""
- display block
- clear both
-
> .avatar-anchor
display block
+ position absolute
+ top 10px
> .avatar
display block
@@ -75,18 +76,12 @@ export default Vue.extend({
border-radius 8px
transition all 0.1s ease
- > .content-container
- display block
- margin 0 12px
- padding 0
- max-width calc(100% - 78px)
+ > .content
> .balloon
display block
- float inherit
- margin 0
padding 0
- max-width 100%
+ max-width calc(100% - 16px)
min-height 38px
border-radius 16px
@@ -97,6 +92,9 @@ export default Vue.extend({
position absolute
top 12px
+ & + *
+ clear both
+
&:hover
> .delete-button
display block
@@ -153,28 +151,43 @@ export default Vue.extend({
font-size 1em
color rgba(0, 0, 0, 0.8)
- &, *
- user-select text
- cursor auto
-
& + .file
- &.image
- > img
- border-radius 0 0 16px 16px
+ > a
+ border-radius 0 0 16px 16px
> .file
- &.image
- > img
+ > a
+ display block
+ max-width 100%
+ max-height 512px
+ border-radius 16px
+ overflow hidden
+ text-decoration none
+
+ &:hover
+ text-decoration none
+
+ > p
+ background #ccc
+
+ > *
display block
- max-width 100%
- max-height 512px
- border-radius 16px
+ margin 0
+ width 100%
+ height 100%
+
+ > p
+ padding 30px
+ text-align center
+ color #555
+ background #ddd
+
+ > .mk-url-preview
+ margin 8px 0
> footer
display block
- clear both
- margin 0
- padding 2px
+ margin 2px 0 0 0
font-size 10px
color rgba(0, 0, 0, 0.4)
@@ -183,15 +196,19 @@ export default Vue.extend({
&:not([data-is-me])
> .avatar-anchor
- float left
+ left 12px
- > .content-container
- float left
+ > .content
+ padding-left 66px
> .balloon
+ float left
background #eee
- &:before
+ &[data-no-text]
+ background transparent
+
+ &:not([data-no-text]):before
left -14px
border-top solid 8px transparent
border-right solid 8px #eee
@@ -203,15 +220,19 @@ export default Vue.extend({
&[data-is-me]
> .avatar-anchor
- float right
+ right 12px
- > .content-container
- float right
+ > .content
+ padding-right 66px
> .balloon
+ float right
background $me-balloon-color
- &:before
+ &[data-no-text]
+ background transparent
+
+ &:not([data-no-text]):before
right -14px
left auto
border-top solid 8px transparent
@@ -232,7 +253,7 @@ export default Vue.extend({
text-align right
&[data-is-deleted]
- > .content-container
- opacity 0.5
+ > .baloon
+ opacity 0.5
</style>
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-04 11:02:46 +0000