This commit is contained in:
syuilo
parent
3affa40461
commit
d3639b2df4
3 changed files with 91 additions and 54 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue