forked from FoundKeyGang/FoundKey
wip
This commit is contained in:
syuilo
parent
1febbbb12c
commit
ad459f6dd3
3 changed files with 129 additions and 123 deletions
|
|
@ -1,8 +1,8 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
export default function(data: {
|
||||
export default function<T extends object>(data: {
|
||||
name: string;
|
||||
props: any;
|
||||
props: T;
|
||||
}) {
|
||||
return Vue.extend({
|
||||
props: {
|
||||
|
|
@ -10,7 +10,7 @@ export default function(data: {
|
|||
type: String,
|
||||
required: true
|
||||
},
|
||||
place: {
|
||||
wplace: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
|
|
@ -42,8 +42,10 @@ export default function(data: {
|
|||
},
|
||||
created() {
|
||||
if (this.props) {
|
||||
Object.keys(this.wprops).forEach(prop => {
|
||||
this.props[prop] = this.props.data.hasOwnProperty(prop) ? this.props.data[prop] : this.props[prop];
|
||||
Object.keys(this.props).forEach(prop => {
|
||||
if (this.wprops.hasOwnProperty(prop)) {
|
||||
this.props[prop] = this.wprops[prop];
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,125 @@
|
|||
<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>
|
||||
</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