Add header clock

2 files changed, 109 insertions, 3 deletions

diff --git a/src/client/app.vue b/src/client/app.vue
index d4aa76a555..d2707cdf01 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -25,6 +25,7 @@
 				<input type="search" :placeholder="$t('search')" v-model="searchQuery" v-autocomplete="{ model: 'searchQuery' }" :disabled="searchWait" @keypress="searchKeypress"/>
 			</div>
 			<button v-if="$store.getters.isSignedIn" class="post _buttonPrimary" @click="post()"><fa :icon="faPencilAlt"/></button>
+			<x-clock v-if="isDesktop" class="clock"/>
 		</div>
 	</header>
 
@@ -107,7 +108,7 @@
 
 		<div class="widgets">
 			<div ref="widgets" :class="{ edit: widgetsEditMode }">
-				<template v-if="enableWidgets && $store.getters.isSignedIn">
+				<template v-if="isDesktop && $store.getters.isSignedIn">
 					<template v-if="widgetsEditMode">
 						<mk-button primary @click="addWidget" class="add"><fa :icon="faPlus"/></mk-button>
 						<x-draggable
@@ -166,6 +167,7 @@ export default Vue.extend({
 	i18n,
 
 	components: {
+		XClock: () => import('./components/header-clock.vue').then(m => m.default),
 		XNotifications: () => import('./components/notifications.vue').then(m => m.default),
 		MkButton: () => import('./components/ui/button.vue').then(m => m.default),
 		XDraggable: () => import('vuedraggable'),
@@ -184,7 +186,7 @@ export default Vue.extend({
 			searchQuery: '',
 			searchWait: false,
 			widgetsEditMode: false,
-			enableWidgets: window.innerWidth >= 1100,
+			isDesktop: window.innerWidth >= 1100,
 			canBack: false,
 			disconnectedDialog: null as Promise<void> | null,
 			faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer
@@ -273,7 +275,7 @@ export default Vue.extend({
 
 	mounted() {
 		// https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width
-		if (this.enableWidgets) {
+		if (this.isDesktop) {
 			const adjustWidgetsWidth = () => {
 				const lastChild = this.$refs.widgets.children[this.$refs.widgets.children.length - 1];
 				if (lastChild == null) return;
@@ -819,6 +821,10 @@ export default Vue.extend({
 				border-radius: 100%;
 				font-size: 16px;
 			}
+
+			> .clock {
+				margin-left: 8px;
+			}
 		}
 	}
 
diff --git a/src/client/components/header-clock.vue b/src/client/components/header-clock.vue
new file mode 100644
index 0000000000..e011063bf9
--- /dev/null
+++ b/src/client/components/header-clock.vue
@@ -0,0 +1,100 @@
+<template>
+<div class="eqryymyo">
+	<div class="header">
+		<time ref="time" class="_ghost">
+			<span class="yyyymmdd">{{ yyyy }}/{{ mm }}/{{ dd }}</span>
+			<br>
+			<span class="hhnn">{{ hh }}<span :style="{ visibility: now.getSeconds() % 2 == 0 ? 'visible' : 'hidden' }">:</span>{{ nn }}</span>
+		</time>
+	</div>
+	<div class="content _panel">
+		<mk-clock/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import MkClock from './analog-clock.vue';
+
+export default Vue.extend({
+	components: {
+		MkClock
+	},
+	data() {
+		return {
+			now: new Date(),
+			clock: null
+		};
+	},
+	computed: {
+		yyyy(): number {
+			return this.now.getFullYear();
+		},
+		mm(): string {
+			return ('0' + (this.now.getMonth() + 1)).slice(-2);
+		},
+		dd(): string {
+			return ('0' + this.now.getDate()).slice(-2);
+		},
+		hh(): string {
+			return ('0' + this.now.getHours()).slice(-2);
+		},
+		nn(): string {
+			return ('0' + this.now.getMinutes()).slice(-2);
+		}
+	},
+	mounted() {
+		this.tick();
+		this.clock = setInterval(this.tick, 1000);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		tick() {
+			this.now = new Date();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.eqryymyo {
+	display: inline-block;
+	overflow: visible;
+
+	> .header {
+		padding: 0 12px;
+		text-align: center;
+		font-size: 12px;
+
+		&:hover + .content {
+			opacity: 1;
+		}
+
+		> time {
+			display: table-cell;
+			vertical-align: middle;
+			height: 48px;
+
+			> .yyyymmdd {
+				opacity: 0.7;
+			}
+		}
+	}
+
+	> .content {
+		opacity: 0;
+		display: block;
+		position: absolute;
+		top: auto;
+		right: 0;
+		z-index: 3;
+		margin: 16px 0 0 0;
+		padding: 16px;
+		width: 230px;
+		transition: opacity 0.2s ease;
+	}
+}
+</style>