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({
<style lang="stylus" scoped>
.mk-analog-clock
display block
- width 256px
- height 256px
</style>
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 @@
+<template>
+<div class="mkw-analog-clock">
+ <mk-widget-container :naked="props.naked" :show-header="false">
+ <div class="mkw-analog-clock--body">
+ <mk-analog-clock :dark="$store.state.device.darkmode"/>
+ </div>
+ </mk-widget-container>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+export default define({
+ name: 'analog-clock',
+ props: () => ({
+ naked: false
+ })
+}).extend({
+ methods: {
+ func() {
+ this.props.naked = !this.props.naked;
+ this.save();
+ }
+ }
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+root(isDark)
+ .mkw-analog-clock--body
+ padding 8px
+
+.mkw-analog-clock[data-darkmode]
+ root(true)
+
+.mkw-analog-clock:not([data-darkmode])
+ root(false)
+
+</style>
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 @@
<p>%i18n:@add-widget%</p>
<select v-model="widgetAdderSelected">
<option value="profile">%i18n:common.widgets.profile%</option>
+ <option value="analog-clock">%i18n:common.widgets.analog-clock%</option>
<option value="calendar">%i18n:common.widgets.calendar%</option>
<option value="timemachine">%i18n:common.widgets.timemachine%</option>
<option value="activity">%i18n:common.widgets.activity%</option>
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index f58d0706df..7b7a38afa2 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/src/client/app/desktop/views/components/index.ts
@@ -9,7 +9,6 @@ import subNoteContent from './sub-note-content.vue';
import window from './window.vue';
import noteFormWindow from './post-form-window.vue';
import renoteFormWindow from './renote-form-window.vue';
-import analogClock from './analog-clock.vue';
import ellipsisIcon from './ellipsis-icon.vue';
import mediaImage from './media-image.vue';
import mediaImageDialog from './media-image-dialog.vue';
@@ -40,7 +39,6 @@ Vue.component('mk-sub-note-content', subNoteContent);
Vue.component('mk-window', window);
Vue.component('mk-post-form-window', noteFormWindow);
Vue.component('mk-renote-form-window', renoteFormWindow);
-Vue.component('mk-analog-clock', analogClock);
Vue.component('mk-ellipsis-icon', ellipsisIcon);
Vue.component('mk-media-image', mediaImage);
Vue.component('mk-media-image-dialog', mediaImageDialog);
diff --git a/src/client/app/desktop/views/components/ui.header.clock.vue b/src/client/app/desktop/views/components/ui.header.clock.vue
index cd23a67506..1c3f12f2f2 100644
--- a/src/client/app/desktop/views/components/ui.header.clock.vue
+++ b/src/client/app/desktop/views/components/ui.header.clock.vue
@@ -8,7 +8,7 @@
</time>
</div>
<div class="content">
- <mk-analog-clock/>
+ <mk-analog-clock :dark="true"/>
</div>
</div>
</template>
diff --git a/src/client/app/mobile/views/pages/widgets.vue b/src/client/app/mobile/views/pages/widgets.vue
index 9d047fa635..a0893770e8 100644
--- a/src/client/app/mobile/views/pages/widgets.vue
+++ b/src/client/app/mobile/views/pages/widgets.vue
@@ -9,6 +9,7 @@
<header>
<select v-model="widgetAdderSelected">
<option value="profile">%i18n:common.widgets.profile%</option>
+ <option value="analog-clock">%i18n:common.widgets.analog-clock%</option>
<option value="calendar">%i18n:common.widgets.calendar%</option>
<option value="activity">%i18n:common.widgets.activity%</option>
<option value="rss">%i18n:common.widgets.rss%</option>