wip

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: '新しいアバターが反映されるまで時間がかかる場合があります。',

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: '新しいバナーが反映されるまで時間がかかる場合があります。',

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,

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>

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>
+	<span slot="header">{{ title }}<mk-ellipsis/></span>
-	<div to="content">
+	<div :class="$style.body">
-		<div :class="$style.body">
+		<p :class="$style.init" v-if="isNaN(value)">待機中<mk-ellipsis/></p>
-			<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>
-			<p :class="$style.percentage" v-if="!isNaN(value)">{{ Math.floor((value / max) * 100) }}</p>
+		<progress :class="$style.progress"
-			<progress :class="$style.progress"
+			v-if="!isNaN(value) && value < max"
-				v-if="!isNaN(value) && value < max"
+			:value="isNaN(value) ? 0 : value"
-				:value="isNaN(value) ? 0 : value"
+			:max="max"
-				:max="max"
+		></progress>
-			></progress>
+		<div :class="[$style.progress, $style.waiting]" v-if="value >= max"></div>
-			<div :class="[$style.progress, $style.waiting]" v-if="value >= max"></div>
-		</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();
 		}
 	}
 });

src/web/app/desktop/views/components/settings.profile.vue

@@ -45,11 +45,7 @@ export default Vue.extend({
 	},
 	methods: {
 		updateAvatar() {
-			(this as any).apis.chooseDriveFile({
+			(this as any).apis.updateAvatar();
-				multiple: false
-			}).then(file => {
-				(this as any).apis.updateAvatar(file);
-			});
 		},
 		save() {
 			(this as any).api('i/update', {

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() {
+				data() {
-					(this as any).os = os;
+					return {
-					(this as any).api = os.api;
+						os,
-					(this as any).apis = os.apis;
+						api: os.api,
+						apis: os.apis
+					};
 				}
 			});
 

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