Skip to content
Snippets Groups Projects
Commit ad459f6d authored by syuilo's avatar syuilo
Browse files

wip

parent 1febbbb1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/web/app/common/define-widget.ts
+ 7
− 5
View file @ ad459f6d
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];
}
});
}
}
......
src/web/app/common/views/components/widgets/profile.vue
+ 122
− 2
View file @ ad459f6d
<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>
src/web/app/desktop/-tags/home-widgets/profile.tag deleted 100644 → 0
+ 0
− 116
View file @ 1febbbb1
<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment