FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

wip

Browse source
This commit is contained in:
syuilo 2018-02-15 01:41:31 +09:00
parent 1febbbb12c
commit ad459f6dd3
3 changed files with 129 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/web/app/common/define-widget.ts
View file

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

124
src/web/app/common/views/components/widgets/profile.vue
View file

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

116
src/web/app/desktop/-tags/home-widgets/profile.tag
View file

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