This commit is contained in:
syuilo 2018-02-21 05:55:19 +09:00
parent 9c0521316d
commit 6573f36485
8 changed files with 47 additions and 29 deletions

View file

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

View file

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

View file

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

View file

@ -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>

View file

@ -1,7 +1,6 @@
<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">
<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>
@ -12,7 +11,6 @@
></progress>
<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();
}
}
});

View file

@ -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', {

View file

@ -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
};
}
});

View file

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