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/,