Better post form

This commit is contained in:
syuilo 2018-09-01 20:47:49 +09:00
parent 70ac668474
commit 5209a584a2
11 changed files with 184 additions and 83 deletions

View file

@ -210,12 +210,12 @@
"vue": "2.5.17",
"vue-chartjs": "3.4.0",
"vue-cropperjs": "2.2.1",
"vue-js-modal": "1.3.25",
"vue-json-tree-view": "2.1.4",
"vue-loader": "15.4.1",
"vue-router": "3.0.1",
"vue-style-loader": "4.1.2",
"vue-template-compiler": "2.5.17",
"vue-thin-modal": "1.1.1",
"vuedraggable": "2.16.0",
"vuex": "3.0.1",
"vuex-persistedstate": "2.5.4",

View file

@ -6,6 +6,10 @@ html
&, *
cursor progress !important
html
// iOS
overflow auto
body
overflow-wrap break-word
@ -126,13 +130,3 @@ pre
[data-fa]
display inline-block
.modal-backdrop
z-index 10000 !important
.modal-content-wrapper
z-index 10001 !important
.modal-content
padding 0 !important
background-color transparent !important

View file

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

View file

@ -38,11 +38,9 @@
<mk-welcome-timeline :max="20"/>
</div>
<modal name="signup">
<div :class="$style.modal">
<modal name="signup" width="500px" height="auto" scrollable>
<header :class="$style.signupFormHeader">%i18n:@signup%</header>
<mk-signup :class="$style.signupForm"/>
</div>
</modal>
</div>
</template>
@ -91,10 +89,10 @@ export default Vue.extend({
this.$refs.pointer.style.left = x.left + 'px';
},
signup() {
this.$modal.push('signup');
this.$modal.show('signup');
},
signin() {
this.$modal.push('signin');
this.$modal.show('signin');
},
dark() {
this.$store.commit('device/set', {
@ -268,10 +266,6 @@ root(isDark)
</style>
<style lang="stylus" module>
.modal
width 500px
background #fff !important
.signupForm
padding 24px 48px 48px 48px

View file

@ -10,8 +10,7 @@ import VAnimateCss from 'v-animate-css';
import Element from 'element-ui';
import ElementLocaleEn from 'element-ui/lib/locale/lang/en';
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 VModal from 'vue-js-modal';
import App from './app.vue';
import checkForUpdate from './common/scripts/check-for-update';
@ -30,9 +29,7 @@ Vue.use(VueRouter);
Vue.use(TreeView);
Vue.use(VAnimateCss);
Vue.use(Element, { locale: elementLocale });
Vue.use(VueThinModal, {
autoMountPortal: false
});
Vue.use(VModal);
// Register global directives
require('./common/views/directives');

View file

@ -0,0 +1,23 @@
import PostForm from '../views/components/post-form-dialog.vue';
export default (os) => (opts) => {
const o = opts || {};
document.documentElement.style.overflow = 'hidden';
function recover() {
document.documentElement.style.overflow = 'auto';
}
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,6 +14,7 @@ import chooseDriveFolder from './api/choose-drive-folder';
import chooseDriveFile from './api/choose-drive-file';
import dialog from './api/dialog';
import input from './api/input';
import post from './api/post';
import notify from './api/notify';
import MkIndex from './views/pages/index.vue';
@ -90,7 +91,7 @@ init((launch) => {
chooseDriveFile,
dialog: dialog(os),
input,
post: () => alert('deprecated'),
post: post(os),
notify
}));
}, true);

View file

@ -75,19 +75,11 @@
<div class="replies" v-if="!compact">
<x-sub v-for="note in replies" :key="note.id" :note="note"/>
</div>
<modal :name="replyFormId">
<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
</modal>
<modal :name="renoteFormId">
<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
</modal>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import * as uuid from 'uuid';
import parse from '../../../../../mfm/parse';
import MkNoteMenu from '../../../common/views/components/note-menu.vue';
@ -113,9 +105,7 @@ export default Vue.extend({
return {
conversation: [],
conversationFetching: false,
replies: [],
replyFormId: uuid(),
renoteFormId: uuid()
replies: []
};
},
@ -195,19 +185,15 @@ export default Vue.extend({
},
reply() {
this.$modal.push(this.replyFormId);
},
replyFormClosed() {
this.$modal.pop();
(this as any).apis.post({
reply: this.p
});
},
renote() {
this.$modal.push(this.renoteFormId);
},
renoteFormClosed() {
this.$modal.pop();
(this as any).apis.post({
renote: this.p
});
},
react() {

View file

@ -60,19 +60,11 @@
</footer>
</div>
</article>
<modal :name="replyFormId">
<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
</modal>
<modal :name="renoteFormId">
<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
</modal>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import * as uuid from 'uuid';
import parse from '../../../../../mfm/parse';
import MkNoteMenu from '../../../common/views/components/note-menu.vue';
@ -90,9 +82,7 @@ export default Vue.extend({
return {
showContent: false,
connection: null,
connectionId: null,
replyFormId: uuid(),
renoteFormId: uuid()
connectionId: null
};
},
@ -205,19 +195,15 @@ export default Vue.extend({
},
reply() {
this.$modal.push(this.replyFormId);
},
replyFormClosed() {
this.$modal.pop();
(this as any).apis.post({
reply: this.p
});
},
renote() {
this.$modal.push(this.renoteFormId);
},
renoteFormClosed() {
this.$modal.pop();
(this as any).apis.post({
renote: this.p
});
},
react() {

View file

@ -0,0 +1,131 @@
<template>
<div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
<div class="bg" ref="bg" @click="onBgClick"></div>
<div class="main" ref="main" @click.self="onBgClick">
<mk-post-form ref="form"
:reply="reply"
:renote="renote"
:initial-text="initialText"
:instant="instant"
@posted="onPosted"
@cancel="onCanceled"/>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import * as anime from 'animejs';
export default Vue.extend({
props: {
reply: {
type: Object,
required: false
},
renote: {
type: Object,
required: false
},
initialText: {
type: String,
required: false
},
instant: {
type: Boolean,
required: false,
default: false
}
},
mounted() {
this.$nextTick(() => {
(this.$refs.bg as any).style.pointerEvents = 'auto';
anime({
targets: this.$refs.bg,
opacity: 1,
duration: 100,
easing: 'linear'
});
anime({
targets: this.$refs.main,
opacity: 1,
translateY: [-16, 0],
duration: 300,
easing: 'easeOutQuad'
});
});
},
methods: {
focus() {
this.$refs.form.focus();
},
close() {
(this.$refs.bg as any).style.pointerEvents = 'none';
anime({
targets: this.$refs.bg,
opacity: 0,
duration: 300,
easing: 'linear'
});
(this.$refs.main as any).style.pointerEvents = 'none';
anime({
targets: this.$refs.main,
opacity: 0,
translateY: 16,
duration: 300,
easing: 'easeOutQuad',
complete: () => this.$destroy()
});
},
onBgClick() {
this.$emit('cancel');
this.close();
},
onPosted() {
this.$emit('posted');
this.close();
},
onCanceled() {
this.$emit('cancel');
this.close();
}
}
});
</script>
<style lang="stylus" scoped>
.ulveipglmagnxfgvitaxyszerjwiqmwl
> .bg
display block
position fixed
z-index 10000
top 0
left 0
width 100%
height 100%
background rgba(#000, 0.7)
opacity 0
pointer-events none
> .main
display block
position fixed
z-index 10000
top 0
left 0
right 0
height 100%
overflow auto
margin 0 auto 0 auto
opacity 0
transform translateY(-16px)
</style>

View file

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