wip
This commit is contained in:
syuilo
parent
9c0521316d
commit
6573f36485
|
|
@ -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: '新しいアバターが反映されるまで時間がかかる場合があります。',
|
||||
|
|
|
|||
|
|
@ -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: '新しいバナーが反映されるまで時間がかかる場合があります。',
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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', {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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/,
|
||||
|
|
|
|||
Loading…
Reference in a new issue