From 7d390b4fa52759e1bcb7292b1dac229450e7c495 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sat, 11 Nov 2017 14:27:39 +0900 Subject: [PATCH] :v: --- locales/en.yml | 6 ++ locales/ja.yml | 6 ++ .../desktop/tags/home-widgets/timemachine.tag | 100 ++++++++++++++---- 3 files changed, 94 insertions(+), 18 deletions(-) diff --git a/locales/en.yml b/locales/en.yml index 4eae825074..639219d2de 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -378,6 +378,12 @@ desktop: title: "Channel" settings: "Widget settings" + mk-timemachine-home-widget: + title: "{1} / {2}" + prev: "Previous month" + next: "Next month" + go: "Click to travel" + mk-repost-form: quote: "Quote..." cancel: "Cancel" diff --git a/locales/ja.yml b/locales/ja.yml index 82589aadff..513194afe8 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -378,6 +378,12 @@ desktop: title: "チャンネル" settings: "ウィジェットの設定" + mk-timemachine-home-widget: + title: "{1}月 {2}日" + prev: "先月" + next: "来月" + go: "クリックして時間遡行" + mk-repost-form: quote: "引用する..." cancel: "キャンセル" diff --git a/src/web/app/desktop/tags/home-widgets/timemachine.tag b/src/web/app/desktop/tags/home-widgets/timemachine.tag index b6c53e0284..75e9f3a339 100644 --- a/src/web/app/desktop/tags/home-widgets/timemachine.tag +++ b/src/web/app/desktop/tags/home-widgets/timemachine.tag @@ -1,12 +1,20 @@ <mk-timemachine-home-widget> - <button onclick={ prev }><i class="fa fa-chevron-circle-left"></i></button> - <p class="title">{ year }/{ month }</p> - <button onclick={ next }><i class="fa fa-chevron-circle-right"></i></button> + <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> <div class="calendar"> - <div class="weekday" each={ day, i in Array(7).fill(0) }>{ weekdayText[i] }</div> + <div class="weekday" 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> - <div class="day" each={ day, i in Array(days).fill(0) } data-today={ isToday(i + 1) } onclick={ go.bind(null, i + 1) }>{ i + 1 }</div> + <div class="day" each={ day, i in Array(days).fill(0) } + data-today={ isToday(i + 1) } + data-selected={ isSelected(i + 1) } + data-is-future={ isFuture(i + 1) } + data-is-donichi={ isDonichi(i + 1) } + onclick={ go.bind(null, i + 1) } + title={ isFuture(i + 1) ? null : '%i18n:desktop.tags.mk-timemachine-home-widget.go%' }><div>{ i + 1 }</div></div> </div> <style> :scope @@ -55,6 +63,9 @@ flex-wrap wrap padding 16px + * + user-select none + > div width calc(100% * (1/7)) text-align center @@ -64,23 +75,57 @@ &.weekday color #19a2a9 - &.day - cursor pointer - - &:hover - background rgba(0, 0, 0, 0.025) - - &:active - background rgba(0, 0, 0, 0.05) + &[data-is-donichi] + color #ef95a0 &[data-today] - color $theme-color-foreground - background $theme-color + box-shadow 0 0 0 1px #19a2a9 inset + border-radius 6px - &:hover + &[data-is-donichi] + box-shadow 0 0 0 1px #ef95a0 inset + + &.day + cursor pointer + color #777 + + > div + border-radius 6px + + &:hover > div + background rgba(0, 0, 0, 0.025) + + &:active > div + background rgba(0, 0, 0, 0.05) + + &[data-is-donichi] + color #ef95a0 + + &[data-is-future] + cursor default + color rgba(#777, 0.5) + + &[data-is-donichi] + color rgba(#ef95a0, 0.5) + + &[data-selected] + font-weight bold + + > div + background rgba(0, 0, 0, 0.025) + + &:active > div + background rgba(0, 0, 0, 0.05) + + &[data-today] + > div + color $theme-color-foreground + background $theme-color + + &:hover > div background lighten($theme-color, 10%) - &:active + &:active > div background darken($theme-color, 10%) </style> @@ -97,6 +142,7 @@ this.today = new Date(); this.year = this.today.getFullYear(); this.month = this.today.getMonth() + 1; + this.selected = this.today; this.weekdayText = [ '%i18n:common.weekday-short.sunday%', '%i18n:common.weekday-short.monday%', @@ -115,6 +161,19 @@ return this.year == this.today.getFullYear() && this.month == this.today.getMonth() + 1 && day == this.today.getDate(); }; + this.isSelected = day => { + return this.year == this.selected.getFullYear() && this.month == this.selected.getMonth() + 1 && day == this.selected.getDate(); + }; + + this.isFuture = day => { + return (new Date(this.year, this.month - 1, day)).getTime() > this.today.getTime(); + }; + + this.isDonichi = day => { + const weekday = (new Date(this.year, this.month - 1, day)).getDay(); + return weekday == 0 || weekday == 6; + }; + this.calc = () => { let days = eachMonthDays[this.month - 1]; @@ -159,7 +218,12 @@ }; this.go = day => { - this.opts.tl.warp(new Date(this.year, this.month - 1, day, 23, 59, 59, 999)); + if (this.isFuture(day)) return; + const date = new Date(this.year, this.month - 1, day, 23, 59, 59, 999); + this.update({ + selected: date + }); + this.opts.tl.warp(date); }; </script> </mk-timemachine-home-widget>