From 053f1c0ac47377933f98c6fdb8b91e15ed2043ba Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 16 Aug 2022 00:00:36 -0700
Subject: [PATCH] feat: :alembic: ripple effect

---
 packages/client/src/pages/timeline.vue | 75 +++++++++++++-------------
 packages/client/src/ui/universal.vue   | 12 +++++
 2 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 1967fc1a3a..2a6f2740bc 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -1,42 +1,43 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
-				v-model:tab="src"
-				:actions="headerActions"
-				:tabs="headerTabs"
-				:display-my-avatar="true"
-		/></template>
-		<MkSpacer :content-max="800">
-			<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
-				<XTutorial
-					v-if="$store.reactiveState.tutorial.value != -1"
-					class="tutorial _block"
-				/>
-				<XPostForm
-					v-if="$store.reactiveState.showFixedPostForm.value"
-					class="post-form _block"
-					fixed
-				/>
+<MkStickyContainer>
+	<template #header>
+		<MkPageHeader
+			v-model:tab="src"
+			:actions="headerActions"
+			:tabs="headerTabs"
+			:display-my-avatar="true"
+		/>
+	</template>
+	<MkSpacer :content-max="800">
+		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
+			<XTutorial
+				v-if="$store.reactiveState.tutorial.value != -1"
+				class="tutorial _block"
+			/>
+			<XPostForm
+				v-if="$store.reactiveState.showFixedPostForm.value"
+				class="post-form _block"
+				fixed
+			/>
 
-				<div v-if="queue > 0" class="new">
-					<button class="_buttonPrimary" @click="top()">
-						{{ i18n.ts.newNoteRecived }}
-					</button>
-				</div>
-				<div class="tl _block">
-					<XTimeline
-						ref="tl"
-						:key="src"
-						class="tl"
-						:src="src"
-						:sound="true"
-						@queue="queueUpdated"
-					/>
-				</div>
+			<div v-if="queue > 0" class="new">
+				<button class="_buttonPrimary" @click="top()">
+					{{ i18n.ts.newNoteRecived }}
+				</button>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
+			<div class="tl _block">
+				<XTimeline
+					ref="tl"
+					:key="src"
+					class="tl"
+					:src="src"
+					:sound="true"
+					@queue="queueUpdated"
+				/>
+			</div>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -72,7 +73,6 @@ const DESKTOP_THRESHOLD = 1100;
 const MOBILE_THRESHOLD = 500;
 
 // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
-const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
 const isMobile = ref(
 	deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD
 );
@@ -297,6 +297,7 @@ if (isMobile.value) {
 		/* reset values */
 		xDown = null;
 		yDown = null;
+		return;
 	}
 }
 </script>
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index e2ec016bac..42af110bbb 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -304,8 +304,20 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 			height: 64px;
 			border-radius: 8px;
 			background: var(--panel);
+			background-position: center;
+			transition: background 0.6s;
 			color: var(--fg);
 
+			&:hover {
+				background: var(--panelHover) radial-gradient(circle, transparent 1%, var(--panelHover) 1%) center/15000%;
+			}
+
+			&:active {
+				background-color: var(--accentedBg);
+				background-size: 100%;
+				transition: background 0s;
+			}
+
 			&:not(:last-child) {
 				margin-right: 12px;
 			}