From d435d04eaf992f994ff4e690a658207757c8bdf3 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 22 Sep 2024 18:26:21 +0900
Subject: enhance(frontend): tweak control panel

---
 packages/frontend/src/components/MkFolder.vue | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

(limited to 'packages/frontend/src/components/MkFolder.vue')

diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index f805be7b57..79676e8354 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -41,6 +41,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkSpacer :marginMin="14" :marginMax="22">
 							<slot></slot>
 						</MkSpacer>
+						<div :class="$style.footer" v-if="withFooter">
+							<slot name="footer"></slot>
+						</div>
 					</div>
 				</KeepAlive>
 			</Transition>
@@ -56,9 +59,11 @@ import { defaultStore } from '@/store.js';
 const props = withDefaults(defineProps<{
 	defaultOpen?: boolean;
 	maxHeight?: number | null;
+	withFooter?: boolean;
 }>(), {
 	defaultOpen: false,
 	maxHeight: null,
+	withFooter: false
 });
 
 const getBgColor = (el: HTMLElement) => {
@@ -224,4 +229,17 @@ onMounted(() => {
 		background: var(--bg);
 	}
 }
+
+.footer {
+	position: sticky !important;
+	z-index: 1;
+	bottom: var(--stickyBottom, 0px);
+	left: 0;
+	padding: 9px 12px;
+	border-top: solid 0.5px var(--divider);
+	background: var(--acrylicBg);
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	border-radius: 0 0 6px 6px;
+}
 </style>
-- 
cgit v1.2.3-freya