forked from mirror/misskey
Merge branch 'vue-#972' of https://github.com/syuilo/misskey into vue-#972
This commit is contained in:
commit
6e49746970
@ -6,8 +6,10 @@ import forkit from './forkit.vue';
|
|||||||
import nav from './nav.vue';
|
import nav from './nav.vue';
|
||||||
import postHtml from './post-html';
|
import postHtml from './post-html';
|
||||||
import reactionIcon from './reaction-icon.vue';
|
import reactionIcon from './reaction-icon.vue';
|
||||||
|
import reactionsViewer from './reactions-viewer.vue';
|
||||||
import time from './time.vue';
|
import time from './time.vue';
|
||||||
import images from './images.vue';
|
import images from './images.vue';
|
||||||
|
import uploader from './uploader.vue';
|
||||||
|
|
||||||
Vue.component('mk-signin', signin);
|
Vue.component('mk-signin', signin);
|
||||||
Vue.component('mk-signup', signup);
|
Vue.component('mk-signup', signup);
|
||||||
@ -15,5 +17,7 @@ Vue.component('mk-forkit', forkit);
|
|||||||
Vue.component('mk-nav', nav);
|
Vue.component('mk-nav', nav);
|
||||||
Vue.component('mk-post-html', postHtml);
|
Vue.component('mk-post-html', postHtml);
|
||||||
Vue.component('mk-reaction-icon', reactionIcon);
|
Vue.component('mk-reaction-icon', reactionIcon);
|
||||||
|
Vue.component('mk-reactions-viewer', reactionsViewer);
|
||||||
Vue.component('mk-time', time);
|
Vue.component('mk-time', time);
|
||||||
Vue.component('mk-images', images);
|
Vue.component('mk-images', images);
|
||||||
|
Vue.component('mk-uploader', uploader);
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="mk-reactions-viewer">
|
||||||
<template v-if="reactions">
|
<template v-if="reactions">
|
||||||
<span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{{ reactions.like }}</span></span>
|
<span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{{ reactions.like }}</span></span>
|
||||||
<span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{{ reactions.love }}</span></span>
|
<span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{{ reactions.love }}</span></span>
|
||||||
@ -14,20 +14,20 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="typescript">
|
<script lang="ts">
|
||||||
export default {
|
import Vue from 'vue';
|
||||||
|
export default Vue.extend({
|
||||||
props: ['post'],
|
props: ['post'],
|
||||||
computed: {
|
computed: {
|
||||||
reactions() {
|
reactions(): number {
|
||||||
return this.post.reaction_counts;
|
return this.post.reaction_counts;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
:scope
|
.mk-reactions-viewer
|
||||||
display block
|
|
||||||
border-top dashed 1px #eee
|
border-top dashed 1px #eee
|
||||||
border-bottom dashed 1px #eee
|
border-bottom dashed 1px #eee
|
||||||
margin 4px 0
|
margin 4px 0
|
||||||
|
@ -19,6 +19,8 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
import { apiUrl } from '../../../config';
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -34,14 +36,15 @@ export default Vue.extend({
|
|||||||
const ctx = {
|
const ctx = {
|
||||||
id: id,
|
id: id,
|
||||||
name: file.name || 'untitled',
|
name: file.name || 'untitled',
|
||||||
progress: undefined
|
progress: undefined,
|
||||||
|
img: undefined
|
||||||
};
|
};
|
||||||
|
|
||||||
this.uploads.push(ctx);
|
this.uploads.push(ctx);
|
||||||
this.$emit('change', this.uploads);
|
this.$emit('change', this.uploads);
|
||||||
|
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onload = e => {
|
reader.onload = (e: any) => {
|
||||||
ctx.img = e.target.result;
|
ctx.img = e.target.result;
|
||||||
};
|
};
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
@ -53,8 +56,8 @@ export default Vue.extend({
|
|||||||
if (folder) data.append('folder_id', folder);
|
if (folder) data.append('folder_id', folder);
|
||||||
|
|
||||||
const xhr = new XMLHttpRequest();
|
const xhr = new XMLHttpRequest();
|
||||||
xhr.open('POST', _API_URL_ + '/drive/files/create', true);
|
xhr.open('POST', apiUrl + '/drive/files/create', true);
|
||||||
xhr.onload = e => {
|
xhr.onload = (e: any) => {
|
||||||
const driveFile = JSON.parse(e.target.response);
|
const driveFile = JSON.parse(e.target.response);
|
||||||
|
|
||||||
this.$emit('uploaded', driveFile);
|
this.$emit('uploaded', driveFile);
|
||||||
|
@ -34,8 +34,8 @@ export default Vue.extend({
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onChangeUploadings(media) {
|
onChangeUploadings(files) {
|
||||||
this.uploadings = media;
|
this.uploadings = files;
|
||||||
},
|
},
|
||||||
onChangeMedia(media) {
|
onChangeMedia(media) {
|
||||||
this.media = media;
|
this.media = media;
|
||||||
|
@ -22,12 +22,12 @@
|
|||||||
<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false"/>
|
<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false"/>
|
||||||
</div>
|
</div>
|
||||||
<mk-uploader @uploaded="attachMedia" @change="onChangeUploadings"/>
|
<mk-uploader @uploaded="attachMedia" @change="onChangeUploadings"/>
|
||||||
<button ref="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" @click="selectFile">%fa:upload%</button>
|
<button class="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" @click="chooseFile">%fa:upload%</button>
|
||||||
<button ref="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" @click="selectFileFromDrive">%fa:cloud%</button>
|
<button class="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" @click="chooseFileFromDrive">%fa:cloud%</button>
|
||||||
<button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" @click="kao">%fa:R smile%</button>
|
<button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" @click="kao">%fa:R smile%</button>
|
||||||
<button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" @click="poll = true">%fa:chart-pie%</button>
|
<button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" @click="poll = true">%fa:chart-pie%</button>
|
||||||
<p class="text-count" :class="{ over: text.length > 1000 }">{{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - text.length) }}</p>
|
<p class="text-count" :class="{ over: text.length > 1000 }">{{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - text.length) }}</p>
|
||||||
<button :class="{ posting }" ref="submit" :disabled="!canPost" @click="post">
|
<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
|
||||||
{{ posting ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }}<mk-ellipsis v-if="posting"/>
|
{{ posting ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }}<mk-ellipsis v-if="posting"/>
|
||||||
</button>
|
</button>
|
||||||
<input ref="file" type="file" accept="image/*" multiple="multiple" tabindex="-1" @change="onChangeFile"/>
|
<input ref="file" type="file" accept="image/*" multiple="multiple" tabindex="-1" @change="onChangeFile"/>
|
||||||
@ -82,6 +82,7 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
Vue.nextTick(() => {
|
||||||
this.autocomplete = new Autocomplete(this.$refs.text);
|
this.autocomplete = new Autocomplete(this.$refs.text);
|
||||||
this.autocomplete.attach();
|
this.autocomplete.attach();
|
||||||
|
|
||||||
@ -100,6 +101,7 @@ export default Vue.extend({
|
|||||||
new Sortable(this.$refs.media, {
|
new Sortable(this.$refs.media, {
|
||||||
animation: 150
|
animation: 150
|
||||||
});
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
this.autocomplete.detach();
|
this.autocomplete.detach();
|
||||||
@ -145,7 +147,7 @@ export default Vue.extend({
|
|||||||
this.text = '';
|
this.text = '';
|
||||||
this.files = [];
|
this.files = [];
|
||||||
this.poll = false;
|
this.poll = false;
|
||||||
this.$emit('change-attached-media');
|
this.$emit('change-attached-media', this.files);
|
||||||
},
|
},
|
||||||
onKeydown(e) {
|
onKeydown(e) {
|
||||||
if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey)) this.post();
|
if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey)) this.post();
|
||||||
@ -187,7 +189,7 @@ export default Vue.extend({
|
|||||||
// (ドライブの)ファイルだったら
|
// (ドライブの)ファイルだったら
|
||||||
if (obj.type == 'file') {
|
if (obj.type == 'file') {
|
||||||
this.files.push(obj.file);
|
this.files.push(obj.file);
|
||||||
this.$emit('change-attached-media');
|
this.$emit('change-attached-media', this.files);
|
||||||
}
|
}
|
||||||
} catch (e) { }
|
} catch (e) { }
|
||||||
},
|
},
|
||||||
@ -260,7 +262,7 @@ export default Vue.extend({
|
|||||||
|
|
||||||
> .content
|
> .content
|
||||||
|
|
||||||
[ref='text']
|
textarea
|
||||||
display block
|
display block
|
||||||
padding 12px
|
padding 12px
|
||||||
margin 0
|
margin 0
|
||||||
@ -364,20 +366,20 @@ export default Vue.extend({
|
|||||||
height 16px
|
height 16px
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
> mk-poll-editor
|
> .mk-poll-editor
|
||||||
background lighten($theme-color, 98%)
|
background lighten($theme-color, 98%)
|
||||||
border solid 1px rgba($theme-color, 0.1)
|
border solid 1px rgba($theme-color, 0.1)
|
||||||
border-top none
|
border-top none
|
||||||
border-radius 0 0 4px 4px
|
border-radius 0 0 4px 4px
|
||||||
transition border-color .3s ease
|
transition border-color .3s ease
|
||||||
|
|
||||||
> mk-uploader
|
> .mk-uploader
|
||||||
margin 8px 0 0 0
|
margin 8px 0 0 0
|
||||||
padding 8px
|
padding 8px
|
||||||
border solid 1px rgba($theme-color, 0.2)
|
border solid 1px rgba($theme-color, 0.2)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
[ref='file']
|
input[type='file']
|
||||||
display none
|
display none
|
||||||
|
|
||||||
.text-count
|
.text-count
|
||||||
@ -393,7 +395,7 @@ export default Vue.extend({
|
|||||||
&.over
|
&.over
|
||||||
color #ec3828
|
color #ec3828
|
||||||
|
|
||||||
[ref='submit']
|
.submit
|
||||||
display block
|
display block
|
||||||
position absolute
|
position absolute
|
||||||
bottom 16px
|
bottom 16px
|
||||||
@ -457,8 +459,8 @@ export default Vue.extend({
|
|||||||
from {background-position: 0 0;}
|
from {background-position: 0 0;}
|
||||||
to {background-position: -64px 32px;}
|
to {background-position: -64px 32px;}
|
||||||
|
|
||||||
[ref='upload']
|
.upload
|
||||||
[ref='drive']
|
.drive
|
||||||
.kao
|
.kao
|
||||||
.poll
|
.poll
|
||||||
display inline-block
|
display inline-block
|
||||||
|
@ -162,6 +162,7 @@ export default Vue.extend({
|
|||||||
});
|
});
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
this.$destroy();
|
||||||
this.$emit('closed');
|
this.$emit('closed');
|
||||||
}, 300);
|
}, 300);
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user