summaryrefslogtreecommitdiff
path: root/packages/frontend/src/components/MkFolder.vue
diff options
context:
space:
mode:
authorsyuilo <4439005+syuilo@users.noreply.github.com>2024-09-22 18:26:21 +0900
committersyuilo <4439005+syuilo@users.noreply.github.com>2024-09-22 18:26:21 +0900
commitd435d04eaf992f994ff4e690a658207757c8bdf3 (patch)
treea96592ad6ccd1c842c09191d535b486f4158ea8c /packages/frontend/src/components/MkFolder.vue
parentffix(frontend): lint fixes for tweak control panel (#14607) (diff)
downloadsharkey-d435d04eaf992f994ff4e690a658207757c8bdf3.tar.gz
sharkey-d435d04eaf992f994ff4e690a658207757c8bdf3.tar.bz2
sharkey-d435d04eaf992f994ff4e690a658207757c8bdf3.zip
enhance(frontend): tweak control panel
Diffstat (limited to 'packages/frontend/src/components/MkFolder.vue')
-rw-r--r--packages/frontend/src/components/MkFolder.vue18
1 files changed, 18 insertions, 0 deletions
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>