From 6573f36485530a37f6bdd5786477b3ad904a9cbf Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Wed, 21 Feb 2018 05:55:19 +0900 Subject: [PATCH] wip --- src/web/app/desktop/api/update-avatar.ts | 7 ++++-- src/web/app/desktop/api/update-banner.ts | 9 ++++--- .../desktop/views/components/crop-window.vue | 11 ++++++-- .../app/desktop/views/components/drive.vue | 2 +- .../views/components/progress-dialog.vue | 25 ++++++++++--------- .../views/components/settings.profile.vue | 6 +---- src/web/app/init.ts | 10 +++++--- webpack/webpack.config.ts | 6 +++++ 8 files changed, 47 insertions(+), 29 deletions(-) diff --git a/src/web/app/desktop/api/update-avatar.ts b/src/web/app/desktop/api/update-avatar.ts index eff0728348..c3e0ce14c7 100644 --- a/src/web/app/desktop/api/update-avatar.ts +++ b/src/web/app/desktop/api/update-avatar.ts @@ -8,7 +8,7 @@ export default (os: OS) => (cb, file = null) => { const w = new CropWindow({ propsData: { - file: file, + image: file, title: 'アバターとして表示する部分を選択', aspectRatio: 1 / 1 } @@ -60,7 +60,7 @@ export default (os: OS) => (cb, file = null) => { }; xhr.upload.onprogress = e => { - if (e.lengthComputable) (dialog as any).updateProgress(e.loaded, e.total); + if (e.lengthComputable) (dialog as any).update(e.loaded, e.total); }; xhr.send(data); @@ -70,6 +70,9 @@ export default (os: OS) => (cb, file = null) => { os.api('i/update', { avatar_id: file.id }).then(i => { + os.i.avatar_id = i.avatar_id; + os.i.avatar_url = i.avatar_url; + os.apis.dialog({ title: '%fa:info-circle%アバターを更新しました', text: '新しいアバターが反映されるまで時間がかかる場合があります。', diff --git a/src/web/app/desktop/api/update-banner.ts b/src/web/app/desktop/api/update-banner.ts index 5751616581..9e94dc423b 100644 --- a/src/web/app/desktop/api/update-banner.ts +++ b/src/web/app/desktop/api/update-banner.ts @@ -8,7 +8,7 @@ export default (os: OS) => (cb, file = null) => { const w = new CropWindow({ propsData: { - file: file, + image: file, title: 'バナーとして表示する部分を選択', aspectRatio: 16 / 9 } @@ -60,7 +60,7 @@ export default (os: OS) => (cb, file = null) => { }; xhr.upload.onprogress = e => { - if (e.lengthComputable) (dialog as any).updateProgress(e.loaded, e.total); + if (e.lengthComputable) (dialog as any).update(e.loaded, e.total); }; xhr.send(data); @@ -68,8 +68,11 @@ export default (os: OS) => (cb, file = null) => { const set = file => { os.api('i/update', { - avatar_id: file.id + banner_id: file.id }).then(i => { + os.i.banner_id = i.banner_id; + os.i.banner_url = i.banner_url; + os.apis.dialog({ title: '%fa:info-circle%バナーを更新しました', text: '新しいバナーが反映されるまで時間がかかる場合があります。', diff --git a/src/web/app/desktop/views/components/crop-window.vue b/src/web/app/desktop/views/components/crop-window.vue index 2ba62a3a68..27d89a9ff9 100644 --- a/src/web/app/desktop/views/components/crop-window.vue +++ b/src/web/app/desktop/views/components/crop-window.vue @@ -1,10 +1,12 @@ <template> - <mk-window ref="window" is-modal width="800px"> + <mk-window ref="window" is-modal width="800px" :can-close="false"> <span slot="header">%fa:crop%{{ title }}</span> <div class="body"> - <vue-cropper + <vue-cropper ref="cropper" :src="image.url" :view-mode="1" + :aspect-ratio="aspectRatio" + :container-style="{ width: '100%', 'max-height': '400px' }" /> </div> <div :class="$style.actions"> @@ -17,7 +19,12 @@ <script lang="ts"> import Vue from 'vue'; +import VueCropper from 'vue-cropperjs'; + export default Vue.extend({ + components: { + VueCropper + }, props: { image: { type: Object, diff --git a/src/web/app/desktop/views/components/drive.vue b/src/web/app/desktop/views/components/drive.vue index 064e4de661..aed31f2a8c 100644 --- a/src/web/app/desktop/views/components/drive.vue +++ b/src/web/app/desktop/views/components/drive.vue @@ -49,7 +49,7 @@ </div> </div> <div class="dropzone" v-if="draghover"></div> - <mk-uploader @change="onChangeUploaderUploads" @uploaded="onUploaderUploaded"/> + <mk-uploader ref="uploader" @change="onChangeUploaderUploads" @uploaded="onUploaderUploaded"/> <input ref="fileInput" type="file" accept="*/*" multiple="multiple" tabindex="-1" @change="onChangeFileInput"/> </div> </template> diff --git a/src/web/app/desktop/views/components/progress-dialog.vue b/src/web/app/desktop/views/components/progress-dialog.vue index 9a925d5b1d..ed49b19d71 100644 --- a/src/web/app/desktop/views/components/progress-dialog.vue +++ b/src/web/app/desktop/views/components/progress-dialog.vue @@ -1,17 +1,15 @@ <template> <mk-window ref="window" :is-modal="false" :can-close="false" width="500px" @closed="$destroy"> - <span to="header">{{ title }}<mk-ellipsis/></span> - <div to="content"> - <div :class="$style.body"> - <p :class="$style.init" v-if="isNaN(value)">待機中<mk-ellipsis/></p> - <p :class="$style.percentage" v-if="!isNaN(value)">{{ Math.floor((value / max) * 100) }}</p> - <progress :class="$style.progress" - v-if="!isNaN(value) && value < max" - :value="isNaN(value) ? 0 : value" - :max="max" - ></progress> - <div :class="[$style.progress, $style.waiting]" v-if="value >= max"></div> - </div> + <span slot="header">{{ title }}<mk-ellipsis/></span> + <div :class="$style.body"> + <p :class="$style.init" v-if="isNaN(value)">待機中<mk-ellipsis/></p> + <p :class="$style.percentage" v-if="!isNaN(value)">{{ Math.floor((value / max) * 100) }}</p> + <progress :class="$style.progress" + v-if="!isNaN(value) && value < max" + :value="isNaN(value) ? 0 : value" + :max="max" + ></progress> + <div :class="[$style.progress, $style.waiting]" v-if="value >= max"></div> </div> </mk-window> </template> @@ -30,6 +28,9 @@ export default Vue.extend({ update(value, max) { this.value = parseInt(value, 10); this.max = parseInt(max, 10); + }, + close() { + (this.$refs.window as any).close(); } } }); diff --git a/src/web/app/desktop/views/components/settings.profile.vue b/src/web/app/desktop/views/components/settings.profile.vue index dcc031c27a..97a382d798 100644 --- a/src/web/app/desktop/views/components/settings.profile.vue +++ b/src/web/app/desktop/views/components/settings.profile.vue @@ -45,11 +45,7 @@ export default Vue.extend({ }, methods: { updateAvatar() { - (this as any).apis.chooseDriveFile({ - multiple: false - }).then(file => { - (this as any).apis.updateAvatar(file); - }); + (this as any).apis.updateAvatar(); }, save() { (this as any).api('i/update', { diff --git a/src/web/app/init.ts b/src/web/app/init.ts index b814a18066..02c125efef 100644 --- a/src/web/app/init.ts +++ b/src/web/app/init.ts @@ -90,10 +90,12 @@ export default (callback: (launch: (api: (os: MiOS) => API) => [Vue, MiOS]) => v const launch = (api: (os: MiOS) => API) => { os.apis = api(os); Vue.mixin({ - created() { - (this as any).os = os; - (this as any).api = os.api; - (this as any).apis = os.apis; + data() { + return { + os, + api: os.api, + apis: os.apis + }; } }); diff --git a/webpack/webpack.config.ts b/webpack/webpack.config.ts index fae75059a6..3686d0b651 100644 --- a/webpack/webpack.config.ts +++ b/webpack/webpack.config.ts @@ -100,6 +100,12 @@ module.exports = Object.keys(langs).map(lang => { { loader: 'css-loader' }, { loader: 'stylus-loader' } ] + }, { + test: /\.css$/, + use: [ + { loader: 'style-loader' }, + { loader: 'css-loader' } + ] }, { test: /\.ts$/, exclude: /node_modules/,