heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Improve widgets

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/web/app/desktop/tags/home-widgets/channel.tag
View file

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

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

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

17
src/web/app/desktop/tags/home-widgets/recommended-polls.tag
View file

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

17
src/web/app/desktop/tags/home-widgets/rss-reader.tag
View file

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

17
src/web/app/desktop/tags/home-widgets/trends.tag
View file

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