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({ const w = new CropWindow({
propsData: { propsData: {
file: file, image: file,
title: 'アバターとして表示する部分を選択', title: 'アバターとして表示する部分を選択',
aspectRatio: 1 / 1 aspectRatio: 1 / 1
} }
@ -60,7 +60,7 @@ export default (os: OS) => (cb, file = null) => {
}; };
xhr.upload.onprogress = e => { 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); xhr.send(data);
@ -70,6 +70,9 @@ export default (os: OS) => (cb, file = null) => {
os.api('i/update', { os.api('i/update', {
avatar_id: file.id avatar_id: file.id
}).then(i => { }).then(i => {
os.i.avatar_id = i.avatar_id;
os.i.avatar_url = i.avatar_url;
os.apis.dialog({ os.apis.dialog({
title: '%fa:info-circle%アバターを更新しました', title: '%fa:info-circle%アバターを更新しました',
text: '新しいアバターが反映されるまで時間がかかる場合があります。', text: '新しいアバターが反映されるまで時間がかかる場合があります。',

View file

@ -8,7 +8,7 @@ export default (os: OS) => (cb, file = null) => {
const w = new CropWindow({ const w = new CropWindow({
propsData: { propsData: {
file: file, image: file,
title: 'バナーとして表示する部分を選択', title: 'バナーとして表示する部分を選択',
aspectRatio: 16 / 9 aspectRatio: 16 / 9
} }
@ -60,7 +60,7 @@ export default (os: OS) => (cb, file = null) => {
}; };
xhr.upload.onprogress = e => { 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); xhr.send(data);
@ -68,8 +68,11 @@ export default (os: OS) => (cb, file = null) => {
const set = file => { const set = file => {
os.api('i/update', { os.api('i/update', {
avatar_id: file.id banner_id: file.id
}).then(i => { }).then(i => {
os.i.banner_id = i.banner_id;
os.i.banner_url = i.banner_url;
os.apis.dialog({ os.apis.dialog({
title: '%fa:info-circle%バナーを更新しました', title: '%fa:info-circle%バナーを更新しました',
text: '新しいバナーが反映されるまで時間がかかる場合があります。', text: '新しいバナーが反映されるまで時間がかかる場合があります。',

View file

@ -1,10 +1,12 @@
<template> <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> <span slot="header">%fa:crop%{{ title }}</span>
<div class="body"> <div class="body">
<vue-cropper <vue-cropper ref="cropper"
:src="image.url" :src="image.url"
:view-mode="1" :view-mode="1"
:aspect-ratio="aspectRatio"
:container-style="{ width: '100%', 'max-height': '400px' }"
/> />
</div> </div>
<div :class="$style.actions"> <div :class="$style.actions">
@ -17,7 +19,12 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import VueCropper from 'vue-cropperjs';
export default Vue.extend({ export default Vue.extend({
components: {
VueCropper
},
props: { props: {
image: { image: {
type: Object, type: Object,

View file

@ -49,7 +49,7 @@
</div> </div>
</div> </div>
<div class="dropzone" v-if="draghover"></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"/> <input ref="fileInput" type="file" accept="*/*" multiple="multiple" tabindex="-1" @change="onChangeFileInput"/>
</div> </div>
</template> </template>

View file

@ -1,17 +1,15 @@
<template> <template>
<mk-window ref="window" :is-modal="false" :can-close="false" width="500px" @closed="$destroy"> <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> </div>
</mk-window> </mk-window>
</template> </template>
@ -30,6 +28,9 @@ export default Vue.extend({
update(value, max) { update(value, max) {
this.value = parseInt(value, 10); this.value = parseInt(value, 10);
this.max = parseInt(max, 10); this.max = parseInt(max, 10);
},
close() {
(this.$refs.window as any).close();
} }
} }
}); });

View file

@ -45,11 +45,7 @@ export default Vue.extend({
}, },
methods: { methods: {
updateAvatar() { updateAvatar() {
(this as any).apis.chooseDriveFile({ (this as any).apis.updateAvatar();
multiple: false
}).then(file => {
(this as any).apis.updateAvatar(file);
});
}, },
save() { save() {
(this as any).api('i/update', { (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) => { const launch = (api: (os: MiOS) => API) => {
os.apis = api(os); os.apis = api(os);
Vue.mixin({ 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
};
} }
}); });

View file

@ -100,6 +100,12 @@ module.exports = Object.keys(langs).map(lang => {
{ loader: 'css-loader' }, { loader: 'css-loader' },
{ loader: 'stylus-loader' } { loader: 'stylus-loader' }
] ]
}, {
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}, { }, {
test: /\.ts$/, test: /\.ts$/,
exclude: /node_modules/, exclude: /node_modules/,