From 0bd68902f995e4fc56f7c02bc643880030a3adcb Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 3 Mar 2022 01:17:37 +0900
Subject: [PATCH] feat(client): indicate dev build

---
 packages/client/src/ui/_common_/common.vue | 37 ++++++++++++++++++----
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index 98069258d..98364b963 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -11,6 +11,8 @@
 <XStreamIndicator/>
 
 <div v-if="pendingApiRequestsCount > 0" id="wait"></div>
+
+<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
 </template>
 
 <script lang="ts">
@@ -52,12 +54,28 @@ export default defineComponent({
 			uploads,
 			popups,
 			pendingApiRequestsCount,
+			dev: _DEV_,
 		};
 	},
 });
 </script>
 
 <style lang="scss">
+@keyframes dev-ticker-blink {
+	0% { opacity: 1; }
+	50% { opacity: 0; }
+	100% { opacity: 1; }
+}
+
+@keyframes progress-spinner {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
 #wait {
 	display: block;
 	position: fixed;
@@ -79,12 +97,19 @@ export default defineComponent({
 	}
 }
 
-@keyframes progress-spinner {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
+#devTicker {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 2147483647;
+	color: #ff0;
+	background: rgba(0, 0, 0, 0.5);
+	padding: 4px 5px;
+	font-size: 14px;
+	pointer-events: none;
+
+	> span {
+		animation: dev-ticker-blink 2s infinite;
 	}
 }
 </style>