✌️

src/web/app/desktop/tags/home-widgets/activity.tag

@@ -1,6 +1,8 @@
 <mk-activity-home-widget>
+	<virtual if={ !data.compact }>
 		<p class="title"><i class="fa fa-bar-chart"></i>%i18n:desktop.tags.mk-activity-home-widget.title%</p>
 		<button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-home-widget.toggle%"><i class="fa fa-sort"></i></button>
+	</virtual>
 	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
 	<mk-activity-home-widget-calender if={ !initializing && data.view == 0 } data={ [].concat(activity) }/>
 	<mk-activity-home-widget-chart if={ !initializing && data.view == 1 } data={ [].concat(activity) }/>
@@ -51,7 +53,8 @@
 	</style>
 	<script>
 		this.data = {
-			view: 0
+			view: 0,
+			compact: false
 		};
 
 		this.mixin('widget');
@@ -77,6 +80,11 @@
 			// Save view state
 			this.save();
 		};
+
+		this.func = () => {
+			this.data.compact = !this.data.compact;
+			this.save();
+		};
 	</script>
 </mk-activity-home-widget>
 

src/web/app/desktop/tags/home-widgets/notifications.tag

@@ -1,6 +1,8 @@
 <mk-notifications-home-widget>
+	<virtual if={ !data.compact }>
 		<p class="title"><i class="fa fa-bell-o"></i>%i18n:desktop.tags.mk-notifications-home-widget.title%</p>
 		<button onclick={ settings } title="%i18n:desktop.tags.mk-notifications-home-widget.settings%"><i class="fa fa-cog"></i></button>
+	</virtual>
 	<mk-notifications/>
 	<style>
 		:scope
@@ -43,9 +45,20 @@
 
 	</style>
 	<script>
+		this.data = {
+			compact: false
+		};
+
+		this.mixin('widget');
+
 		this.settings = () => {
 			const w = riot.mount(document.body.appendChild(document.createElement('mk-settings-window')))[0];
 			w.switch('notification');
 		};
+
+		this.func = () => {
+			this.data.compact = !this.data.compact;
+			this.save();
+		};
 	</script>
 </mk-notifications-home-widget>

src/web/app/desktop/tags/home-widgets/photo-stream.tag

@@ -1,5 +1,7 @@
 <mk-photo-stream-home-widget>
+	<virtual if={ !data.compact }>
 		<p class="title"><i class="fa fa-camera"></i>%i18n:desktop.tags.mk-photo-stream-home-widget.title%</p>
+	</virtual>
 	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
 	<div class="stream" if={ !initializing && images.length > 0 }>
 		<virtual each={ image in images }>
@@ -55,8 +57,11 @@
 
 	</style>
 	<script>
-		this.mixin('i');
+		this.data = {
-		this.mixin('api');
+			compact: false
+		};
+
+		this.mixin('widget');
 		this.mixin('stream');
 
 		this.images = [];
@@ -87,5 +92,10 @@
 				this.update();
 			}
 		};
+
+		this.func = () => {
+			this.data.compact = !this.data.compact;
+			this.save();
+		};
 	</script>
 </mk-photo-stream-home-widget>

src/web/app/desktop/tags/home-widgets/server.tag

@@ -1,6 +1,8 @@
 <mk-server-home-widget>
+	<virtual if={ !data.compact }>
 		<p class="title"><i class="fa fa-server"></i>%i18n:desktop.tags.mk-server-home-widget.title%</p>
 		<button onclick={ toggle } title="%i18n:desktop.tags.mk-server-home-widget.toggle%"><i class="fa fa-sort"></i></button>
+	</virtual>
 	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
 	<mk-server-home-widget-cpu-and-memory-usage if={ !initializing } show={ data.view == 0 } connection={ connection }/>
 	<mk-server-home-widget-cpu if={ !initializing } show={ data.view == 1 } connection={ connection } meta={ meta }/>
@@ -57,7 +59,8 @@
 		import Connection from '../../../common/scripts/server-stream';
 
 		this.data = {
-			view: 0
+			view: 0,
+			compact: false
 		};
 
 		this.mixin('widget');
@@ -85,6 +88,11 @@
 			// Save widget state
 			this.save();
 		};
+
+		this.func = () => {
+			this.data.compact = !this.data.compact;
+			this.save();
+		};
 	</script>
 </mk-server-home-widget>
 

src/web/app/desktop/tags/home-widgets/user-recommendation.tag

@@ -1,6 +1,8 @@
 <mk-user-recommendation-home-widget>
+	<virtual if={ !data.compact }>
 		<p class="title"><i class="fa fa-users"></i>%i18n:desktop.tags.mk-user-recommendation-home-widget.title%</p>
 		<button onclick={ refresh } title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%"><i class="fa fa-refresh"></i></button>
+	</virtual>
 	<div class="user" if={ !loading && users.length != 0 } each={ _user in users }>
 		<a class="avatar-anchor" href={ '/' + _user.username }>
 			<img class="avatar" src={ _user.avatar_url + '?thumbnail&size=42' } alt="" data-user-preview={ _user.id }/>
@@ -111,7 +113,11 @@
 
 	</style>
 	<script>
-		this.mixin('api');
+		this.data = {
+			compact: false
+		};
+
+		this.mixin('widget');
 		this.mixin('user-preview');
 
 		this.users = null;
@@ -148,5 +154,10 @@
 			}
 			this.fetch();
 		};
+
+		this.func = () => {
+			this.data.compact = !this.data.compact;
+			this.save();
+		};
 	</script>
 </mk-user-recommendation-home-widget>

src/web/app/desktop/tags/home.tag

@@ -23,6 +23,8 @@
 				<option value="tips">ヒント</option>
 			</select>
 			<button onclick={ addWidget }>追加</button>
+			<br>
+			<p>Tip: 一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>
 		</div>
 		<div class="trash">
 			<div ref="trash"></div>
@@ -213,11 +215,22 @@
 					break;
 			}
 
-			this.home.push(riot.mount(el, {
+			const tag = riot.mount(el, {
 				id: widget.id,
 				data: widget.data,
 				tl: this.refs.tl
-			})[0]);
+			})[0];
+
+			this.home.push(tag);
+
+			if (this.opts.customize) {
+				actualEl.oncontextmenu = e => {
+					e.preventDefault();
+					e.stopImmediatePropagation();
+					if (tag.func) tag.func();
+					return false;
+				};
+			}
 		};
 
 		this.addWidget = () => {