monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

#372

Browse source
This commit is contained in:
syuilo 2018-02-27 02:10:52 +09:00
parent 3affa40461
commit d3639b2df4
3 changed files with 91 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/api/models/messaging-message.ts
View file

@ -67,7 +67,7 @@ export const pack = (
// Populate user // Populate user
_message.user = await packUser(_message.user_id, me); _message.user = await packUser(_message.user_id, me);
if (_message.file) { if (_message.file_id) {
// Populate file // Populate file
_message.file = await packFile(_message.file_id); _message.file = await packFile(_message.file_id);
} }

36
src/web/app/common/views/components/messaging-room.form.vue
View file

@ -8,18 +8,18 @@
placeholder="%i18n:common.input-message-here%" placeholder="%i18n:common.input-message-here%"
v-autocomplete="'text'" v-autocomplete="'text'"
></textarea> ></textarea>
<div class="file" v-if="file">{{ file.name }}</div> <div class="file" @click="file = null" v-if="file">{{ file.name }}</div>
<mk-uploader ref="uploader"/> <mk-uploader ref="uploader" @uploaded="onUploaded"/>
<button class="send" @click="send" :disabled="sending" title="%i18n:common.send%"> <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> <template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
</button> </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% %fa:upload%
</button> </button>
<button class="attach-from-drive" @click="chooseFileFromDrive" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%"> <button class="attach-from-drive" @click="chooseFileFromDrive" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
%fa:R folder-open% %fa:R folder-open%
</button> </button>
<input name="file" type="file" accept="image/*"/> <input ref="file" type="file" @change="onChangeFile"/>
</div> </div>
</template> </template>
@ -39,6 +39,9 @@ export default Vue.extend({
computed: { computed: {
draftId(): string { draftId(): string {
return this.user.id; return this.user.id;
},
canSend(): boolean {
return (this.text != null && this.text != '') || this.file != null;
} }
}, },
watch: { watch: {
@ -88,15 +91,24 @@ export default Vue.extend({
}); });
}, },
upload() { onChangeFile() {
// TODO this.upload((this.$refs.file as any).files[0]);
},
upload(file) {
(this.$refs.uploader as any).upload(file);
},
onUploaded(file) {
this.file = file;
}, },
send() { send() {
this.sending = true; this.sending = true;
(this as any).api('messaging/messages/create', { (this as any).api('messaging/messages/create', {
user_id: this.user.id, user_id: this.user.id,
text: this.text text: this.text ? this.text : undefined,
file_id: this.file ? this.file.id : undefined
}).then(message => { }).then(message => {
this.clear(); this.clear();
}).catch(err => { }).catch(err => {
@ -158,13 +170,18 @@ export default Vue.extend({
box-shadow none box-shadow none
background transparent background transparent
> .file
padding 8px
color #444
background #eee
cursor pointer
> .send > .send
position absolute position absolute
bottom 0 bottom 0
right 0 right 0
margin 0 margin 0
padding 10px 14px padding 10px 14px
line-height 1em
font-size 1em font-size 1em
color #aaa color #aaa
transition color 0.1s ease transition color 0.1s ease
@ -222,7 +239,6 @@ export default Vue.extend({
.attach-from-drive .attach-from-drive
margin 0 margin 0
padding 10px 14px padding 10px 14px
line-height 1em
font-size 1em font-size 1em
font-weight normal font-weight normal
text-decoration none text-decoration none

97
src/web/app/common/views/components/messaging-room.message.vue
View file

@ -3,23 +3,27 @@
<router-link class="avatar-anchor" :to="`/${message.user.username}`" :title="message.user.username" target="_blank"> <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=""/> <img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/>
</router-link> </router-link>
<div class="content-container"> <div class="content">
<div class="balloon"> <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> <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%"> <button class="delete-button" v-if="isMe" title="%i18n:common.delete%">
<img src="/assets/desktop/messaging/delete.png" alt="Delete"/> <img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
</button> </button>
<div class="content" v-if="!message.is_deleted"> <div class="content" v-if="!message.is_deleted">
<mk-post-html class="text" v-if="message.ast" :ast="message.ast" :i="os.i"/> <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="file" v-if="message.file">
<div class="image" v-if="message.file"> <a :href="message.file.url" target="_blank" :title="message.file.name">
<img :src="message.file.url" alt="image" :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> </div>
<div class="content" v-if="message.is_deleted"> <div class="content" v-if="message.is_deleted">
<p class="is-deleted">%i18n:common.tags.mk-messaging-message.deleted%</p> <p class="is-deleted">%i18n:common.tags.mk-messaging-message.deleted%</p>
</div> </div>
</div> </div>
<div></div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<footer> <footer>
<mk-time :time="message.created_at"/> <mk-time :time="message.created_at"/>
<template v-if="message.is_edited">%fa:pencil-alt%</template> <template v-if="message.is_edited">%fa:pencil-alt%</template>
@ -57,13 +61,10 @@ export default Vue.extend({
padding 10px 12px 10px 12px padding 10px 12px 10px 12px
background-color transparent background-color transparent
&:after
content ""
display block
clear both
> .avatar-anchor > .avatar-anchor
display block display block
position absolute
top 10px
> .avatar > .avatar
display block display block
@ -75,18 +76,12 @@ export default Vue.extend({
border-radius 8px border-radius 8px
transition all 0.1s ease transition all 0.1s ease
> .content-container > .content
display block
margin 0 12px
padding 0
max-width calc(100% - 78px)
> .balloon > .balloon
display block display block
float inherit
margin 0
padding 0 padding 0
max-width 100% max-width calc(100% - 16px)
min-height 38px min-height 38px
border-radius 16px border-radius 16px
@ -97,6 +92,9 @@ export default Vue.extend({
position absolute position absolute
top 12px top 12px
& + *
clear both
&:hover &:hover
> .delete-button > .delete-button
display block display block
@ -153,28 +151,43 @@ export default Vue.extend({
font-size 1em font-size 1em
color rgba(0, 0, 0, 0.8) color rgba(0, 0, 0, 0.8)
&, *
user-select text
cursor auto
& + .file & + .file
&.image > a
> img
border-radius 0 0 16px 16px border-radius 0 0 16px 16px
> .file > .file
&.image > a
> img
display block display block
max-width 100% max-width 100%
max-height 512px max-height 512px
border-radius 16px border-radius 16px
overflow hidden
text-decoration none
&:hover
text-decoration none
> p
background #ccc
> *
display block
margin 0
width 100%
height 100%
> p
padding 30px
text-align center
color #555
background #ddd
> .mk-url-preview
margin 8px 0
> footer > footer
display block display block
clear both margin 2px 0 0 0
margin 0
padding 2px
font-size 10px font-size 10px
color rgba(0, 0, 0, 0.4) color rgba(0, 0, 0, 0.4)
@ -183,15 +196,19 @@ export default Vue.extend({
&:not([data-is-me]) &:not([data-is-me])
> .avatar-anchor > .avatar-anchor
float left left 12px
> .content-container > .content
float left padding-left 66px
> .balloon > .balloon
float left
background #eee background #eee
&:before &[data-no-text]
background transparent
&:not([data-no-text]):before
left -14px left -14px
border-top solid 8px transparent border-top solid 8px transparent
border-right solid 8px #eee border-right solid 8px #eee
@ -203,15 +220,19 @@ export default Vue.extend({
&[data-is-me] &[data-is-me]
> .avatar-anchor > .avatar-anchor
float right right 12px
> .content-container > .content
float right padding-right 66px
> .balloon > .balloon
float right
background $me-balloon-color background $me-balloon-color
&:before &[data-no-text]
background transparent
&:not([data-no-text]):before
right -14px right -14px
left auto left auto
border-top solid 8px transparent border-top solid 8px transparent
@ -232,7 +253,7 @@ export default Vue.extend({
text-align right text-align right
&[data-is-deleted] &[data-is-deleted]
> .content-container > .baloon
opacity 0.5 opacity 0.5
</style> </style>