starred/sky_phone
1
0
Fork 0
mirror of https://github.com/sky-systems/sky_phone.git synced 2026-09-04 01:03:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

ADD - support home screen app folders

Browse Source
This commit is contained in:
smx.pusha
2026-08-13 13:15:25 +02:00
parent 90909e41f2
commit bc4b439eb6
15 changed files with 1976 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/ui/overlays.css
+33
View File
@@ -16,6 +16,30 @@
background: rgba(0, 0, 0, 0.48);
}
.sky-sheet-rise-enter-active .sky-overlay-backdrop,
.sky-sheet-rise-leave-active .sky-overlay-backdrop {
transition: opacity 220ms ease;
}
.sky-sheet-rise-enter-active .sky-sheet__panel,
.sky-sheet-rise-leave-active .sky-sheet__panel {
transition:
opacity 220ms ease,
transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.sky-sheet-rise-enter-from .sky-overlay-backdrop,
.sky-sheet-rise-leave-to .sky-overlay-backdrop {
opacity: 0;
}
.sky-sheet-rise-enter-from .sky-sheet__panel,
.sky-sheet-rise-leave-to .sky-sheet__panel {
opacity: 0;
transform: translateY(100%);
}
.sky-sheet__panel,
.sky-action-sheet__panel {
position: absolute;
@@ -264,3 +288,12 @@
.sky-messagebar textarea:disabled {
opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
.sky-sheet-rise-enter-active .sky-overlay-backdrop,
.sky-sheet-rise-leave-active .sky-overlay-backdrop,
.sky-sheet-rise-enter-active .sky-sheet__panel,
.sky-sheet-rise-leave-active .sky-sheet__panel {
transition-duration: 0.01ms !important;
}
}
frontend/src/ui/overlays/SkySheet.vue
+28 -22
View File
@@ -54,27 +54,33 @@ useOverlayFocusTrap({
</script>
<template>
<div v-if="opened" ref="root" v-bind="$attrs" class="sky-sheet">
<div
class="sky-overlay-backdrop"
aria-hidden="true"
@click="emit('backdropclick')"
></div>
<div
ref="panel"
class="sky-sheet__panel"
:role="inferredRole"
:aria-modal="
inferredRole === 'dialog' || inferredRole === 'alertdialog'
? ariaModal
: undefined
"
:aria-label="inferredRole ? ariaLabel : undefined"
:aria-labelledby="inferredRole ? ariaLabelledby : undefined"
:aria-describedby="inferredRole ? ariaDescribedby : undefined"
:tabindex="tabindex"
>
<slot />
<Transition
name="sky-sheet-rise"
:duration="{ enter: 320, leave: 320 }"
appear
>
<div v-if="opened" ref="root" v-bind="$attrs" class="sky-sheet">
<div
class="sky-overlay-backdrop"
aria-hidden="true"
@click="emit('backdropclick')"
></div>
<div
ref="panel"
class="sky-sheet__panel"
:role="inferredRole"
:aria-modal="
inferredRole === 'dialog' || inferredRole === 'alertdialog'
? ariaModal
: undefined
"
:aria-label="inferredRole ? ariaLabel : undefined"
:aria-labelledby="inferredRole ? ariaLabelledby : undefined"
:aria-describedby="inferredRole ? ariaDescribedby : undefined"
:tabindex="tabindex"
>
<slot />
</div>
</div>
</div>
</Transition>
</template>