Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-02-16 15:38:12 +09:00
parent aa433c2ac9
commit 9b8e31a035
6 changed files with 67 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/web/app/common/views/components/index.ts
View file

@ -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);

50
src/web/app/common/views/components/reactions-viewer.vue
View file

@ -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,36 +14,36 @@
</div> </div>
</template> </template>
<script lang="typescript"> <script lang="ts">
export default { import Vue from 'vue';
props: ['post'], export default Vue.extend({
computed: { props: ['post'],
reactions() { computed: {
return this.post.reaction_counts; reactions(): number {
} 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
&:empty &:empty
display none display none
> span
margin-right 8px
> mk-reaction-icon
font-size 1.4em
> span > span
margin-right 8px margin-left 4px
font-size 1.2em
> mk-reaction-icon color #444
font-size 1.4em
> span
margin-left 4px
font-size 1.2em
color #444
</style> </style>

11
src/web/app/common/views/components/uploader.vue
View file

@ -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);

4
src/web/app/desktop/views/components/post-form-window.vue
View file

@ -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;

54
src/web/app/desktop/views/components/post-form.vue
View file

@ -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,23 +82,25 @@ export default Vue.extend({
} }
}, },
mounted() { mounted() {
this.autocomplete = new Autocomplete(this.$refs.text); Vue.nextTick(() => {
this.autocomplete.attach(); this.autocomplete = new Autocomplete(this.$refs.text);
this.autocomplete.attach();
// 書きかけの投稿を復元 // 書きかけの投稿を復元
const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId]; const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
if (draft) { if (draft) {
this.text = draft.data.text; this.text = draft.data.text;
this.files = draft.data.files; this.files = draft.data.files;
if (draft.data.poll) { if (draft.data.poll) {
this.poll = true; this.poll = true;
(this.$refs.poll as any).set(draft.data.poll); (this.$refs.poll as any).set(draft.data.poll);
}
this.$emit('change-attached-media', this.files);
} }
this.$emit('change-attached-media', this.files);
}
new Sortable(this.$refs.media, { new Sortable(this.$refs.media, {
animation: 150 animation: 150
});
}); });
}, },
beforeDestroy() { beforeDestroy() {
@ -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

1
src/web/app/desktop/views/components/window.vue
View file

@ -162,6 +162,7 @@ export default Vue.extend({
}); });
setTimeout(() => { setTimeout(() => {
this.$destroy();
this.$emit('closed'); this.$emit('closed');
}, 300); }, 300);
}, },