Improve widgets

This commit is contained in:
syuilo 2017-11-12 05:52:35 +09:00
parent 0ff8c11ee1
commit 393113a282
5 changed files with 96 additions and 16 deletions

View file

@ -1,8 +1,10 @@
<mk-channel-home-widget> <mk-channel-home-widget>
<virtual if={ !data.compact }>
<p class="title"><i class="fa fa-television"></i>{ <p class="title"><i class="fa fa-television"></i>{
channel ? channel.title : '%i18n:desktop.tags.mk-channel-home-widget.title%' channel ? channel.title : '%i18n:desktop.tags.mk-channel-home-widget.title%'
}</p> }</p>
<button onclick={ settings } title="%i18n:desktop.tags.mk-channel-home-widget.settings%"><i class="fa fa-cog"></i></button> <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> <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 }/> <mk-channel ref="channel" show={ this.data.channel }/>
<style> <style>
@ -52,7 +54,8 @@
</style> </style>
<script> <script>
this.data = { this.data = {
channel: null channel: null,
compact: false
}; };
this.mixin('widget'); this.mixin('widget');
@ -89,6 +92,11 @@
// Save state // Save state
this.save(); this.save();
}; };
this.func = () => {
this.data.compact = !this.data.compact;
this.save();
};
</script> </script>
</mk-channel-home-widget> </mk-channel-home-widget>

View file

@ -1,5 +1,7 @@
<mk-profile-home-widget> <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> <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> <p class="username">@{ I.username }</p>
<style> <style>
:scope :scope
@ -7,6 +9,31 @@
overflow hidden overflow hidden
background #fff 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 > .banner
height 100px height 100px
background-color #f5f5f5 background-color #f5f5f5
@ -47,7 +74,12 @@
import updateAvatar from '../../scripts/update-avatar'; import updateAvatar from '../../scripts/update-avatar';
import updateBanner from '../../scripts/update-banner'; import updateBanner from '../../scripts/update-banner';
this.mixin('i'); this.data = {
compact: false
};
this.mixin('widget');
this.mixin('user-preview'); this.mixin('user-preview');
this.setAvatar = () => { this.setAvatar = () => {
@ -57,5 +89,10 @@
this.setBanner = () => { this.setBanner = () => {
updateBanner(this.I); updateBanner(this.I);
}; };
this.func = () => {
this.data.compact = !this.data.compact;
this.save();
};
</script> </script>
</mk-profile-home-widget> </mk-profile-home-widget>

View file

@ -1,6 +1,8 @@
<mk-recommended-polls-home-widget> <mk-recommended-polls-home-widget>
<virtual if={ !data.compact }>
<p class="title"><i class="fa fa-pie-chart"></i>%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p> <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> <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 }> <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 }">{ poll.text }</a></p>
<p if={ !poll.text }><a href="/{ poll.user.username }/{ poll.id }"><i class="fa fa-link"></i></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> </style>
<script> <script>
this.mixin('api'); this.data = {
compact: false
};
this.mixin('widget');
this.poll = null; this.poll = null;
this.loading = true; this.loading = true;
@ -102,5 +108,10 @@
}); });
}); });
}; };
this.func = () => {
this.data.compact = !this.data.compact;
this.save();
};
</script> </script>
</mk-recommended-polls-home-widget> </mk-recommended-polls-home-widget>

View file

@ -1,6 +1,8 @@
<mk-rss-reader-home-widget> <mk-rss-reader-home-widget>
<virtual if={ !data.compact }>
<p class="title"><i class="fa fa-rss-square"></i>RSS</p> <p class="title"><i class="fa fa-rss-square"></i>RSS</p>
<button onclick={ settings } title="設定"><i class="fa fa-cog"></i></button> <button onclick={ settings } title="設定"><i class="fa fa-cog"></i></button>
</virtual>
<div class="feed" if={ !initializing }> <div class="feed" if={ !initializing }>
<virtual each={ item in items }><a href={ item.link } target="_blank">{ item.title }</a></virtual> <virtual each={ item in items }><a href={ item.link } target="_blank">{ item.title }</a></virtual>
</div> </div>
@ -62,6 +64,12 @@
</style> </style>
<script> <script>
this.data = {
compact: false
};
this.mixin('widget');
this.url = 'http://news.yahoo.co.jp/pickup/rss.xml'; this.url = 'http://news.yahoo.co.jp/pickup/rss.xml';
this.items = []; this.items = [];
this.initializing = true; this.initializing = true;
@ -88,5 +96,10 @@
this.settings = () => { this.settings = () => {
}; };
this.func = () => {
this.data.compact = !this.data.compact;
this.save();
};
</script> </script>
</mk-rss-reader-home-widget> </mk-rss-reader-home-widget>

View file

@ -1,6 +1,8 @@
<mk-trends-home-widget> <mk-trends-home-widget>
<virtual if={ !data.compact }>
<p class="title"><i class="fa fa-fire"></i>%i18n:desktop.tags.mk-trends-home-widget.title%</p> <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> <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 }> <div class="post" if={ !loading && post != null }>
<p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p> <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> <p class="author"><a href="/{ post.user.username }">@{ post.user.username }</a></p>
@ -72,7 +74,11 @@
</style> </style>
<script> <script>
this.mixin('api'); this.data = {
compact: false
};
this.mixin('widget');
this.post = null; this.post = null;
this.loading = true; this.loading = true;
@ -108,5 +114,10 @@
}); });
}); });
}; };
this.func = () => {
this.data.compact = !this.data.compact;
this.save();
};
</script> </script>
</mk-trends-home-widget> </mk-trends-home-widget>