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": "2.5.17",
"vue-chartjs": "3.4.0", "vue-chartjs": "3.4.0",
"vue-cropperjs": "2.2.1", "vue-cropperjs": "2.2.1",
"vue-js-modal": "1.3.25",
"vue-json-tree-view": "2.1.4", "vue-json-tree-view": "2.1.4",
"vue-loader": "15.4.1", "vue-loader": "15.4.1",
"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

@ -6,6 +6,10 @@ html
&, * &, *
cursor progress !important cursor progress !important
html
// iOS
overflow auto
body body
overflow-wrap break-word overflow-wrap break-word
@ -126,13 +130,3 @@ pre
[data-fa] [data-fa]
display inline-block 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> <template>
<div> <router-view id="app"></router-view>
<router-view id="app"></router-view>
<modal-portal/>
</div>
</template> </template>

View file

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

View file

@ -10,8 +10,7 @@ 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 VModal from 'vue-js-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,9 +29,7 @@ Vue.use(VueRouter);
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, { Vue.use(VModal);
autoMountPortal: false
});
// Register global directives // Register global directives
require('./common/views/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 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';
@ -90,7 +91,7 @@ init((launch) => {
chooseDriveFile, chooseDriveFile,
dialog: dialog(os), dialog: dialog(os),
input, input,
post: () => alert('deprecated'), post: post(os),
notify notify
})); }));
}, true); }, true);

View file

@ -75,19 +75,11 @@
<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="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> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import * as uuid from 'uuid';
import parse from '../../../../../mfm/parse'; import parse from '../../../../../mfm/parse';
import MkNoteMenu from '../../../common/views/components/note-menu.vue'; import MkNoteMenu from '../../../common/views/components/note-menu.vue';
@ -113,9 +105,7 @@ export default Vue.extend({
return { return {
conversation: [], conversation: [],
conversationFetching: false, conversationFetching: false,
replies: [], replies: []
replyFormId: uuid(),
renoteFormId: uuid()
}; };
}, },
@ -195,19 +185,15 @@ export default Vue.extend({
}, },
reply() { reply() {
this.$modal.push(this.replyFormId); (this as any).apis.post({
}, reply: this.p
});
replyFormClosed() {
this.$modal.pop();
}, },
renote() { renote() {
this.$modal.push(this.renoteFormId); (this as any).apis.post({
}, renote: this.p
});
renoteFormClosed() {
this.$modal.pop();
}, },
react() { react() {

View file

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