From ae9bfd69b030cef7e90befeb748f7897ef89bcbd Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 29 May 2018 23:13:39 +0900 Subject: [PATCH] Add analog clock widget --- locales/ja.yml | 1 + .../views/components/analog-clock.vue | 18 +++++--- .../app/common/views/components/index.ts | 2 + .../app/common/views/widgets/analog-clock.vue | 41 +++++++++++++++++++ src/client/app/common/views/widgets/index.ts | 2 + .../app/desktop/views/components/home.vue | 1 + .../app/desktop/views/components/index.ts | 2 - .../views/components/ui.header.clock.vue | 2 +- src/client/app/mobile/views/pages/widgets.vue | 1 + 9 files changed, 61 insertions(+), 9 deletions(-) rename src/client/app/{desktop => common}/views/components/analog-clock.vue (90%) create mode 100644 src/client/app/common/views/widgets/analog-clock.vue diff --git a/locales/ja.yml b/locales/ja.yml index b1df6dd859..78353fb993 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 365a8cdaf5..e25a1fcadf 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 c1a7bc61d7..df74f5ddfb 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 0000000000..b1177d4ddf --- /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 7ef4e02092..a4cabc43ba 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 f51fed7454..9f6cf9614a 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%

+