From ad459f6dd3b8dacd09d30fb559cb1b4553da5f5f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 15 Feb 2018 01:41:31 +0900
Subject: [PATCH] wip
---
src/web/app/common/define-widget.ts | 12 +-
.../views/components/widgets/profile.vue | 124 +++++++++++++++++-
.../desktop/-tags/home-widgets/profile.tag | 116 ----------------
3 files changed, 129 insertions(+), 123 deletions(-)
delete mode 100644 src/web/app/desktop/-tags/home-widgets/profile.tag
diff --git a/src/web/app/common/define-widget.ts b/src/web/app/common/define-widget.ts
index 9aed5a8902..5102ee1abf 100644
--- a/src/web/app/common/define-widget.ts
+++ b/src/web/app/common/define-widget.ts
@@ -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];
+ }
});
}
}
diff --git a/src/web/app/common/views/components/widgets/profile.vue b/src/web/app/common/views/components/widgets/profile.vue
index 4a22d2391b..1fb756333f 100644
--- a/src/web/app/common/views/components/widgets/profile.vue
+++ b/src/web/app/common/views/components/widgets/profile.vue
@@ -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>
diff --git a/src/web/app/desktop/-tags/home-widgets/profile.tag b/src/web/app/desktop/-tags/home-widgets/profile.tag
deleted file mode 100644
index 02a1f0d5a3..0000000000
--- a/src/web/app/desktop/-tags/home-widgets/profile.tag
+++ /dev/null
@@ -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>