forked from FoundKeyGang/FoundKey
wip
This commit is contained in:
parent
1febbbb12c
commit
ad459f6dd3
3 changed files with 129 additions and 123 deletions
|
@ -1,8 +1,8 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
|
||||||
export default function(data: {
|
export default function<T extends object>(data: {
|
||||||
name: string;
|
name: string;
|
||||||
props: any;
|
props: T;
|
||||||
}) {
|
}) {
|
||||||
return Vue.extend({
|
return Vue.extend({
|
||||||
props: {
|
props: {
|
||||||
|
@ -10,7 +10,7 @@ export default function(data: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
place: {
|
wplace: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
|
@ -42,8 +42,10 @@ export default function(data: {
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
if (this.props) {
|
if (this.props) {
|
||||||
Object.keys(this.wprops).forEach(prop => {
|
Object.keys(this.props).forEach(prop => {
|
||||||
this.props[prop] = this.props.data.hasOwnProperty(prop) ? this.props.data[prop] : this.props[prop];
|
if (this.wprops.hasOwnProperty(prop)) {
|
||||||
|
this.props[prop] = this.wprops[prop];
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,125 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mkw-profile">
|
<div class="mkw-profile"
|
||||||
|
data-compact={ data.design == 1 || data.design == 2 }
|
||||||
|
data-melt={ data.design == 2 }
|
||||||
|
>
|
||||||
|
<div class="banner"
|
||||||
|
style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=256)' : '' }
|
||||||
|
title="クリックでバナー編集"
|
||||||
|
@click="wapi_setBanner"
|
||||||
|
></div>
|
||||||
|
<img class="avatar"
|
||||||
|
src={ I.avatar_url + '?thumbnail&size=96' }
|
||||||
|
@click="wapi_setAvatar"
|
||||||
|
alt="avatar"
|
||||||
|
title="クリックでアバター編集"
|
||||||
|
:v-user-preview={ I.id }
|
||||||
|
/>
|
||||||
|
<a class="name" href={ '/' + I.username }>{ I.name }</a>
|
||||||
|
<p class="username">@{ I.username }</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import define from '../../../define-widget';
|
||||||
|
export default define({
|
||||||
|
name: 'profile',
|
||||||
|
props: {
|
||||||
|
design: 0
|
||||||
|
}
|
||||||
|
}).extend({
|
||||||
|
methods: {
|
||||||
|
func() {
|
||||||
|
if (this.props.design == 3) {
|
||||||
|
this.props.design = 0;
|
||||||
|
} else {
|
||||||
|
this.props.design++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.mkw-profile
|
||||||
|
overflow hidden
|
||||||
|
background #fff
|
||||||
|
border solid 1px rgba(0, 0, 0, 0.075)
|
||||||
|
border-radius 6px
|
||||||
|
|
||||||
|
&[data-compact]
|
||||||
|
> .banner:before
|
||||||
|
content ""
|
||||||
|
display block
|
||||||
|
width 100%
|
||||||
|
height 100%
|
||||||
|
background rgba(0, 0, 0, 0.5)
|
||||||
|
|
||||||
|
> .avatar
|
||||||
|
top ((100px - 58px) / 2)
|
||||||
|
left ((100px - 58px) / 2)
|
||||||
|
border none
|
||||||
|
border-radius 100%
|
||||||
|
box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
|
||||||
|
|
||||||
|
> .name
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
left 92px
|
||||||
|
margin 0
|
||||||
|
line-height 100px
|
||||||
|
color #fff
|
||||||
|
text-shadow 0 0 8px rgba(0, 0, 0, 0.5)
|
||||||
|
|
||||||
|
> .username
|
||||||
|
display none
|
||||||
|
|
||||||
|
&[data-melt]
|
||||||
|
background transparent !important
|
||||||
|
border none !important
|
||||||
|
|
||||||
|
> .banner
|
||||||
|
visibility hidden
|
||||||
|
|
||||||
|
> .avatar
|
||||||
|
box-shadow none
|
||||||
|
|
||||||
|
> .name
|
||||||
|
color #666
|
||||||
|
text-shadow none
|
||||||
|
|
||||||
|
> .banner
|
||||||
|
height 100px
|
||||||
|
background-color #f5f5f5
|
||||||
|
background-size cover
|
||||||
|
background-position center
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
> .avatar
|
||||||
|
display block
|
||||||
|
position absolute
|
||||||
|
top 76px
|
||||||
|
left 16px
|
||||||
|
width 58px
|
||||||
|
height 58px
|
||||||
|
margin 0
|
||||||
|
border solid 3px #fff
|
||||||
|
border-radius 8px
|
||||||
|
vertical-align bottom
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
> .name
|
||||||
|
display block
|
||||||
|
margin 10px 0 0 84px
|
||||||
|
line-height 16px
|
||||||
|
font-weight bold
|
||||||
|
color #555
|
||||||
|
|
||||||
|
> .username
|
||||||
|
display block
|
||||||
|
margin 4px 0 8px 84px
|
||||||
|
line-height 16px
|
||||||
|
font-size 0.9em
|
||||||
|
color #999
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
|
@ -1,116 +0,0 @@
|
||||||
<mk-profile-home-widget data-compact={ data.design == 1 || data.design == 2 } data-melt={ data.design == 2 }>
|
|
||||||
<div class="banner" style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=256)' : '' } title="クリックでバナー編集" @click="setBanner"></div>
|
|
||||||
<img class="avatar" src={ I.avatar_url + '?thumbnail&size=96' } @click="setAvatar" alt="avatar" title="クリックでアバター編集" data-user-preview={ I.id }/>
|
|
||||||
<a class="name" href={ '/' + I.username }>{ I.name }</a>
|
|
||||||
<p class="username">@{ I.username }</p>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
overflow hidden
|
|
||||||
background #fff
|
|
||||||
border solid 1px rgba(0, 0, 0, 0.075)
|
|
||||||
border-radius 6px
|
|
||||||
|
|
||||||
&[data-compact]
|
|
||||||
> .banner:before
|
|
||||||
content ""
|
|
||||||
display block
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
background rgba(0, 0, 0, 0.5)
|
|
||||||
|
|
||||||
> .avatar
|
|
||||||
top ((100px - 58px) / 2)
|
|
||||||
left ((100px - 58px) / 2)
|
|
||||||
border none
|
|
||||||
border-radius 100%
|
|
||||||
box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
|
|
||||||
|
|
||||||
> .name
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
left 92px
|
|
||||||
margin 0
|
|
||||||
line-height 100px
|
|
||||||
color #fff
|
|
||||||
text-shadow 0 0 8px rgba(0, 0, 0, 0.5)
|
|
||||||
|
|
||||||
> .username
|
|
||||||
display none
|
|
||||||
|
|
||||||
&[data-melt]
|
|
||||||
background transparent !important
|
|
||||||
border none !important
|
|
||||||
|
|
||||||
> .banner
|
|
||||||
visibility hidden
|
|
||||||
|
|
||||||
> .avatar
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
> .name
|
|
||||||
color #666
|
|
||||||
text-shadow none
|
|
||||||
|
|
||||||
> .banner
|
|
||||||
height 100px
|
|
||||||
background-color #f5f5f5
|
|
||||||
background-size cover
|
|
||||||
background-position center
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
> .avatar
|
|
||||||
display block
|
|
||||||
position absolute
|
|
||||||
top 76px
|
|
||||||
left 16px
|
|
||||||
width 58px
|
|
||||||
height 58px
|
|
||||||
margin 0
|
|
||||||
border solid 3px #fff
|
|
||||||
border-radius 8px
|
|
||||||
vertical-align bottom
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
> .name
|
|
||||||
display block
|
|
||||||
margin 10px 0 0 84px
|
|
||||||
line-height 16px
|
|
||||||
font-weight bold
|
|
||||||
color #555
|
|
||||||
|
|
||||||
> .username
|
|
||||||
display block
|
|
||||||
margin 4px 0 8px 84px
|
|
||||||
line-height 16px
|
|
||||||
font-size 0.9em
|
|
||||||
color #999
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
import inputDialog from '../../scripts/input-dialog';
|
|
||||||
import updateAvatar from '../../scripts/update-avatar';
|
|
||||||
import updateBanner from '../../scripts/update-banner';
|
|
||||||
|
|
||||||
this.data = {
|
|
||||||
design: 0
|
|
||||||
};
|
|
||||||
|
|
||||||
this.mixin('widget');
|
|
||||||
|
|
||||||
this.mixin('user-preview');
|
|
||||||
|
|
||||||
this.setAvatar = () => {
|
|
||||||
updateAvatar(this.I);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.setBanner = () => {
|
|
||||||
updateBanner(this.I);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.func = () => {
|
|
||||||
if (++this.data.design == 3) this.data.design = 0;
|
|
||||||
this.save();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-profile-home-widget>
|
|
Loading…
Reference in a new issue