MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add soft shadows inside modal to hint at scrolling behavior

This commit is contained in:
upsiflu 2025-02-12 14:51:38 +01:00
parent 283b017f59
commit 2960b939d9
2 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/components/ui/Modal.vue
View File

@ -52,7 +52,7 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
]" ]"
v-bind="{...$attrs, ...color(props)}" v-bind="{...$attrs, ...color(props)}"
> >
<Layout flex gap-12 style="padding: 12px;"> <Layout flex gap-12 style="padding: 12px 12px 0 12px;">
<div style="width: 48px;" v-if="!$slots.topleft && !icon" /> <div style="width: 48px;" v-if="!$slots.topleft && !icon" />
<div v-if="icon" style="display: flex; justify-content: center; align-items: center; width: 48px;"> <div v-if="icon" style="display: flex; justify-content: center; align-items: center; width: 48px;">
<i :class="['bi', icon]" style="font-size: 18px;"/> <i :class="['bi', icon]" style="font-size: 18px;"/>
@ -70,6 +70,8 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
<!-- Content --> <!-- Content -->
<div class="modal-shadow-top" />
<div class="modal-content"> <div class="modal-content">
<Transition> <Transition>
<div v-if="$slots.alert" class="alert-container"> <div v-if="$slots.alert" class="alert-container">
@ -81,9 +83,11 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
<slot /> <slot />
<Spacer size-46 v-if="!$slots.actions" /> <Spacer v-if="!$slots.actions" />
</div> </div>
<div class="modal-shadow-bottom" />
<!-- Actions slot --> <!-- Actions slot -->
<Layout flex gap-12 style="flex-wrap: wrap;" v-if="$slots.actions || cancel" class="modal-actions"> <Layout flex gap-12 style="flex-wrap: wrap;" v-if="$slots.actions || cancel" class="modal-actions">

27
front/src/components/ui/modal.scss
View File

@ -10,6 +10,8 @@
max-height: 90vh; max-height: 90vh;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
position: relative;
&.is-destructive { &.is-destructive {
border-top: 24px solid var(--fw-red-400); border-top: 24px solid var(--fw-red-400);
@ -37,7 +39,7 @@
} }
.modal-content { .modal-content {
padding: 1rem 2rem; padding: 1rem 2rem 3rem 2rem;
overflow: auto; overflow: auto;
position: relative; position: relative;
@ -65,6 +67,27 @@
} }
} }
.modal-shadow-top {
z-index: 2;
height: 16px;
width: 100%;
position: absolute;
top: 60px;
background:linear-gradient(var(--background-color), color-mix(in oklab, var(--background-color) 50%, transparent), color-mix(in oklab, var(--background-color) 20%, transparent), transparent);
}
.modal-shadow-bottom {
height: 32px;
margin-top: -32px;
position: sticky;
bottom: 0px;
background:linear-gradient(transparent, color-mix(in oklab, var(--background-color) 20%, transparent), color-mix(in oklab, var(--background-color) 50%, transparent), var(--background-color));
&:last-child{
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
}
}
.modal-actions { .modal-actions {
padding: 0 2rem 1rem 2rem; padding: 0 2rem 1rem 2rem;
display: flex; display: flex;
@ -78,6 +101,8 @@
> :last-child { > :last-child {
margin-right: 0px !important; margin-right: 0px !important;
} }
position: relative;
} }
} }