Improve widgets
This commit is contained in:
syuilo
parent
0ff8c11ee1
commit
393113a282
|
|
@ -1,8 +1,10 @@
|
|||
<mk-channel-home-widget>
|
||||
<p class="title"><i class="fa fa-television"></i>{
|
||||
channel ? channel.title : '%i18n:desktop.tags.mk-channel-home-widget.title%'
|
||||
}</p>
|
||||
<button onclick={ settings } title="%i18n:desktop.tags.mk-channel-home-widget.settings%"><i class="fa fa-cog"></i></button>
|
||||
<virtual if={ !data.compact }>
|
||||
<p class="title"><i class="fa fa-television"></i>{
|
||||
channel ? channel.title : '%i18n:desktop.tags.mk-channel-home-widget.title%'
|
||||
}</p>
|
||||
<button onclick={ settings } title="%i18n:desktop.tags.mk-channel-home-widget.settings%"><i class="fa fa-cog"></i></button>
|
||||
</virtual>
|
||||
<p class="get-started" if={ this.data.channel == null }>%i18n:desktop.tags.mk-channel-home-widget.get-started%</p>
|
||||
<mk-channel ref="channel" show={ this.data.channel }/>
|
||||
<style>
|
||||
|
|
@ -52,7 +54,8 @@
|
|||
</style>
|
||||
<script>
|
||||
this.data = {
|
||||
channel: null
|
||||
channel: null,
|
||||
compact: false
|
||||
};
|
||||
|
||||
this.mixin('widget');
|
||||
|
|
@ -89,6 +92,11 @@
|
|||
// Save state
|
||||
this.save();
|
||||
};
|
||||
|
||||
this.func = () => {
|
||||
this.data.compact = !this.data.compact;
|
||||
this.save();
|
||||
};
|
||||
</script>
|
||||
</mk-channel-home-widget>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<mk-profile-home-widget>
|
||||
<div class="banner" style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=256)' : '' } title="クリックでバナー編集" onclick={ setBanner }></div><img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } onclick={ setAvatar } alt="avatar" title="クリックでアバター編集" data-user-preview={ I.id }/><a class="name" href={ '/' + I.username }>{ I.name }</a>
|
||||
<mk-profile-home-widget data-compact={ data.compact }>
|
||||
<div class="banner" style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=256)' : '' } title="クリックでバナー編集" onclick={ setBanner }></div>
|
||||
<img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } onclick={ 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>
|
||||
:scope
|
||||
|
|
@ -7,6 +9,31 @@
|
|||
overflow hidden
|
||||
background #fff
|
||||
|
||||
&[data-compact]
|
||||
> .banner:before
|
||||
content ""
|
||||
display block
|
||||
width 100%
|
||||
height 100%
|
||||
background rgba(0, 0, 0, 0.5)
|
||||
|
||||
> .avatar
|
||||
top 21px
|
||||
left 21px
|
||||
border none
|
||||
border-radius 100%
|
||||
|
||||
> .name
|
||||
position absolute
|
||||
top 0
|
||||
left 92px
|
||||
margin 0
|
||||
line-height 100px
|
||||
color #fff
|
||||
|
||||
> .username
|
||||
display none
|
||||
|
||||
> .banner
|
||||
height 100px
|
||||
background-color #f5f5f5
|
||||
|
|
@ -47,7 +74,12 @@
|
|||
import updateAvatar from '../../scripts/update-avatar';
|
||||
import updateBanner from '../../scripts/update-banner';
|
||||
|
||||
this.mixin('i');
|
||||
this.data = {
|
||||
compact: false
|
||||
};
|
||||
|
||||
this.mixin('widget');
|
||||
|
||||
this.mixin('user-preview');
|
||||
|
||||
this.setAvatar = () => {
|
||||
|
|
@ -57,5 +89,10 @@
|
|||
this.setBanner = () => {
|
||||
updateBanner(this.I);
|
||||
};
|
||||
|
||||
this.func = () => {
|
||||
this.data.compact = !this.data.compact;
|
||||
this.save();
|
||||
};
|
||||
</script>
|
||||
</mk-profile-home-widget>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<mk-recommended-polls-home-widget>
|
||||
<p class="title"><i class="fa fa-pie-chart"></i>%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p>
|
||||
<button onclick={ fetch } title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%"><i class="fa fa-refresh"></i></button>
|
||||
<virtual if={ !data.compact }>
|
||||
<p class="title"><i class="fa fa-pie-chart"></i>%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p>
|
||||
<button onclick={ fetch } title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%"><i class="fa fa-refresh"></i></button>
|
||||
</virtual>
|
||||
<div class="poll" if={ !loading && poll != null }>
|
||||
<p if={ poll.text }><a href="/{ poll.user.username }/{ poll.id }">{ poll.text }</a></p>
|
||||
<p if={ !poll.text }><a href="/{ poll.user.username }/{ poll.id }"><i class="fa fa-link"></i></a></p>
|
||||
|
|
@ -70,7 +72,11 @@
|
|||
|
||||
</style>
|
||||
<script>
|
||||
this.mixin('api');
|
||||
this.data = {
|
||||
compact: false
|
||||
};
|
||||
|
||||
this.mixin('widget');
|
||||
|
||||
this.poll = null;
|
||||
this.loading = true;
|
||||
|
|
@ -102,5 +108,10 @@
|
|||
});
|
||||
});
|
||||
};
|
||||
|
||||
this.func = () => {
|
||||
this.data.compact = !this.data.compact;
|
||||
this.save();
|
||||
};
|
||||
</script>
|
||||
</mk-recommended-polls-home-widget>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<mk-rss-reader-home-widget>
|
||||
<p class="title"><i class="fa fa-rss-square"></i>RSS</p>
|
||||
<button onclick={ settings } title="設定"><i class="fa fa-cog"></i></button>
|
||||
<virtual if={ !data.compact }>
|
||||
<p class="title"><i class="fa fa-rss-square"></i>RSS</p>
|
||||
<button onclick={ settings } title="設定"><i class="fa fa-cog"></i></button>
|
||||
</virtual>
|
||||
<div class="feed" if={ !initializing }>
|
||||
<virtual each={ item in items }><a href={ item.link } target="_blank">{ item.title }</a></virtual>
|
||||
</div>
|
||||
|
|
@ -62,6 +64,12 @@
|
|||
|
||||
</style>
|
||||
<script>
|
||||
this.data = {
|
||||
compact: false
|
||||
};
|
||||
|
||||
this.mixin('widget');
|
||||
|
||||
this.url = 'http://news.yahoo.co.jp/pickup/rss.xml';
|
||||
this.items = [];
|
||||
this.initializing = true;
|
||||
|
|
@ -88,5 +96,10 @@
|
|||
|
||||
this.settings = () => {
|
||||
};
|
||||
|
||||
this.func = () => {
|
||||
this.data.compact = !this.data.compact;
|
||||
this.save();
|
||||
};
|
||||
</script>
|
||||
</mk-rss-reader-home-widget>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<mk-trends-home-widget>
|
||||
<p class="title"><i class="fa fa-fire"></i>%i18n:desktop.tags.mk-trends-home-widget.title%</p>
|
||||
<button onclick={ fetch } title="%i18n:desktop.tags.mk-trends-home-widget.refresh%"><i class="fa fa-refresh"></i></button>
|
||||
<virtual if={ !data.compact }>
|
||||
<p class="title"><i class="fa fa-fire"></i>%i18n:desktop.tags.mk-trends-home-widget.title%</p>
|
||||
<button onclick={ fetch } title="%i18n:desktop.tags.mk-trends-home-widget.refresh%"><i class="fa fa-refresh"></i></button>
|
||||
</virtual>
|
||||
<div class="post" if={ !loading && post != null }>
|
||||
<p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p>
|
||||
<p class="author">―<a href="/{ post.user.username }">@{ post.user.username }</a></p>
|
||||
|
|
@ -72,7 +74,11 @@
|
|||
|
||||
</style>
|
||||
<script>
|
||||
this.mixin('api');
|
||||
this.data = {
|
||||
compact: false
|
||||
};
|
||||
|
||||
this.mixin('widget');
|
||||
|
||||
this.post = null;
|
||||
this.loading = true;
|
||||
|
|
@ -108,5 +114,10 @@
|
|||
});
|
||||
});
|
||||
};
|
||||
|
||||
this.func = () => {
|
||||
this.data.compact = !this.data.compact;
|
||||
this.save();
|
||||
};
|
||||
</script>
|
||||
</mk-trends-home-widget>
|
||||
|
|
|
|||
Loading…
Reference in a new issue