From 6819eb3b4da43665de8e159d774b3f2325ddfe0b Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 1 Sep 2018 09:16:25 +0900 Subject: [PATCH] Improve usability --- package.json | 1 + src/client/app/app.vue | 5 +++- src/client/app/init.ts | 5 ++++ src/client/app/mobile/api/post.ts | 24 --------------- src/client/app/mobile/script.ts | 3 +- src/client/app/mobile/style.styl | 10 +++++++ .../views/components/drive-file-chooser.vue | 2 +- .../mobile/views/components/note-detail.vue | 30 +++++++++++++++---- .../app/mobile/views/components/note.vue | 23 ++++++++++---- .../app/mobile/views/components/post-form.vue | 4 --- src/client/app/mobile/views/pages/home.vue | 10 ++++++- 11 files changed, 72 insertions(+), 45 deletions(-) delete mode 100644 src/client/app/mobile/api/post.ts diff --git a/package.json b/package.json index a461d8076a..31e60260ba 100644 --- a/package.json +++ b/package.json @@ -216,6 +216,7 @@ "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", diff --git a/src/client/app/app.vue b/src/client/app/app.vue index 7a46e7dea0..011eb14661 100644 --- a/src/client/app/app.vue +++ b/src/client/app/app.vue @@ -1,3 +1,6 @@ diff --git a/src/client/app/init.ts b/src/client/app/init.ts index cf97957400..dd31f07475 100644 --- a/src/client/app/init.ts +++ b/src/client/app/init.ts @@ -11,6 +11,8 @@ 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 App from './app.vue'; import checkForUpdate from './common/scripts/check-for-update'; @@ -30,6 +32,9 @@ Vue.use(VModal); Vue.use(TreeView); Vue.use(VAnimateCss); Vue.use(Element, { locale: elementLocale }); +Vue.use(VueThinModal, { + autoMountPortal: false +}); // Register global directives require('./common/views/directives'); diff --git a/src/client/app/mobile/api/post.ts b/src/client/app/mobile/api/post.ts deleted file mode 100644 index 15b2f6b691..0000000000 --- a/src/client/app/mobile/api/post.ts +++ /dev/null @@ -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(); -}; diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts index 5b9d45462a..edc2b35529 100644 --- a/src/client/app/mobile/script.ts +++ b/src/client/app/mobile/script.ts @@ -14,7 +14,6 @@ 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'; @@ -91,7 +90,7 @@ init((launch) => { chooseDriveFile, dialog: dialog(os), input, - post: post(os), + post: () => alert('deprecated'), notify })); }, true); diff --git a/src/client/app/mobile/style.styl b/src/client/app/mobile/style.styl index df8f4a8fae..f78146f8b8 100644 --- a/src/client/app/mobile/style.styl +++ b/src/client/app/mobile/style.styl @@ -17,3 +17,13 @@ body display flex flex-direction column 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 diff --git a/src/client/app/mobile/views/components/drive-file-chooser.vue b/src/client/app/mobile/views/components/drive-file-chooser.vue index d95d5fa223..56e41e31d8 100644 --- a/src/client/app/mobile/views/components/drive-file-chooser.vue +++ b/src/client/app/mobile/views/components/drive-file-chooser.vue @@ -48,7 +48,7 @@ export default Vue.extend({