From c3064be1b95494574afba9d9d5795ecbf1cb466f Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Thu, 18 Aug 2022 16:48:22 -0700
Subject: [PATCH] feat: :alembic: New post button on mobile

---
 package.json                         |  2 +-
 packages/client/src/ui/universal.vue | 50 +++++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 6e6417912..f925ce25f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.118.1-calc.8.2",
+	"version": "12.118.1-calc.9",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 2d80907c4..c65875266 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -23,9 +23,10 @@
 		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="fas fa-home"></i></button>
 		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
 		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
-		<button class="button post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
 	</div>
 
+	<button id="postButton" class="button post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
+
 	<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
 		<div
 			v-if="drawerMenuShowing"
@@ -115,6 +116,22 @@ mainRouter.on('change', () => {
 
 document.documentElement.style.overflowY = 'scroll';
 
+let timer = -1;
+const postButton = document.getElementById('postButton');
+window.addEventListener('scroll', () => {
+	if (timer !== -1) {
+		if (postButton != null) {
+			postButton.style.animation = 'shrink 0.5s linear 1';
+		}
+		clearTimeout(timer);
+	}
+	timer = setTimeout(() => {
+		if (postButton != null) {
+			postButton.style.animation = 'grow 0.5s linear 1';
+		}
+	}, 150);
+}, false);
+
 if (defaultStore.state.widgets.length === 0) {
 	defaultStore.set('widgets', [{
 		name: 'calendar',
@@ -175,6 +192,24 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 </script>
 
 <style lang="scss" scoped>
+@keyframes shrink {
+	from {
+			transform: scale(1);
+	}
+	to {
+			transform: scale(0);
+	}
+}
+
+@keyframes grow {
+	from {
+			transform: scale(0);
+	}
+	to {
+			transform: scale(1);
+	}
+}
+
 .widgetsDrawer-enter-active,
 .widgetsDrawer-leave-active {
 	opacity: 1;
@@ -285,6 +320,19 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 		background: var(--bg);
 	}
 
+	> #postButton {
+		bottom: 6rem;
+		right: 1.5rem;
+		height: 4.5rem;
+		width: 4.5rem;
+		background: var(--panelHighlight);
+		position: fixed !important;
+		z-index: 1000;
+		font-size: 16px;
+		border-radius: 10px;
+		box-shadow: var(--shadow) 0px 0px 25px;
+	}
+
 	> .buttons {
 		position: fixed;
 		z-index: 1000;