diff --git a/locales/ja.yml b/locales/ja.yml index b1df6dd85..78353fb99 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -54,6 +54,7 @@ common: my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。" widgets: + analog-clock: "アナログ時計" profile: "プロフィール" calendar: "カレンダー" timemachine: "カレンダー(タイムマシン)" diff --git a/src/client/app/desktop/views/components/analog-clock.vue b/src/client/app/common/views/components/analog-clock.vue similarity index 90% rename from src/client/app/desktop/views/components/analog-clock.vue rename to src/client/app/common/views/components/analog-clock.vue index 365a8cdaf..e25a1fcad 100644 --- a/src/client/app/desktop/views/components/analog-clock.vue +++ b/src/client/app/common/views/components/analog-clock.vue @@ -37,6 +37,12 @@ import Vue from 'vue'; import { themeColor } from '../../../config'; export default Vue.extend({ + props: { + dark: { + type: Boolean, + default: false + } + }, data() { return { now: new Date(), @@ -54,16 +60,17 @@ export default Vue.extend({ }, computed: { longGraduationColor(): string { - return 'rgba(255, 255, 255, 0.3)'; + return this.dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)'; }, shortGraduationColor(): string { - return 'rgba(255, 255, 255, 0.2)'; + return this.dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)'; }, + sHandColor(): string { - return 'rgba(255, 255, 255, 0.5)'; + return this.dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)'; }, mHandColor(): string { - return '#fff'; + return this.dark ? '#fff' : '#777'; }, hHandColor(): string { return themeColor; @@ -78,6 +85,7 @@ export default Vue.extend({ h(): number { return this.now.getHours(); }, + hAngle(): number { return Math.PI * (this.h % 12 + this.m / 60) / 6; }, @@ -115,6 +123,4 @@ export default Vue.extend({ diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index c1a7bc61d..df74f5ddf 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -1,5 +1,6 @@ import Vue from 'vue'; +import analogClock from './analog-clock.vue'; import signin from './signin.vue'; import signup from './signup.vue'; import forkit from './forkit.vue'; @@ -27,6 +28,7 @@ import Switch from './switch.vue'; import Othello from './othello.vue'; import welcomeTimeline from './welcome-timeline.vue'; +Vue.component('mk-analog-clock', analogClock); Vue.component('mk-signin', signin); Vue.component('mk-signup', signup); Vue.component('mk-forkit', forkit); diff --git a/src/client/app/common/views/widgets/analog-clock.vue b/src/client/app/common/views/widgets/analog-clock.vue new file mode 100644 index 000000000..b1177d4dd --- /dev/null +++ b/src/client/app/common/views/widgets/analog-clock.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/client/app/common/views/widgets/index.ts b/src/client/app/common/views/widgets/index.ts index 7ef4e0209..a4cabc43b 100644 --- a/src/client/app/common/views/widgets/index.ts +++ b/src/client/app/common/views/widgets/index.ts @@ -1,5 +1,6 @@ import Vue from 'vue'; +import wAnalogClock from './analog-clock.vue'; import wVersion from './version.vue'; import wRss from './rss.vue'; import wServer from './server.vue'; @@ -12,6 +13,7 @@ import wTips from './tips.vue'; import wDonation from './donation.vue'; import wNav from './nav.vue'; +Vue.component('mkw-analog-clock', wAnalogClock); Vue.component('mkw-nav', wNav); Vue.component('mkw-calendar', wCalendar); Vue.component('mkw-photo-stream', wPhotoStream); diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue index f51fed745..9f6cf9614 100644 --- a/src/client/app/desktop/views/components/home.vue +++ b/src/client/app/desktop/views/components/home.vue @@ -7,6 +7,7 @@

%i18n:@add-widget%

+