Add analog clock widget

locales/ja.yml

@@ -54,6 +54,7 @@ common:
   my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。"
 
   widgets:
+    analog-clock: "アナログ時計"
     profile: "プロフィール"
     calendar: "カレンダー"
     timemachine: "カレンダー(タイムマシン)"

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>

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);

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>

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);

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>

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);

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>

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>