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

View file

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

View file

@ -1,5 +1,5 @@
<template> <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> <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-renote-form ref="form" :note="note" @posted="onPosted" @canceled="onCanceled" v-hotkey.global="keymap"/>
</mk-window> </mk-window>
@ -9,7 +9,18 @@
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: ['note'], props: {
note: {
type: Object,
required: true
},
animation: {
type: Boolean,
required: false,
default: true
}
},
computed: { computed: {
keymap(): any { keymap(): any {

View file

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