From 1badc062f71d1cfd90a7fb36b1cbeecaf48e1b61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8A=E3=81=95=E3=82=80=E3=81=AE=E3=81=B2=E3=81=A8?=
 <46447427+samunohito@users.noreply.github.com>
Date: Sat, 28 Dec 2024 10:23:43 +0900
Subject: [PATCH] sticky footers

---
 locales/index.d.ts                            |  2 +-
 locales/ja-JP.yml                             |  2 +-
 .../custom-emojis-manager.local.list.vue      | 75 ++++++++++++++----
 .../custom-emojis-manager.local.register.vue  | 17 +++-
 .../admin/custom-emojis-manager.local.vue     |  2 +-
 .../admin/custom-emojis-manager.remote.vue    | 77 +++++++++++++++----
 6 files changed, 138 insertions(+), 37 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 373726fcb515..72699905ce57 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -10616,7 +10616,7 @@ export interface Locale extends ILocale {
              */
             "importSelectionRangesRows": string;
             /**
-             * チェックがついた絵文字をインポート
+             * チェックされた絵文字をインポート
              */
             "importEmojisButton": string;
             /**
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index b6612032d678..885d9ffe19fc 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2832,7 +2832,7 @@ _customEmojisManager:
   _remote:
     importSelectionRows: "選択行をインポート"
     importSelectionRangesRows: "選択範囲の行をインポート"
-    importEmojisButton: "チェックがついた絵文字をインポート"
+    importEmojisButton: "チェックされた絵文字をインポート"
     confirmImportEmojisTitle: "絵文字のインポート"
     confirmImportEmojisDescription: "リモートから受信した{count}個の絵文字のインポートを行います。絵文字のライセンスに十分な注意を払ってください。実行しますか？"
   _local:
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 5b4b199aa0aa..aa358ba8cacc 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
@@ -145,18 +145,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkGrid :data="gridItems" :settings="setupGrid()" @event="onGridEvent"/>
 				</div>
 
-				<MkPagingButtons :current="currentPage" :max="allPages" :buttonCount="5" @pageChanged="onPageChanged"/>
-			</template>
+				<div :class="$style.footer">
+					<div :class="$style.left">
+						<MkButton danger style="margin-right: auto" @click="onDeleteButtonClicked">
+							{{ i18n.ts.delete }} ({{ deleteItemsCount }})
+						</MkButton>
+					</div>
 
-			<div :class="$style.buttons">
-				<MkButton danger style="margin-right: auto" @click="onDeleteButtonClicked">{{ i18n.ts.delete }}</MkButton>
-				<MkButton primary :disabled="updateButtonDisabled" @click="onUpdateButtonClicked">
-					{{
-						i18n.ts.update
-					}}
-				</MkButton>
-				<MkButton @click="onGridResetButtonClicked">{{ i18n.ts.reset }}</MkButton>
-			</div>
+					<div :class="$style.center">
+						<MkPagingButtons :current="currentPage" :max="allPages" :buttonCount="5" @pageChanged="onPageChanged"/>
+					</div>
+
+					<div :class="$style.right">
+						<MkButton primary :disabled="updateButtonDisabled" @click="onUpdateButtonClicked">
+							{{ i18n.ts.update }} ({{ updatedItemsCount }})
+						</MkButton>
+						<MkButton @click="onGridResetButtonClicked">{{ i18n.ts.reset }}</MkButton>
+					</div>
+				</div>
+			</template>
 		</div>
 	</template>
 </MkStickyContainer>
@@ -388,6 +395,10 @@ const updateButtonDisabled = ref<boolean>(false);
 
 const spMode = computed(() => ['smartphone', 'tablet'].includes(deviceKind));
 const queryRolesText = computed(() => queryRoles.value.map(it => it.name).join(','));
+const updatedItemsCount = computed(() => {
+	return gridItems.value.filter((it, idx) => !it.checked && JSON.stringify(it) !== JSON.stringify(originGridItems.value[idx])).length;
+});
+const deleteItemsCount = computed(() => gridItems.value.filter(it => it.checked).length);
 
 async function onUpdateButtonClicked() {
 	const _items = gridItems.value;
@@ -698,12 +709,44 @@ onMounted(async () => {
 	padding-bottom: 8px;
 }
 
-.buttons {
-	display: flex;
-	align-items: flex-end;
-	justify-content: center;
+.footer {
+	background-color: var(--MI_THEME-bg);
+
+	position: sticky;
+	left:0;
+	bottom:0;
+	z-index: 1;
+	// stickyで追従させる都合上、フッター自身でpaddingを持つ必要があるため、親要素で画一的に指定している分をネガティブマージンで相殺している
+	margin-top: calc(var(--MI-margin) * -1);
+	margin-bottom: calc(var(--MI-margin) * -1);
+	padding-top: var(--MI-margin);
+	padding-bottom: var(--MI-margin);
+
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
 	gap: 8px;
-	flex-wrap: wrap;
+
+	& .left {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 8px;
+	}
+
+	& .center {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+	}
+
+	& .right {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		flex-direction: row;
+		gap: 8px;
+	}
 }
 
 .divider {
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 dabe5292cfeb..a3de5de56911 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
@@ -56,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		/>
 	</div>
 
-	<div v-if="gridItems.length > 0" :class="$style.buttons">
+	<div v-if="gridItems.length > 0" :class="$style.footer">
 		<MkButton primary :disabled="registerButtonDisabled" @click="onRegistryClicked">
 			{{ i18n.ts.registration }}
 		</MkButton>
@@ -456,8 +456,19 @@ onMounted(async () => {
 	padding-bottom: 8px;
 }
 
-.buttons {
-	margin-top: 16px;
+.footer {
+	background-color: var(--MI_THEME-bg);
+
+	position: sticky;
+	left:0;
+	bottom:0;
+	z-index: 1;
+	// stickyで追従させる都合上、フッター自身でpaddingを持つ必要があるため、親要素で画一的に指定している分をネガティブマージンで相殺している
+	margin-top: calc(var(--MI-margin) * -1);
+	margin-bottom: calc(var(--MI-margin) * -1);
+	padding-top: var(--MI-margin);
+	padding-bottom: var(--MI-margin);
+
 	display: flex;
 	gap: 8px;
 	flex-wrap: wrap;
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 2713a77a1943..ea4303f342fb 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.local.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.local.vue
@@ -31,6 +31,6 @@ const modeTab = ref<PageMode>('list');
 
 <style module lang="scss">
 .root {
-	padding: 16px;
+	padding: var(--MI-margin);
 }
 </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 cb5891cdc2ca..3df72f4976c4 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue
@@ -86,23 +86,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkGrid :data="gridItems" :settings="setupGrid()" @event="onGridEvent"/>
 				</div>
 
-				<MkPagingButtons :current="currentPage" :max="allPages" :buttonCount="5" @pageChanged="onPageChanged"/>
-			</template>
+				<div :class="$style.footer">
+					<div>
+						<!-- レイアウト調整用のスペース -->
+					</div>
 
-			<div v-if="gridItems.length > 0" class="_gaps" :class="$style.buttons">
-				<MkButton primary @click="onImportClicked">
-					{{
-						i18n.ts._customEmojisManager._remote.importEmojisButton
-					}}
-				</MkButton>
-			</div>
+					<div :class="$style.center">
+						<MkPagingButtons :current="currentPage" :max="allPages" :buttonCount="5" @pageChanged="onPageChanged"/>
+					</div>
+
+					<div :class="$style.right">
+						<MkButton primary @click="onImportClicked">
+							{{
+								i18n.ts._customEmojisManager._remote.importEmojisButton
+							}} ({{ checkedItemsCount }})
+						</MkButton>
+					</div>
+				</div>
+			</template>
 		</div>
 	</template>
 </MkStickyContainer>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, useCssModule } from 'vue';
 import * as Misskey from 'misskey-js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
@@ -134,8 +142,19 @@ type GridItem = {
 }
 
 function setupGrid(): GridSetting {
+	const $style = useCssModule();
+
 	return {
 		row: {
+			// グリッドの行数をあらかじめ100行確保する
+			minimumDefinitionCount: 100,
+			styleRules: [
+				{
+					// チェックされたら背景色を変える
+					condition: ({ row }) => gridItems.value[row.index].checked,
+					applyStyle: { className: $style.changedRow },
+				},
+			],
 			contextMenuFactory: (row, context) => {
 				return [
 					{
@@ -191,6 +210,7 @@ const requestLogs = ref<RequestLogItem[]>([]);
 const gridItems = ref<GridItem[]>([]);
 
 const spMode = computed(() => ['smartphone', 'tablet'].includes(deviceKind));
+const checkedItemsCount = computed(() => gridItems.value.filter(it => it.checked).length);
 
 function onSortOrderUpdate(_sortOrders: SortOrder<GridSortOrderKey>[]) {
 	sortOrders.value = _sortOrders;
@@ -294,7 +314,7 @@ async function refreshCustomEmojis() {
 			limit: 100,
 			query: query,
 			page: currentPage.value,
-			sortKeys: sortOrders.value.map(({ key, direction }) => `${direction}${key}`),
+			sortKeys: sortOrders.value.map(({ key, direction }) => `${direction}${key}`) as never[],
 		}),
 		() => {
 		},
@@ -340,6 +360,10 @@ onMounted(async () => {
 	padding: 16px;
 }
 
+.changedRow {
+	background-color: var(--MI_THEME-infoBg);
+}
+
 .searchArea {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
@@ -385,10 +409,33 @@ onMounted(async () => {
 	}
 }
 
-.buttons {
-	display: inline-flex;
-	margin-left: auto;
+.footer {
+	background-color: var(--MI_THEME-bg);
+
+	position: sticky;
+	left:0;
+	bottom:0;
+	z-index: 1;
+	// stickyで追従させる都合上、フッター自身でpaddingを持つ必要があるため、親要素で画一的に指定している分をネガティブマージンで相殺している
+	margin-top: calc(var(--MI-margin) * -1);
+	margin-bottom: calc(var(--MI-margin) * -1);
+	padding-top: var(--MI-margin);
+	padding-bottom: var(--MI-margin);
+
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
 	gap: 8px;
-	flex-wrap: wrap;
+
+	& .center {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	& .right {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+	}
 }
 </style>