🎨
This commit is contained in:
syuilo
parent
7730d583bb
commit
d0f01ef233
|
|
@ -1,5 +1,5 @@
|
|||
<mk-activity-home-widget>
|
||||
<virtual if={ !data.compact }>
|
||||
<mk-activity-home-widget data-melt={ data.design == 2 }>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<mk-photo-stream-home-widget>
|
||||
<virtual if={ !data.compact }>
|
||||
<mk-photo-stream-home-widget data-melt={ data.design == 2 }>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<mk-server-home-widget>
|
||||
<virtual if={ !data.compact }>
|
||||
<mk-server-home-widget data-melt={ data.design == 2 }>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<mk-timemachine-home-widget>
|
||||
<mk-timemachine-home-widget data-melt={ data.design == 4 || data.design == 5 }>
|
||||
<virtual if={ data.design == 0 || data.design == 1 }>
|
||||
<button onclick={ prev } title="%i18n:desktop.tags.mk-timemachine-home-widget.prev%"><i class="fa fa-chevron-circle-left"></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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue