🎨
This commit is contained in:
parent
7730d583bb
commit
d0f01ef233
@ -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>
|
||||||
|
@ -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();
|
||||||
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user