This commit is contained in:
syuilo 2017-11-12 07:00:40 +09:00
parent 7730d583bb
commit d0f01ef233
6 changed files with 87 additions and 22 deletions

View file

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

View file

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

View file

@ -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> <p class="title"><i class="fa fa-camera"></i>%i18n:desktop.tags.mk-photo-stream-home-widget.title%</p>
</virtual> </virtual>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p> <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 display block
background #fff background #fff
&[data-melt]
background transparent !important
border none !important
> .stream
padding 0
> .img
border solid 4px transparent
border-radius 8px
> .title > .title
z-index 1 z-index 1
margin 0 margin 0
@ -58,7 +69,7 @@
</style> </style>
<script> <script>
this.data = { this.data = {
compact: false design: 0
}; };
this.mixin('widget'); this.mixin('widget');
@ -94,7 +105,7 @@
}; };
this.func = () => { this.func = () => {
this.data.compact = !this.data.compact; if (++this.data.design == 3) this.data.design = 0;
this.save(); this.save();
}; };
</script> </script>

View file

@ -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> <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 }/> <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> <a class="name" href={ '/' + I.username }>{ I.name }</a>
@ -36,6 +36,20 @@
> .username > .username
display none display none
&[data-melt]
background transparent !important
border none !important
> .banner
visibility hidden
> .avatar
box-shadow none
> .name
color #666
text-shadow none
> .banner > .banner
height 100px height 100px
background-color #f5f5f5 background-color #f5f5f5
@ -77,7 +91,7 @@
import updateBanner from '../../scripts/update-banner'; import updateBanner from '../../scripts/update-banner';
this.data = { this.data = {
compact: false design: 0
}; };
this.mixin('widget'); this.mixin('widget');
@ -93,7 +107,7 @@
}; };
this.func = () => { this.func = () => {
this.data.compact = !this.data.compact; if (++this.data.design == 3) this.data.design = 0;
this.save(); this.save();
}; };
</script> </script>

View file

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

View file

@ -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="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-today={ year == today.getFullYear() && month == today.getMonth() + 1 && today.getDay() == i }
data-is-donichi={ i == 0 || i == 6 }>{ weekdayText[i] }</div> data-is-donichi={ i == 0 || i == 6 }>{ weekdayText[i] }</div>
<div each={ day, i in Array(paddingDays).fill(0) }></div> <div each={ day, i in Array(paddingDays).fill(0) }></div>
@ -22,6 +24,10 @@
color #777 color #777
background #fff background #fff
&[data-melt]
background transparent !important
border none !important
> .title > .title
z-index 1 z-index 1
margin 0 margin 0
@ -130,6 +136,12 @@
</style> </style>
<script> <script>
this.data = {
design: 0
};
this.mixin('widget');
const eachMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; const eachMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
function isLeapYear(year) { function isLeapYear(year) {
@ -225,5 +237,10 @@
}); });
this.opts.tl.warp(date); this.opts.tl.warp(date);
}; };
this.func = () => {
if (++this.data.design == 6) this.data.design = 0;
this.save();
};
</script> </script>
</mk-timemachine-home-widget> </mk-timemachine-home-widget>