heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

🎨

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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>

19
src/web/app/desktop/tags/home-widgets/calendar.tag
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 }>
<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>

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

@ -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>

20
src/web/app/desktop/tags/home-widgets/profile.tag
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>
<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>

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

@ -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>

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

@ -1,10 +1,12 @@
<mk-timemachine-home-widget>
<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>
<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>