From 393113a2822a55e77e195a8a34a486528f335fa4 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 12 Nov 2017 05:52:35 +0900
Subject: [PATCH] Improve widgets
---
.../app/desktop/tags/home-widgets/channel.tag | 18 +++++---
.../app/desktop/tags/home-widgets/profile.tag | 43 +++++++++++++++++--
.../tags/home-widgets/recommended-polls.tag | 17 ++++++--
.../desktop/tags/home-widgets/rss-reader.tag | 17 +++++++-
.../app/desktop/tags/home-widgets/trends.tag | 17 ++++++--
5 files changed, 96 insertions(+), 16 deletions(-)
diff --git a/src/web/app/desktop/tags/home-widgets/channel.tag b/src/web/app/desktop/tags/home-widgets/channel.tag
index c1a29f60bc..b5a57277f6 100644
--- a/src/web/app/desktop/tags/home-widgets/channel.tag
+++ b/src/web/app/desktop/tags/home-widgets/channel.tag
@@ -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>
diff --git a/src/web/app/desktop/tags/home-widgets/profile.tag b/src/web/app/desktop/tags/home-widgets/profile.tag
index e6a8752113..3fdf4343e0 100644
--- a/src/web/app/desktop/tags/home-widgets/profile.tag
+++ b/src/web/app/desktop/tags/home-widgets/profile.tag
@@ -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>
diff --git a/src/web/app/desktop/tags/home-widgets/recommended-polls.tag b/src/web/app/desktop/tags/home-widgets/recommended-polls.tag
index b724718af7..0000a11669 100644
--- a/src/web/app/desktop/tags/home-widgets/recommended-polls.tag
+++ b/src/web/app/desktop/tags/home-widgets/recommended-polls.tag
@@ -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>
diff --git a/src/web/app/desktop/tags/home-widgets/rss-reader.tag b/src/web/app/desktop/tags/home-widgets/rss-reader.tag
index e9b740762e..9c213cf792 100644
--- a/src/web/app/desktop/tags/home-widgets/rss-reader.tag
+++ b/src/web/app/desktop/tags/home-widgets/rss-reader.tag
@@ -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>
diff --git a/src/web/app/desktop/tags/home-widgets/trends.tag b/src/web/app/desktop/tags/home-widgets/trends.tag
index 021df3f728..f824d89cfd 100644
--- a/src/web/app/desktop/tags/home-widgets/trends.tag
+++ b/src/web/app/desktop/tags/home-widgets/trends.tag
@@ -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>