Improve usability

This commit is contained in:
syuilo 2018-09-01 09:16:25 +09:00
parent 4c6fb60dd2
commit 6819eb3b4d
11 changed files with 72 additions and 45 deletions

View file

@ -216,6 +216,7 @@
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-style-loader": "4.1.2", "vue-style-loader": "4.1.2",
"vue-template-compiler": "2.5.17", "vue-template-compiler": "2.5.17",
"vue-thin-modal": "1.1.1",
"vuedraggable": "2.16.0", "vuedraggable": "2.16.0",
"vuex": "3.0.1", "vuex": "3.0.1",
"vuex-persistedstate": "2.5.4", "vuex-persistedstate": "2.5.4",

View file

@ -1,3 +1,6 @@
<template> <template>
<div>
<router-view id="app"></router-view> <router-view id="app"></router-view>
<modal-portal/>
</div>
</template> </template>

View file

@ -11,6 +11,8 @@ import VAnimateCss from 'v-animate-css';
import Element from 'element-ui'; import Element from 'element-ui';
import ElementLocaleEn from 'element-ui/lib/locale/lang/en'; import ElementLocaleEn from 'element-ui/lib/locale/lang/en';
import ElementLocaleJa from 'element-ui/lib/locale/lang/ja'; import ElementLocaleJa from 'element-ui/lib/locale/lang/ja';
import VueThinModal from 'vue-thin-modal';
import 'vue-thin-modal/dist/vue-thin-modal.css';
import App from './app.vue'; import App from './app.vue';
import checkForUpdate from './common/scripts/check-for-update'; import checkForUpdate from './common/scripts/check-for-update';
@ -30,6 +32,9 @@ Vue.use(VModal);
Vue.use(TreeView); Vue.use(TreeView);
Vue.use(VAnimateCss); Vue.use(VAnimateCss);
Vue.use(Element, { locale: elementLocale }); Vue.use(Element, { locale: elementLocale });
Vue.use(VueThinModal, {
autoMountPortal: false
});
// Register global directives // Register global directives
require('./common/views/directives'); require('./common/views/directives');

View file

@ -1,24 +0,0 @@
import PostForm from '../views/components/post-form.vue';
export default (os) => (opts) => {
const o = opts || {};
const app = document.getElementById('app');
app.style.display = 'none';
function recover() {
app.style.display = 'block';
}
const vm = new PostForm({
parent: os.app,
propsData: {
reply: o.reply,
renote: o.renote
}
}).$mount();
vm.$once('cancel', recover);
vm.$once('posted', recover);
document.body.appendChild(vm.$el);
(vm as any).focus();
};

View file

@ -14,7 +14,6 @@ import chooseDriveFolder from './api/choose-drive-folder';
import chooseDriveFile from './api/choose-drive-file'; import chooseDriveFile from './api/choose-drive-file';
import dialog from './api/dialog'; import dialog from './api/dialog';
import input from './api/input'; import input from './api/input';
import post from './api/post';
import notify from './api/notify'; import notify from './api/notify';
import MkIndex from './views/pages/index.vue'; import MkIndex from './views/pages/index.vue';
@ -91,7 +90,7 @@ init((launch) => {
chooseDriveFile, chooseDriveFile,
dialog: dialog(os), dialog: dialog(os),
input, input,
post: post(os), post: () => alert('deprecated'),
notify notify
})); }));
}, true); }, true);

View file

@ -17,3 +17,13 @@ body
display flex display flex
flex-direction column flex-direction column
min-height 100% min-height 100%
.modal-backdrop
z-index 10000 !important
.modal-content-wrapper
z-index 10001 !important
.modal-content
padding 0 !important
background-color transparent !important

View file

@ -48,7 +48,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-drive-file-chooser .mk-drive-file-chooser
position fixed position fixed
z-index 2048 z-index 20000
top 0 top 0
left 0 left 0
width 100% width 100%

View file

@ -75,6 +75,13 @@
<div class="replies" v-if="!compact"> <div class="replies" v-if="!compact">
<x-sub v-for="note in replies" :key="note.id" :note="note"/> <x-sub v-for="note in replies" :key="note.id" :note="note"/>
</div> </div>
<modal name="replyForm">
<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
</modal>
<modal name="renoteForm">
<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
</modal>
</div> </div>
</template> </template>
@ -116,9 +123,11 @@ export default Vue.extend({
this.note.mediaIds.length == 0 && this.note.mediaIds.length == 0 &&
this.note.poll == null); this.note.poll == null);
}, },
p(): any { p(): any {
return this.isRenote ? this.note.renote : this.note; return this.isRenote ? this.note.renote : this.note;
}, },
reactionsCount(): number { reactionsCount(): number {
return this.p.reactionCounts return this.p.reactionCounts
? Object.keys(this.p.reactionCounts) ? Object.keys(this.p.reactionCounts)
@ -126,6 +135,7 @@ export default Vue.extend({
.reduce((a, b) => a + b) .reduce((a, b) => a + b)
: 0; : 0;
}, },
urls(): string[] { urls(): string[] {
if (this.p.text) { if (this.p.text) {
const ast = parse(this.p.text); const ast = parse(this.p.text);
@ -180,16 +190,23 @@ export default Vue.extend({
this.conversation = conversation.reverse(); this.conversation = conversation.reverse();
}); });
}, },
reply() { reply() {
(this as any).apis.post({ this.$modal.push('replyForm');
reply: this.p
});
}, },
replyFormClosed() {
this.$modal.pop();
},
renote() { renote() {
(this as any).apis.post({ this.$modal.push('renoteForm');
renote: this.p
});
}, },
renoteFormClosed() {
this.$modal.pop();
},
react() { react() {
(this as any).os.new(MkReactionPicker, { (this as any).os.new(MkReactionPicker, {
source: this.$refs.reactButton, source: this.$refs.reactButton,
@ -198,6 +215,7 @@ export default Vue.extend({
big: true big: true
}); });
}, },
menu() { menu() {
(this as any).os.new(MkNoteMenu, { (this as any).os.new(MkNoteMenu, {
source: this.$refs.menuButton, source: this.$refs.menuButton,

View file

@ -60,6 +60,13 @@
</footer> </footer>
</div> </div>
</article> </article>
<modal name="replyForm">
<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
</modal>
<modal name="renoteForm">
<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
</modal>
</div> </div>
</template> </template>
@ -195,15 +202,19 @@ export default Vue.extend({
}, },
reply() { reply() {
(this as any).apis.post({ this.$modal.push('replyForm');
reply: this.p },
});
replyFormClosed() {
this.$modal.pop();
}, },
renote() { renote() {
(this as any).apis.post({ this.$modal.push('renoteForm');
renote: this.p },
});
renoteFormClosed() {
this.$modal.pop();
}, },
react() { react() {

View file

@ -293,9 +293,6 @@ export default Vue.extend({
viaMobile: viaMobile viaMobile: viaMobile
}).then(data => { }).then(data => {
this.$emit('posted'); this.$emit('posted');
this.$nextTick(() => {
this.$destroy();
});
}).catch(err => { }).catch(err => {
this.posting = false; this.posting = false;
}); });
@ -309,7 +306,6 @@ export default Vue.extend({
cancel() { cancel() {
this.$emit('cancel'); this.$emit('cancel');
this.$destroy();
}, },
kao() { kao() {

View file

@ -42,6 +42,10 @@
<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/> <mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
</div> </div>
</main> </main>
<modal name="postForm">
<mk-post-form @posted="postFormClosed" @cancel="postFormClosed"/>
</modal>
</mk-ui> </mk-ui>
</template> </template>
@ -107,7 +111,11 @@ export default Vue.extend({
methods: { methods: {
fn() { fn() {
(this as any).apis.post(); this.$modal.push('postForm');
},
postFormClosed() {
this.$modal.pop();
}, },
saveSrc() { saveSrc() {