Improve widgets

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>