From ae9bfd69b030cef7e90befeb748f7897ef89bcbd Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 29 May 2018 23:13:39 +0900
Subject: Add analog clock widget

---
 .../app/common/views/components/analog-clock.vue   | 126 +++++++++++++++++++++
 src/client/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/analog-clock.vue  | 120 --------------------
 src/client/app/desktop/views/components/home.vue   |   1 +
 src/client/app/desktop/views/components/index.ts   |   2 -
 .../desktop/views/components/ui.header.clock.vue   |   2 +-
 src/client/app/mobile/views/pages/widgets.vue      |   1 +
 9 files changed, 174 insertions(+), 123 deletions(-)
 create mode 100644 src/client/app/common/views/components/analog-clock.vue
 create mode 100644 src/client/app/common/views/widgets/analog-clock.vue
 delete mode 100644 src/client/app/desktop/views/components/analog-clock.vue

(limited to 'src/client/app')

diff --git a/src/client/app/common/views/components/analog-clock.vue b/src/client/app/common/views/components/analog-clock.vue
new file mode 100644
index 0000000000..e25a1fcadf
--- /dev/null
+++ b/src/client/app/common/views/components/analog-clock.vue
@@ -0,0 +1,126 @@
+<template>
+<svg class="mk-analog-clock" viewBox="0 0 10 10" preserveAspectRatio="none">
+	<line v-for="angle, i in graduations"
+		:x1="5 + (Math.sin(angle) * (5 - graduationsPadding))"
+		:y1="5 - (Math.cos(angle) * (5 - graduationsPadding))"
+		:x2="5 + (Math.sin(angle) * ((5 - graduationsPadding) - (i % 5 == 0 ? longGraduationLength : shortGraduationLength)))"
+		:y2="5 - (Math.cos(angle) * ((5 - graduationsPadding) - (i % 5 == 0 ? longGraduationLength : shortGraduationLength)))"
+		:stroke="i % 5 == 0 ? longGraduationColor : shortGraduationColor"
+		stroke-width="0.05"/>
+
+	<line
+		:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
+		:y1="5 + (Math.cos(sAngle) * (sHandLengthRatio * handsTailLength))"
+		:x2="5 + (Math.sin(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
+		:y2="5 - (Math.cos(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
+		:stroke="sHandColor"
+		stroke-width="0.05"/>
+	<line
+		:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
+		:y1="5 + (Math.cos(mAngle) * (mHandLengthRatio * handsTailLength))"
+		:x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
+		:y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
+		:stroke="mHandColor"
+		stroke-width="0.1"/>
+	<line
+		:x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))"
+		:y1="5 + (Math.cos(hAngle) * (hHandLengthRatio * handsTailLength))"
+		:x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
+		:y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
+		:stroke="hHandColor"
+		stroke-width="0.1"/>
+</svg>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { themeColor } from '../../../config';
+
+export default Vue.extend({
+	props: {
+		dark: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			now: new Date(),
+			clock: null,
+
+			graduationsPadding: 0.5,
+			longGraduationLength: 0.3,
+			shortGraduationLength: 0.15,
+			handsPadding: 1,
+			handsTailLength: 0.7,
+			hHandLengthRatio: 0.75,
+			mHandLengthRatio: 1,
+			sHandLengthRatio: 1
+		};
+	},
+	computed: {
+		longGraduationColor(): string {
+			return this.dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
+		},
+		shortGraduationColor(): string {
+			return this.dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+		},
+
+		sHandColor(): string {
+			return this.dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
+		},
+		mHandColor(): string {
+			return this.dark ? '#fff' : '#777';
+		},
+		hHandColor(): string {
+			return themeColor;
+		},
+
+		s(): number {
+			return this.now.getSeconds();
+		},
+		m(): number {
+			return this.now.getMinutes();
+		},
+		h(): number {
+			return this.now.getHours();
+		},
+
+		hAngle(): number {
+			return Math.PI * (this.h % 12 + this.m / 60) / 6;
+		},
+		mAngle(): number {
+			return Math.PI * (this.m + this.s / 60) / 30;
+		},
+		sAngle(): number {
+			return Math.PI * this.s / 30;
+		},
+
+		graduations(): any {
+			const angles = [];
+			for (let i = 0; i < 60; i++) {
+				const angle = Math.PI * i / 30;
+				angles.push(angle);
+			}
+
+			return angles;
+		}
+	},
+	mounted() {
+		this.clock = setInterval(this.tick, 1000);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		tick() {
+			this.now = new Date();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-analog-clock
+	display block
+</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/analog-clock.vue b/src/client/app/desktop/views/components/analog-clock.vue
deleted file mode 100644
index 365a8cdaf5..0000000000
--- a/src/client/app/desktop/views/components/analog-clock.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-<svg class="mk-analog-clock" viewBox="0 0 10 10" preserveAspectRatio="none">
-	<line v-for="angle, i in graduations"
-		:x1="5 + (Math.sin(angle) * (5 - graduationsPadding))"
-		:y1="5 - (Math.cos(angle) * (5 - graduationsPadding))"
-		:x2="5 + (Math.sin(angle) * ((5 - graduationsPadding) - (i % 5 == 0 ? longGraduationLength : shortGraduationLength)))"
-		:y2="5 - (Math.cos(angle) * ((5 - graduationsPadding) - (i % 5 == 0 ? longGraduationLength : shortGraduationLength)))"
-		:stroke="i % 5 == 0 ? longGraduationColor : shortGraduationColor"
-		stroke-width="0.05"/>
-
-	<line
-		:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
-		:y1="5 + (Math.cos(sAngle) * (sHandLengthRatio * handsTailLength))"
-		:x2="5 + (Math.sin(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (Math.cos(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
-		:stroke="sHandColor"
-		stroke-width="0.05"/>
-	<line
-		:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
-		:y1="5 + (Math.cos(mAngle) * (mHandLengthRatio * handsTailLength))"
-		:x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
-		:stroke="mHandColor"
-		stroke-width="0.1"/>
-	<line
-		:x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))"
-		:y1="5 + (Math.cos(hAngle) * (hHandLengthRatio * handsTailLength))"
-		:x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
-		:stroke="hHandColor"
-		stroke-width="0.1"/>
-</svg>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { themeColor } from '../../../config';
-
-export default Vue.extend({
-	data() {
-		return {
-			now: new Date(),
-			clock: null,
-
-			graduationsPadding: 0.5,
-			longGraduationLength: 0.3,
-			shortGraduationLength: 0.15,
-			handsPadding: 1,
-			handsTailLength: 0.7,
-			hHandLengthRatio: 0.75,
-			mHandLengthRatio: 1,
-			sHandLengthRatio: 1
-		};
-	},
-	computed: {
-		longGraduationColor(): string {
-			return 'rgba(255, 255, 255, 0.3)';
-		},
-		shortGraduationColor(): string {
-			return 'rgba(255, 255, 255, 0.2)';
-		},
-		sHandColor(): string {
-			return 'rgba(255, 255, 255, 0.5)';
-		},
-		mHandColor(): string {
-			return '#fff';
-		},
-		hHandColor(): string {
-			return themeColor;
-		},
-
-		s(): number {
-			return this.now.getSeconds();
-		},
-		m(): number {
-			return this.now.getMinutes();
-		},
-		h(): number {
-			return this.now.getHours();
-		},
-		hAngle(): number {
-			return Math.PI * (this.h % 12 + this.m / 60) / 6;
-		},
-		mAngle(): number {
-			return Math.PI * (this.m + this.s / 60) / 30;
-		},
-		sAngle(): number {
-			return Math.PI * this.s / 30;
-		},
-
-		graduations(): any {
-			const angles = [];
-			for (let i = 0; i < 60; i++) {
-				const angle = Math.PI * i / 30;
-				angles.push(angle);
-			}
-
-			return angles;
-		}
-	},
-	mounted() {
-		this.clock = setInterval(this.tick, 1000);
-	},
-	beforeDestroy() {
-		clearInterval(this.clock);
-	},
-	methods: {
-		tick() {
-			this.now = new Date();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-analog-clock
-	display block
-	width 256px
-	height 256px
-</style>
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>
-- 
cgit v1.2.3-freya