🎨

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

@@ -1,5 +1,5 @@
-<mk-activity-home-widget>
+<mk-activity-home-widget data-melt={ data.design == 2 }>
-	<virtual if={ !data.compact }>
+	<virtual if={ data.design == 0 }>
 		<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>
@@ -11,6 +11,10 @@
 			display block
 			background #fff
 
+			&[data-melt]
+				background transparent !important
+				border none !important
+
 			> .title
 				z-index 1
 				margin 0
@@ -54,7 +58,7 @@
 	<script>
 		this.data = {
 			view: 0,
-			compact: false
+			design: 0
 		};
 
 		this.mixin('widget');
@@ -82,7 +86,7 @@
 		};
 
 		this.func = () => {
-			this.data.compact = !this.data.compact;
+			if (++this.data.design == 3) this.data.design = 0;
 			this.save();
 		};
 	</script>

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

@@ -1,4 +1,4 @@
-<mk-calendar-home-widget data-special={ special }>
+<mk-calendar-home-widget data-melt={ data.design == 1 } data-special={ special }>
 	<div class="calendar" data-is-holiday={ isHoliday }>
 		<p class="month-and-year"><span class="year">{ year }年</span><span class="month">{ month }月</span></p>
 		<p class="day">{ day }日</p>
@@ -34,6 +34,10 @@
 			&[data-special='on-new-years-day']
 				border-color #ef95a0 !important
 
+			&[data-melt]
+				background transparent !important
+				border none !important
+
 			&:after
 				content ""
 				display block
@@ -106,6 +110,12 @@
 
 	</style>
 	<script>
+		this.data = {
+			design: 0
+		};
+
+		this.mixin('widget');
+
 		this.draw = () => {
 			const now = new Date();
 			const nd = now.getDate();
@@ -130,7 +140,7 @@
 
 			this.isHoliday = now.getDay() == 0 || now.getDay() == 6;
 
-			this.special = 
+			this.special =
 				nm == 0 && nd == 1 ? 'on-new-years-day' :
 				false;
 
@@ -146,5 +156,10 @@
 		this.on('unmount', () => {
 			clearInterval(this.clock);
 		});
+
+		this.func = () => {
+			if (++this.data.design == 2) this.data.design = 0;
+			this.save();
+		};
 	</script>
 </mk-calendar-home-widget>

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

@@ -1,5 +1,5 @@
-<mk-photo-stream-home-widget>
+<mk-photo-stream-home-widget data-melt={ data.design == 2 }>
-	<virtual if={ !data.compact }>
+	<virtual if={ data.design == 0 }>
 		<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>
@@ -14,6 +14,17 @@
 			display block
 			background #fff
 
+			&[data-melt]
+				background transparent !important
+				border none !important
+
+				> .stream
+					padding 0
+
+					> .img
+						border solid 4px transparent
+						border-radius 8px
+
 			> .title
 				z-index 1
 				margin 0
@@ -58,7 +69,7 @@
 	</style>
 	<script>
 		this.data = {
-			compact: false
+			design: 0
 		};
 
 		this.mixin('widget');
@@ -94,7 +105,7 @@
 		};
 
 		this.func = () => {
-			this.data.compact = !this.data.compact;
+			if (++this.data.design == 3) this.data.design = 0;
 			this.save();
 		};
 	</script>

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

@@ -1,4 +1,4 @@
-<mk-profile-home-widget data-compact={ data.compact }>
+<mk-profile-home-widget data-compact={ data.design == 1 || data.design == 2 } data-melt={ data.design == 2 }>
 	<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=96' } onclick={ setAvatar } alt="avatar" title="クリックでアバター編集" data-user-preview={ I.id }/>
 	<a class="name" href={ '/' + I.username }>{ I.name }</a>
@@ -36,6 +36,20 @@
 				> .username
 					display none
 
+			&[data-melt]
+				background transparent !important
+				border none !important
+
+				> .banner
+					visibility hidden
+
+				> .avatar
+					box-shadow none
+
+				> .name
+					color #666
+					text-shadow none
+
 			> .banner
 				height 100px
 				background-color #f5f5f5
@@ -77,7 +91,7 @@
 		import updateBanner from '../../scripts/update-banner';
 
 		this.data = {
-			compact: false
+			design: 0
 		};
 
 		this.mixin('widget');
@@ -93,7 +107,7 @@
 		};
 
 		this.func = () => {
-			this.data.compact = !this.data.compact;
+			if (++this.data.design == 3) this.data.design = 0;
 			this.save();
 		};
 	</script>

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

@@ -1,5 +1,5 @@
-<mk-server-home-widget>
+<mk-server-home-widget data-melt={ data.design == 2 }>
-	<virtual if={ !data.compact }>
+	<virtual if={ data.design == 0 }>
 		<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>
@@ -15,6 +15,10 @@
 			display block
 			background #fff
 
+			&[data-melt]
+				background transparent !important
+				border none !important
+
 			> .title
 				z-index 1
 				margin 0
@@ -60,7 +64,7 @@
 
 		this.data = {
 			view: 0,
-			compact: false
+			design: 0
 		};
 
 		this.mixin('widget');
@@ -90,7 +94,7 @@
 		};
 
 		this.func = () => {
-			this.data.compact = !this.data.compact;
+			if (++this.data.design == 3) this.data.design = 0;
 			this.save();
 		};
 	</script>

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

@@ -1,10 +1,12 @@
-<mk-timemachine-home-widget>
+<mk-timemachine-home-widget data-melt={ data.design == 4 || data.design == 5 }>
-	<button onclick={ prev } title="%i18n:desktop.tags.mk-timemachine-home-widget.prev%"><i class="fa fa-chevron-circle-left"></i></button>
+	<virtual if={ data.design == 0 || data.design == 1 }>
-	<p class="title">{ '%i18n:desktop.tags.mk-timemachine-home-widget.title%'.replace('{1}', year).replace('{2}', month) }</p>
+		<button onclick={ prev } title="%i18n:desktop.tags.mk-timemachine-home-widget.prev%"><i class="fa fa-chevron-circle-left"></i></button>
-	<button onclick={ next } title="%i18n:desktop.tags.mk-timemachine-home-widget.next%"><i class="fa fa-chevron-circle-right"></i></button>
+		<p class="title">{ '%i18n:desktop.tags.mk-timemachine-home-widget.title%'.replace('{1}', year).replace('{2}', month) }</p>
+		<button onclick={ next } title="%i18n:desktop.tags.mk-timemachine-home-widget.next%"><i class="fa fa-chevron-circle-right"></i></button>
+	</virtual>
 
 	<div class="calendar">
-		<div class="weekday" each={ day, i in Array(7).fill(0) }
+		<div class="weekday" if={ data.design == 0 || data.design == 2 || data.design == 4} each={ day, i in Array(7).fill(0) }
 			data-today={ year == today.getFullYear() && month == today.getMonth() + 1 && today.getDay() == i }
 			data-is-donichi={ i == 0 || i == 6 }>{ weekdayText[i] }</div>
 		<div each={ day, i in Array(paddingDays).fill(0) }></div>
@@ -22,6 +24,10 @@
 			color #777
 			background #fff
 
+			&[data-melt]
+				background transparent !important
+				border none !important
+
 			> .title
 				z-index 1
 				margin 0
@@ -130,6 +136,12 @@
 
 	</style>
 	<script>
+		this.data = {
+			design: 0
+		};
+
+		this.mixin('widget');
+
 		const eachMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
 		function isLeapYear(year) {
@@ -225,5 +237,10 @@
 			});
 			this.opts.tl.warp(date);
 		};
+
+		this.func = () => {
+			if (++this.data.design == 6) this.data.design = 0;
+			this.save();
+		};
 </script>
 </mk-timemachine-home-widget>