Improve usability

This commit is contained in:
syuilo 2018-09-18 14:50:13 +09:00
parent dba04cc59c
commit 5184a07cf2
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
4 changed files with 50 additions and 18 deletions

View file

@ -40,12 +40,12 @@
</div>
<footer>
<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
<button class="replyButton" @click="reply" title="%i18n:@reply%">
<button class="replyButton" @click="reply()" title="%i18n:@reply%">
<template v-if="p.reply">%fa:reply-all%</template>
<template v-else>%fa:reply%</template>
<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
</button>
<button class="renoteButton" @click="renote" title="%i18n:@renote%">
<button class="renoteButton" @click="renote()" title="%i18n:@renote%">
%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
</button>
<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react()" ref="reactButton" title="%i18n:@add-reaction%">
@ -113,9 +113,9 @@ export default Vue.extend({
computed: {
keymap(): any {
return {
'r|left': this.reply,
'r|left': () => this.reply(true),
'a|plus': () => this.react(true),
'q|right': this.renote,
'q|right': () => this.renote(true),
'up|k|shift+tab': this.focusBefore,
'down|j|tab': this.focusAfter,
'1': () => this.reactDirectly('like'),
@ -240,15 +240,17 @@ export default Vue.extend({
}
},
reply() {
reply(viaKeyboard = false) {
(this as any).os.new(MkPostFormWindow, {
reply: this.p
reply: this.p,
animation: !viaKeyboard
}).$once('closed', this.focus);
},
renote() {
renote(viaKeyboard = false) {
(this as any).os.new(MkRenoteFormWindow, {
note: this.p
note: this.p,
animation: !viaKeyboard
}).$once('closed', this.focus);
},

View file

@ -1,5 +1,5 @@
<template>
<mk-window class="mk-post-form-window" ref="window" is-modal @closed="onWindowClosed">
<mk-window class="mk-post-form-window" ref="window" is-modal @closed="onWindowClosed" :animation="animation">
<span slot="header" class="mk-post-form-window--header">
<span class="icon" v-if="geo">%fa:map-marker-alt%</span>
<span v-if="!reply">%i18n:@note%</span>
@ -25,7 +25,19 @@
import Vue from 'vue';
export default Vue.extend({
props: ['reply'],
props: {
reply: {
type: Object,
required: true
},
animation: {
type: Boolean,
required: false,
default: true
}
},
data() {
return {
uploadings: [],
@ -33,11 +45,13 @@ export default Vue.extend({
geo: null
};
},
mounted() {
this.$nextTick(() => {
(this.$refs.form as any).focus();
});
},
methods: {
onChangeUploadings(files) {
this.uploadings = files;

View file

@ -1,5 +1,5 @@
<template>
<mk-window ref="window" is-modal @closed="onWindowClosed">
<mk-window ref="window" is-modal @closed="onWindowClosed" :animation="animation">
<span slot="header" :class="$style.header">%fa:retweet%%i18n:@title%</span>
<mk-renote-form ref="form" :note="note" @posted="onPosted" @canceled="onCanceled" v-hotkey.global="keymap"/>
</mk-window>
@ -9,7 +9,18 @@
import Vue from 'vue';
export default Vue.extend({
props: ['note'],
props: {
note: {
type: Object,
required: true
},
animation: {
type: Boolean,
required: false,
default: true
}
},
computed: {
keymap(): any {

View file

@ -76,6 +76,11 @@ export default Vue.extend({
name: {
type: String,
default: null
},
animation: {
type: Boolean,
required: false,
default: true
}
},
@ -142,7 +147,7 @@ export default Vue.extend({
anime({
targets: bg,
opacity: 1,
duration: 100,
duration: this.animation ? 100 : 0,
easing: 'linear'
});
}
@ -152,7 +157,7 @@ export default Vue.extend({
targets: main,
opacity: 1,
scale: [1.1, 1],
duration: 200,
duration: this.animation ? 200 : 0,
easing: 'easeOutQuad'
});
@ -160,7 +165,7 @@ export default Vue.extend({
setTimeout(() => {
this.$emit('opened');
}, 300);
}, this.animation ? 300 : 0);
},
close() {
@ -174,7 +179,7 @@ export default Vue.extend({
anime({
targets: bg,
opacity: 0,
duration: 300,
duration: this.animation ? 300 : 0,
easing: 'linear'
});
}
@ -185,14 +190,14 @@ export default Vue.extend({
targets: main,
opacity: 0,
scale: 0.8,
duration: 300,
duration: this.animation ? 300 : 0,
easing: [0.5, -0.5, 1, 0.5]
});
setTimeout(() => {
this.$emit('closed');
this.destroyDom();
}, 300);
}, this.animation ? 300 : 0);
},
popout() {