starred/sky_phone
1
0
Fork 0
mirror of https://github.com/sky-systems/sky_phone.git synced 2026-08-31 18:28:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

ENH - animate Local Pages app handoff

Browse Source
This commit is contained in:
smx.pusha
2026-08-06 14:23:00 +02:00
parent e533baf1ac
commit a9633c1685
4 changed files with 40 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+5 -2
View File
@@ -90,6 +90,9 @@ const notifications = useNotificationsStore()
const route = useRoute()
const router = useRouter()
const isAppRoute = computed(() => route.name === 'app')
const appTransitionName = computed(() =>
route.query.transition === 'app-switch' ? 'app-switch' : 'app-window',
)
const isLocked = ref(false)
const isUnlocking = ref(false)
const simPicker = ref<SimPickerPayload | null>(null)
@@ -430,8 +433,8 @@ onBeforeUnmount(() => {
<PhoneStatusBar v-if="!isLocked" />
<SpringboardView />
<RouterView v-slot="{ Component }">
<Transition name="app-window">
<component :is="Component" v-if="isAppRoute" />
<Transition :name="appTransitionName">
<component :is="Component" v-if="isAppRoute" :key="route.path" />
</Transition>
</RouterView>
<PhoneHomeIndicator v-if="!isLocked" />
frontend/src/assets/main.css
+29
View File
@@ -1026,6 +1026,35 @@ button {
opacity: 1;
border-radius: 0;
}
.app-switch-enter-active,
.app-switch-leave-active {
transition:
transform 0.38s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.28s ease,
border-radius 0.38s ease;
}
.app-switch-enter-active {
z-index: 51;
}
.app-switch-leave-active {
z-index: 50;
}
.app-switch-enter-from {
transform: translateX(100%) scale(0.98);
opacity: 0.75;
border-radius: 24px;
}
.app-switch-leave-to {
transform: translateX(-22%) scale(0.96);
opacity: 0.35;
border-radius: 18px;
}
.app-switch-enter-to,
.app-switch-leave-from {
transform: none;
opacity: 1;
border-radius: 0;
}
.native-app {
position: absolute;
inset: 0;
frontend/src/views/apps/LocalPagesApp.vue
+4 -1
View File
@@ -189,7 +189,10 @@ function openCityMarktListing(): void {
if (!selected.value?.citymarkt_listing_id) return
void router.push({
path: '/apps/citymarkt',
query: { listingId: selected.value.citymarkt_listing_id },
query: {
listingId: selected.value.citymarkt_listing_id,
transition: 'app-switch',
},
})
}
sky_phone/source/html/index.html
+2 -2
View File
@@ -4,8 +4,8 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sky Phone</title>
<script type="module" crossorigin src="./assets/sky-index-oSNQWB4g.js"></script>
<link rel="stylesheet" crossorigin href="./assets/sky-index-D9eWeoNZ.css">
<script type="module" crossorigin src="./assets/sky-index-BNUbi_E0.js"></script>
<link rel="stylesheet" crossorigin href="./assets/sky-index-DMAIEjGF.css">
</head>
<body>
<div id="app"></div>