From 52c2d7c794c9580f7d2ba4cd5b8aee76e541f8f6 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Thu, 22 Feb 2018 02:37:04 +0900 Subject: [PATCH] wip --- src/web/app/mobile/views/components/index.ts | 5 +++++ .../app/mobile/views/components/post-form.vue | 22 +++++++++++-------- .../{ui-header.vue => ui.header.vue} | 7 +++--- .../components/{ui-nav.vue => ui.nav.vue} | 22 +++++++++---------- src/web/app/mobile/views/components/ui.vue | 16 ++++++++++---- src/web/app/mobile/views/pages/drive.vue | 3 ++- 6 files changed, 47 insertions(+), 28 deletions(-) create mode 100644 src/web/app/mobile/views/components/index.ts rename src/web/app/mobile/views/components/{ui-header.vue => ui.header.vue} (97%) rename src/web/app/mobile/views/components/{ui-nav.vue => ui.nav.vue} (77%) diff --git a/src/web/app/mobile/views/components/index.ts b/src/web/app/mobile/views/components/index.ts new file mode 100644 index 000000000..f628dee88 --- /dev/null +++ b/src/web/app/mobile/views/components/index.ts @@ -0,0 +1,5 @@ +import Vue from 'vue'; + +import ui from './ui.vue'; + +Vue.component('mk-ui', ui); diff --git a/src/web/app/mobile/views/components/post-form.vue b/src/web/app/mobile/views/components/post-form.vue index 6c41a73b5..bba669229 100644 --- a/src/web/app/mobile/views/components/post-form.vue +++ b/src/web/app/mobile/views/components/post-form.vue @@ -3,27 +3,27 @@ <header> <button class="cancel" @click="cancel">%fa:times%</button> <div> - <span v-if="refs.text" class="text-count { over: refs.text.value.length > 1000 }">{ 1000 - refs.text.value.length }</span> + <span v-if="refs.text" class="text-count" :class="{ over: refs.text.value.length > 1000 }">{{ 1000 - refs.text.value.length }}</span> <button class="submit" @click="post">%i18n:mobile.tags.mk-post-form.submit%</button> </div> </header> <div class="form"> - <mk-post-preview v-if="opts.reply" post={ opts.reply }/> - <textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ opts.reply ? '%i18n:mobile.tags.mk-post-form.reply-placeholder%' : '%i18n:mobile.tags.mk-post-form.post-placeholder%' }></textarea> - <div class="attaches" show={ files.length != 0 }> + <mk-post-preview v-if="reply" :post="reply"/> + <textarea v-model="text" :disabled="wait" :placeholder="reply ? '%i18n:mobile.tags.mk-post-form.reply-placeholder%' : '%i18n:mobile.tags.mk-post-form.post-placeholder%'"></textarea> + <div class="attaches" v-show="files.length != 0"> <ul class="files" ref="attaches"> - <li class="file" each={ files } data-id={ id }> - <div class="img" style="background-image: url({ url + '?thumbnail&size=128' })" @click="removeFile"></div> + <li class="file" v-for="file in files"> + <div class="img" :style="`background-image: url(${file.url}?thumbnail&size=128)`" @click="removeFile(file)"></div> </li> </ul> </div> - <mk-poll-editor v-if="poll" ref="poll" ondestroy={ onPollDestroyed }/> + <mk-poll-editor v-if="poll" ref="poll"/> <mk-uploader @uploaded="attachMedia" @change="onChangeUploadings"/> <button ref="upload" @click="selectFile">%fa:upload%</button> <button ref="drive" @click="selectFileFromDrive">%fa:cloud%</button> <button class="kao" @click="kao">%fa:R smile%</button> <button class="poll" @click="addPoll">%fa:chart-pie%</button> - <input ref="file" type="file" accept="image/*" multiple="multiple" onchange={ changeFile }/> + <input ref="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/> </div> </div> </template> @@ -31,9 +31,10 @@ <script lang="ts"> import Vue from 'vue'; import Sortable from 'sortablejs'; -import getKao from '../../common/scripts/get-kao'; +import getKao from '../../../common/scripts/get-kao'; export default Vue.extend({ + props: ['reply'], data() { return { posting: false, @@ -77,6 +78,9 @@ export default Vue.extend({ cancel() { this.$emit('cancel'); this.$destroy(); + }, + kao() { + this.text += getKao(); } } }); diff --git a/src/web/app/mobile/views/components/ui-header.vue b/src/web/app/mobile/views/components/ui.header.vue similarity index 97% rename from src/web/app/mobile/views/components/ui-header.vue rename to src/web/app/mobile/views/components/ui.header.vue index 85fb45780..3479bd90b 100644 --- a/src/web/app/mobile/views/components/ui-header.vue +++ b/src/web/app/mobile/views/components/ui.header.vue @@ -9,7 +9,9 @@ <h1> <slot>Misskey</slot> </h1> - <button v-if="func" @click="func" v-html="funcIcon"></button> + <button v-if="func" @click="func"> + <slot name="funcIcon"></slot> + </button> </div> </div> </div> @@ -19,11 +21,10 @@ import Vue from 'vue'; export default Vue.extend({ - props: ['func', 'funcIcon'], + props: ['func'], data() { return { func: null, - funcIcon: null, hasUnreadNotifications: false, hasUnreadMessagingMessages: false, connection: null, diff --git a/src/web/app/mobile/views/components/ui-nav.vue b/src/web/app/mobile/views/components/ui.nav.vue similarity index 77% rename from src/web/app/mobile/views/components/ui-nav.vue rename to src/web/app/mobile/views/components/ui.nav.vue index 1767e6224..020be1f3d 100644 --- a/src/web/app/mobile/views/components/ui-nav.vue +++ b/src/web/app/mobile/views/components/ui.nav.vue @@ -2,28 +2,28 @@ <div class="mk-ui-nav" :style="{ display: isOpen ? 'block' : 'none' }"> <div class="backdrop" @click="parent.toggleDrawer"></div> <div class="body"> - <a class="me" v-if="os.isSignedIn" href={ '/' + I.username }> - <img class="avatar" src={ I.avatar_url + '?thumbnail&size=128' } alt="avatar"/> - <p class="name">{ I.name }</p> - </a> + <router-link class="me" v-if="os.isSignedIn" :to="`/${os.i.username}`"> + <img class="avatar" :src="`${os.i.avatar_url}?thumbnail&size=128`" alt="avatar"/> + <p class="name">{{ os.i.name }}</p> + </router-link> <div class="links"> <ul> - <li><a href="/">%fa:home%%i18n:mobile.tags.mk-ui-nav.home%%fa:angle-right%</a></li> - <li><a href="/i/notifications">%fa:R bell%%i18n:mobile.tags.mk-ui-nav.notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</a></li> - <li><a href="/i/messaging">%fa:R comments%%i18n:mobile.tags.mk-ui-nav.messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</a></li> + <li><router-link href="/">%fa:home%%i18n:mobile.tags.mk-ui-nav.home%%fa:angle-right%</router-link></li> + <li><router-link href="/i/notifications">%fa:R bell%%i18n:mobile.tags.mk-ui-nav.notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li> + <li><router-link href="/i/messaging">%fa:R comments%%i18n:mobile.tags.mk-ui-nav.messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li> </ul> <ul> - <li><a href={ _CH_URL_ } target="_blank">%fa:tv%%i18n:mobile.tags.mk-ui-nav.ch%%fa:angle-right%</a></li> - <li><a href="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-ui-nav.drive%%fa:angle-right%</a></li> + <li><a :href="chUrl" target="_blank">%fa:tv%%i18n:mobile.tags.mk-ui-nav.ch%%fa:angle-right%</a></li> + <li><router-link href="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-ui-nav.drive%%fa:angle-right%</router-link></li> </ul> <ul> <li><a @click="search">%fa:search%%i18n:mobile.tags.mk-ui-nav.search%%fa:angle-right%</a></li> </ul> <ul> - <li><a href="/i/settings">%fa:cog%%i18n:mobile.tags.mk-ui-nav.settings%%fa:angle-right%</a></li> + <li><router-link href="/i/settings">%fa:cog%%i18n:mobile.tags.mk-ui-nav.settings%%fa:angle-right%</router-link></li> </ul> </div> - <a href={ aboutUrl }><p class="about">%i18n:mobile.tags.mk-ui-nav.about%</p></a> + <a :href="aboutUrl"><p class="about">%i18n:mobile.tags.mk-ui-nav.about%</p></a> </div> </div> </template> diff --git a/src/web/app/mobile/views/components/ui.vue b/src/web/app/mobile/views/components/ui.vue index a07c9ed5a..b936971ad 100644 --- a/src/web/app/mobile/views/components/ui.vue +++ b/src/web/app/mobile/views/components/ui.vue @@ -1,9 +1,10 @@ <template> <div class="mk-ui"> - <mk-ui-header :func="func" :func-icon="funcIcon"> + <x-header :func="func"> + <template slot="funcIcon"><slot name="funcIcon"></slot></template> <slot name="header"></slot> - </mk-ui-header> - <mk-ui-nav :is-open="isDrawerOpening"/> + </x-header> + <x-nav :is-open="isDrawerOpening"/> <div class="content"> <slot></slot> </div> @@ -13,8 +14,15 @@ <script lang="ts"> import Vue from 'vue'; +import XHeader from './ui.header.vue'; +import XNav from './ui.nav.vue'; + export default Vue.extend({ - props: ['title', 'func', 'funcIcon'], + components: { + XHeader, + XNav + }, + props: ['title', 'func'], data() { return { isDrawerOpening: false, diff --git a/src/web/app/mobile/views/pages/drive.vue b/src/web/app/mobile/views/pages/drive.vue index c4c22448c..1f442c224 100644 --- a/src/web/app/mobile/views/pages/drive.vue +++ b/src/web/app/mobile/views/pages/drive.vue @@ -1,10 +1,11 @@ <template> -<mk-ui :func="fn" func-icon="%fa:ellipsis-h%"> +<mk-ui :func="fn"> <span slot="header"> <template v-if="folder">%fa:R folder-open%{{ folder.name }}</template> <template v-if="file"><mk-file-type-icon class="icon"/>{{ file.name }}</template> <template v-else>%fa:cloud%%i18n:mobile.tags.mk-drive-page.drive%</template> </span> + <template slot="funcIcon">%fa:ellipsis-h%</template> <mk-drive ref="browser" :init-folder="folder"