From 4025845e54ce2f6c069e26ecacf6674c488ece56 Mon Sep 17 00:00:00 2001
From: samunohito <46447427+samunohito@users.noreply.github.com>
Date: Fri, 29 Mar 2024 09:35:16 +0900
Subject: [PATCH] =?UTF-8?q?MkStickyContainer=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/global/MkStickyContainer.vue   |  17 +-
 .../custom-emojis-manager.local.list.vue      | 257 +++++++++---------
 .../custom-emojis-manager.local.register.vue  |   3 -
 .../admin/custom-emojis-manager.local.vue     |   1 -
 .../admin/custom-emojis-manager.remote.vue    |   3 -
 .../pages/admin/custom-emojis-manager2.vue    |   3 +-
 6 files changed, 144 insertions(+), 140 deletions(-)

diff --git a/packages/frontend/src/components/global/MkStickyContainer.vue b/packages/frontend/src/components/global/MkStickyContainer.vue
index 89993e1b8e..96639aa2b8 100644
--- a/packages/frontend/src/components/global/MkStickyContainer.vue
+++ b/packages/frontend/src/components/global/MkStickyContainer.vue
@@ -18,10 +18,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, provide, inject, Ref, ref, watch, shallowRef } from 'vue';
+import { onMounted, onUnmounted, provide, inject, Ref, ref, watch, shallowRef, toRefs } from 'vue';
 
 import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@/const.js';
 
+const props = withDefaults(defineProps<{
+	headerZIndex?: number;
+	footerZIndex?: number;
+}>(), {
+	headerZIndex: 1000,
+	footerZIndex: 1000,
+});
+
+// non-reactive
+const { headerZIndex, footerZIndex } = props;
+
 const rootEl = shallowRef<HTMLElement>();
 const headerEl = shallowRef<HTMLElement>();
 const footerEl = shallowRef<HTMLElement>();
@@ -79,14 +90,14 @@ onMounted(() => {
 	if (headerEl.value != null) {
 		headerEl.value.style.position = 'sticky';
 		headerEl.value.style.top = 'var(--stickyTop, 0)';
-		headerEl.value.style.zIndex = '1000';
+		headerEl.value.style.zIndex = `${headerZIndex}`;
 		observer.observe(headerEl.value);
 	}
 
 	if (footerEl.value != null) {
 		footerEl.value.style.position = 'sticky';
 		footerEl.value.style.bottom = 'var(--stickyBottom, 0)';
-		footerEl.value.style.zIndex = '1000';
+		footerEl.value.style.zIndex = `${footerZIndex}`;
 		observer.observe(footerEl.value);
 	}
 });
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
index 53d0c609a0..243f090c59 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
@@ -4,139 +4,140 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="_gaps">
-	<MkFolder>
-		<template #icon><i class="ti ti-search"></i></template>
-		<template #label>{{ i18n.ts._customEmojisManager._gridCommon.searchSettings }}</template>
-		<template #caption>
-			{{ i18n.ts._customEmojisManager._gridCommon.searchSettingCaption }}
-		</template>
+<div v-if="gridItems.length === 0" style="text-align: center">
+	{{ i18n.ts._customEmojisManager._local._list.emojisNothing }}
+</div>
 
+<MkStickyContainer v-else>
+	<template #default>
 		<div class="_gaps">
-			<div :class="[[spMode ? $style.searchAreaSp : $style.searchArea]]">
-				<MkInput
-					v-model="queryName"
-					type="search"
-					autocapitalize="off"
-					:class="[$style.col1, $style.row1]"
-					@enter="onSearchRequest"
-				>
-					<template #label>name</template>
-				</MkInput>
-				<MkInput
-					v-model="queryCategory"
-					type="search"
-					autocapitalize="off"
-					:class="[$style.col2, $style.row1]"
-					@enter="onSearchRequest"
-				>
-					<template #label>category</template>
-				</MkInput>
-				<MkInput
-					v-model="queryAliases"
-					type="search"
-					autocapitalize="off"
-					:class="[$style.col3, $style.row1]"
-					@enter="onSearchRequest"
-				>
-					<template #label>aliases</template>
-				</MkInput>
+			<MkFolder>
+				<template #icon><i class="ti ti-search"></i></template>
+				<template #label>{{ i18n.ts._customEmojisManager._gridCommon.searchSettings }}</template>
+				<template #caption>
+					{{ i18n.ts._customEmojisManager._gridCommon.searchSettingCaption }}
+				</template>
 
-				<MkInput
-					v-model="queryType"
-					type="search"
-					autocapitalize="off"
-					:class="[$style.col1, $style.row2]"
-					@enter="onSearchRequest"
-				>
-					<template #label>type</template>
-				</MkInput>
-				<MkInput
-					v-model="queryLicense"
-					type="search"
-					autocapitalize="off"
-					:class="[$style.col2, $style.row2]"
-					@enter="onSearchRequest"
-				>
-					<template #label>license</template>
-				</MkInput>
-				<MkSelect
-					v-model="querySensitive"
-					:class="[$style.col3, $style.row2]"
-				>
-					<template #label>sensitive</template>
-					<option :value="null">-</option>
-					<option :value="true">true</option>
-					<option :value="false">false</option>
-				</MkSelect>
+				<div class="_gaps">
+					<div :class="[[spMode ? $style.searchAreaSp : $style.searchArea]]">
+						<MkInput
+							v-model="queryName"
+							type="search"
+							autocapitalize="off"
+							:class="[$style.col1, $style.row1]"
+							@enter="onSearchRequest"
+						>
+							<template #label>name</template>
+						</MkInput>
+						<MkInput
+							v-model="queryCategory"
+							type="search"
+							autocapitalize="off"
+							:class="[$style.col2, $style.row1]"
+							@enter="onSearchRequest"
+						>
+							<template #label>category</template>
+						</MkInput>
+						<MkInput
+							v-model="queryAliases"
+							type="search"
+							autocapitalize="off"
+							:class="[$style.col3, $style.row1]"
+							@enter="onSearchRequest"
+						>
+							<template #label>aliases</template>
+						</MkInput>
 
-				<MkSelect
-					v-model="queryLocalOnly"
-					:class="[$style.col1, $style.row3]"
-				>
-					<template #label>localOnly</template>
-					<option :value="null">-</option>
-					<option :value="true">true</option>
-					<option :value="false">false</option>
-				</MkSelect>
-				<MkInput
-					v-model="queryUpdatedAtFrom"
-					type="date"
-					autocapitalize="off"
-					:class="[$style.col2, $style.row3]"
-					@enter="onSearchRequest"
-				>
-					<template #label>updatedAt(from)</template>
-				</MkInput>
-				<MkInput
-					v-model="queryUpdatedAtTo"
-					type="date"
-					autocapitalize="off"
-					:class="[$style.col3, $style.row3]"
-					@enter="onSearchRequest"
-				>
-					<template #label>updatedAt(to)</template>
-				</MkInput>
+						<MkInput
+							v-model="queryType"
+							type="search"
+							autocapitalize="off"
+							:class="[$style.col1, $style.row2]"
+							@enter="onSearchRequest"
+						>
+							<template #label>type</template>
+						</MkInput>
+						<MkInput
+							v-model="queryLicense"
+							type="search"
+							autocapitalize="off"
+							:class="[$style.col2, $style.row2]"
+							@enter="onSearchRequest"
+						>
+							<template #label>license</template>
+						</MkInput>
+						<MkSelect
+							v-model="querySensitive"
+							:class="[$style.col3, $style.row2]"
+						>
+							<template #label>sensitive</template>
+							<option :value="null">-</option>
+							<option :value="true">true</option>
+							<option :value="false">false</option>
+						</MkSelect>
 
-				<MkInput
-					v-model="queryRolesText"
-					type="text"
-					readonly
-					autocapitalize="off"
-					:class="[$style.col1, $style.row4]"
-					@click="onQueryRolesEditClicked"
-				>
-					<template #label>role</template>
-					<template #suffix><span class="ti ti-pencil"/></template>
-				</MkInput>
+						<MkSelect
+							v-model="queryLocalOnly"
+							:class="[$style.col1, $style.row3]"
+						>
+							<template #label>localOnly</template>
+							<option :value="null">-</option>
+							<option :value="true">true</option>
+							<option :value="false">false</option>
+						</MkSelect>
+						<MkInput
+							v-model="queryUpdatedAtFrom"
+							type="date"
+							autocapitalize="off"
+							:class="[$style.col2, $style.row3]"
+							@enter="onSearchRequest"
+						>
+							<template #label>updatedAt(from)</template>
+						</MkInput>
+						<MkInput
+							v-model="queryUpdatedAtTo"
+							type="date"
+							autocapitalize="off"
+							:class="[$style.col3, $style.row3]"
+							@enter="onSearchRequest"
+						>
+							<template #label>updatedAt(to)</template>
+						</MkInput>
+
+						<MkInput
+							v-model="queryRolesText"
+							type="text"
+							readonly
+							autocapitalize="off"
+							:class="[$style.col1, $style.row4]"
+							@click="onQueryRolesEditClicked"
+						>
+							<template #label>role</template>
+							<template #suffix><span class="ti ti-pencil"/></template>
+						</MkInput>
+					</div>
+
+					<XSortOrderFolder :sortOrders="sortOrders" @update="onSortOrderUpdate"/>
+
+					<div :class="[[spMode ? $style.searchButtonsSp : $style.searchButtons]]">
+						<MkButton primary @click="onSearchRequest">
+							{{ i18n.ts.search }}
+						</MkButton>
+						<MkButton @click="onQueryResetButtonClicked">
+							{{ i18n.ts.reset }}
+						</MkButton>
+					</div>
+				</div>
+			</MkFolder>
+
+			<XRegisterLogsFolder :logs="requestLogs"/>
+
+			<div :class="$style.gridArea">
+				<MkGrid :data="gridItems" :settings="setupGrid()" @event="onGridEvent"/>
 			</div>
 
-			<XSortOrderFolder :sortOrders="sortOrders" @update="onSortOrderUpdate"/>
+			<MkPagingButtons :current="currentPage" :max="allPages" :buttonCount="5" @pageChanged="onPageChanged"/>
 
-			<div :class="[[spMode ? $style.searchButtonsSp : $style.searchButtons]]">
-				<MkButton primary @click="onSearchRequest">
-					{{ i18n.ts.search }}
-				</MkButton>
-				<MkButton @click="onQueryResetButtonClicked">
-					{{ i18n.ts.reset }}
-				</MkButton>
-			</div>
-		</div>
-	</MkFolder>
-
-	<XRegisterLogsFolder :logs="requestLogs"/>
-
-	<div v-if="gridItems.length === 0" style="text-align: center">
-		{{ i18n.ts._customEmojisManager._local._list.emojisNothing }}
-	</div>
-	<template v-else>
-		<div :class="$style.gridArea">
-			<MkGrid :data="gridItems" :settings="setupGrid()" @event="onGridEvent"/>
-		</div>
-
-		<MkPagingButtons :current="currentPage" :max="allPages" :buttonCount="5" @pageChanged="onPageChanged"/>
-
-		<div class="_gaps">
 			<div :class="$style.buttons">
 				<MkButton danger style="margin-right: auto" @click="onDeleteButtonClicked">{{ i18n.ts.delete }}</MkButton>
 				<MkButton primary :disabled="updateButtonDisabled" @click="onUpdateButtonClicked">
@@ -148,7 +149,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 	</template>
-</div>
+</MkStickyContainer>
 </template>
 
 <script setup lang="ts">
@@ -680,11 +681,8 @@ onMounted(async () => {
 }
 
 .gridArea {
-	overflow-x: auto;
-	overflow-y: hidden;
 	padding-top: 8px;
 	padding-bottom: 8px;
-	resize: vertical;
 }
 
 .buttons {
@@ -699,4 +697,5 @@ onMounted(async () => {
 	margin: 8px 0;
 	border-top: solid 0.5px var(--divider);
 }
+
 </style>
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.local.register.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.local.register.vue
index 751073ac82..d92adc295a 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.local.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.local.register.vue
@@ -452,11 +452,8 @@ onMounted(async () => {
 }
 
 .gridArea {
-	overflow-x: auto;
-	overflow-y: hidden;
 	padding-top: 8px;
 	padding-bottom: 8px;
-	resize: vertical;
 }
 
 .buttons {
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.local.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.local.vue
index 74330ba29a..2713a77a19 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.local.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.local.vue
@@ -32,6 +32,5 @@ const modeTab = ref<PageMode>('list');
 <style module lang="scss">
 .root {
 	padding: 16px;
-	overflow: scroll;
 }
 </style>
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue
index 6546e7c5f2..f60fcbd232 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue
@@ -344,11 +344,8 @@ onMounted(async () => {
 }
 
 .gridArea {
-	overflow-x: auto;
-	overflow-y: hidden;
 	padding-top: 8px;
 	padding-bottom: 8px;
-	resize: vertical;
 }
 
 .pages {
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager2.vue b/packages/frontend/src/pages/admin/custom-emojis-manager2.vue
index 86167c3792..a952a5a3d1 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager2.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager2.vue
@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div>
-	<MkStickyContainer>
+	<!-- コンテナが入れ子になるのでz-indexが被らないよう大きめの数値を設定する-->
+	<MkStickyContainer :headerZIndex="2000">
 		<template #header>
 			<MkPageHeader v-model:tab="headerTab" :tabs="headerTabs"/>
 		</template>