mirror of
https://github.com/sky-systems/sky_phone.git
synced 2026-08-30 09:48:57 +00:00
Leon.Schmidt
36b859cabb
* FIX - layer dynamic island above phone camera The phone screen stacking context kept the Dynamic Island below the physical frame and its camera lens. Render the island at device-shell level, position it around the lens, and keep expanded notification spacing in sync. * ADD - preview all dynamic island states Reuse the runtime component for a development-only gallery and size expanded previews to the actual phone display so they cannot be clipped. * FIX - match dynamic island live activity behavior Show each activity only outside its owning app, use reference-sized activity layouts, and remove the separate expand glyph in favor of direct island taps. * FIX - refine dynamic island live controls Keep background activity state separate from foreground visibility so the island remains visible in the compact closed-phone peek. Match the timer, stopwatch, music, collapse, and spacing behavior to the supplied references. * FIX - keep business call availability after closing Stop treating the closed phone UI as the end of business-call readiness. Route background service-line calls only after revalidating the employee, owned device, and registered SIM. * FIX - remove dock apps from home grid The stored Home layout treated dock and grid shortcuts independently, so default dock apps appeared twice. Let the dock own those default placements and migrate saved layouts by removing matching grid shortcuts. * FIX - keep memo island active after closing Memo recording was cancelled as soon as the UI closed, while uploads required an active UI session and reopening a locked phone forced the home route. Keep the recorder bound to the physical device, revalidate device ownership server-side for uploads, preserve the last route behind the lock screen, and render only a compact frame, display, and live Dynamic Island while closed. * ENH - align live activity controls with phone hardware Report compact live-activity state to the client so Space opens Home or the enabled lock screen contextually. Apply the phone hardware volume as a shared output level for app media, games, YouTube playback, radio, and auxiliary sounds, and render the volume speaker icon in grey. * FIX - hide paused music live activity The music island previously depended only on the selected track, which remains set after playback pauses. Require active playback as well so the island closes when music stops while preserving the track for later resume. --------- Co-authored-by: DerEchteAlec <bycraky@gmail.com>
304 lines
6.4 KiB
Vue
304 lines
6.4 KiB
Vue
<script setup lang="ts">
|
|
import PhoneDynamicIsland from '@/components/PhoneDynamicIsland.vue'
|
|
import type { DynamicIslandActivity } from '@/types/dynamicIsland'
|
|
|
|
type GalleryVariant = {
|
|
activity: DynamicIslandActivity
|
|
expanded: boolean
|
|
eyebrow: string
|
|
label: string
|
|
progress?: number
|
|
subtitle: string
|
|
title: string
|
|
value: string
|
|
}
|
|
|
|
type GalleryGroup = {
|
|
label: string
|
|
variants: GalleryVariant[]
|
|
}
|
|
|
|
const galleryGroups: GalleryGroup[] = [
|
|
{
|
|
label: 'Incoming call',
|
|
variants: [
|
|
{
|
|
activity: 'incoming-call',
|
|
expanded: true,
|
|
eyebrow: 'Incoming call',
|
|
label: 'Expanded',
|
|
subtitle: 'mobile',
|
|
title: 'Tania Castillo',
|
|
value: 'Incoming',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: 'Active call',
|
|
variants: [
|
|
{
|
|
activity: 'call',
|
|
expanded: false,
|
|
eyebrow: 'Connected',
|
|
label: 'Compact',
|
|
subtitle: '00:42',
|
|
title: 'Alex Rivera',
|
|
value: '00:42',
|
|
},
|
|
{
|
|
activity: 'call',
|
|
expanded: true,
|
|
eyebrow: 'Connected',
|
|
label: 'Expanded',
|
|
subtitle: '00:42',
|
|
title: 'Alex Rivera',
|
|
value: '00:42',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: 'Music',
|
|
variants: [
|
|
{
|
|
activity: 'music',
|
|
expanded: false,
|
|
eyebrow: 'Now Playing',
|
|
label: 'Compact',
|
|
progress: 0.64,
|
|
subtitle: 'Los Santos Radio',
|
|
title: 'Night Drive',
|
|
value: 'Night Drive',
|
|
},
|
|
{
|
|
activity: 'music',
|
|
expanded: true,
|
|
eyebrow: 'Now Playing',
|
|
label: 'Expanded',
|
|
progress: 0.64,
|
|
subtitle: 'Los Santos Radio',
|
|
title: 'Night Drive',
|
|
value: 'Night Drive',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: 'Voice recording',
|
|
variants: [
|
|
{
|
|
activity: 'recording',
|
|
expanded: false,
|
|
eyebrow: 'Recording',
|
|
label: 'Compact',
|
|
subtitle: 'Voice memo',
|
|
title: '00:37',
|
|
value: '00:37',
|
|
},
|
|
{
|
|
activity: 'recording',
|
|
expanded: true,
|
|
eyebrow: 'Recording',
|
|
label: 'Expanded',
|
|
subtitle: 'Voice memo',
|
|
title: '00:37',
|
|
value: '00:37',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: 'Timer',
|
|
variants: [
|
|
{
|
|
activity: 'timer',
|
|
expanded: false,
|
|
eyebrow: 'Timer',
|
|
label: 'Compact',
|
|
progress: 0.47,
|
|
subtitle: '',
|
|
title: '0:21',
|
|
value: '0:21',
|
|
},
|
|
{
|
|
activity: 'timer',
|
|
expanded: true,
|
|
eyebrow: 'Timer',
|
|
label: 'Expanded',
|
|
progress: 0.47,
|
|
subtitle: '',
|
|
title: '0:21',
|
|
value: '0:21',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: 'Stopwatch',
|
|
variants: [
|
|
{
|
|
activity: 'stopwatch',
|
|
expanded: false,
|
|
eyebrow: 'Stopwatch',
|
|
label: 'Compact',
|
|
subtitle: '',
|
|
title: '00:11,48',
|
|
value: '00:11,48',
|
|
},
|
|
{
|
|
activity: 'stopwatch',
|
|
expanded: true,
|
|
eyebrow: 'Stopwatch',
|
|
label: 'Expanded',
|
|
subtitle: '',
|
|
title: '00:11,48',
|
|
value: '00:11,48',
|
|
},
|
|
],
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<main class="dynamic-island-gallery">
|
|
<header class="dynamic-island-gallery__header">
|
|
<span>Development preview</span>
|
|
<h1>Dynamic Islands</h1>
|
|
<p>Every runtime activity in its supported compact and expanded state.</p>
|
|
</header>
|
|
|
|
<section
|
|
v-for="group in galleryGroups"
|
|
:key="group.label"
|
|
class="dynamic-island-gallery__group"
|
|
>
|
|
<h2>{{ group.label }}</h2>
|
|
<article
|
|
v-for="variant in group.variants"
|
|
:key="`${variant.activity}-${variant.label}`"
|
|
class="dynamic-island-gallery__variant"
|
|
>
|
|
<span>{{ variant.label }}</span>
|
|
<div
|
|
class="dynamic-island-gallery__stage"
|
|
:class="{
|
|
'dynamic-island-gallery__stage--expanded': variant.expanded,
|
|
}"
|
|
>
|
|
<PhoneDynamicIsland
|
|
class="dynamic-island-gallery__preview"
|
|
preview
|
|
:preview-activity="variant.activity"
|
|
:preview-expanded="variant.expanded"
|
|
:preview-eyebrow="variant.eyebrow"
|
|
:preview-progress="variant.progress"
|
|
:preview-subtitle="variant.subtitle"
|
|
:preview-title="variant.title"
|
|
:preview-value="variant.value"
|
|
/>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dynamic-island-gallery {
|
|
position: absolute;
|
|
z-index: 2;
|
|
inset: 0;
|
|
overflow-y: auto;
|
|
padding: 58px 6px 32px;
|
|
color: #f7f7fb;
|
|
background:
|
|
radial-gradient(circle at 50% 0%, rgb(96 75 180 / 22%), transparent 30%),
|
|
linear-gradient(180deg, #111116 0%, #070709 100%);
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.dynamic-island-gallery::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.dynamic-island-gallery__header,
|
|
.dynamic-island-gallery__group {
|
|
width: 100%;
|
|
max-width: 356px;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.dynamic-island-gallery__header {
|
|
padding: 4px 8px 18px;
|
|
}
|
|
|
|
.dynamic-island-gallery__header span,
|
|
.dynamic-island-gallery__variant > span {
|
|
color: #a7a7b3;
|
|
font-size: 11px;
|
|
font-weight: 650;
|
|
letter-spacing: 0.55px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.dynamic-island-gallery__header h1 {
|
|
margin: 4px 0 5px;
|
|
font-size: 28px;
|
|
letter-spacing: -0.8px;
|
|
}
|
|
|
|
.dynamic-island-gallery__header p {
|
|
margin: 0;
|
|
color: #b6b6c2;
|
|
font-size: 12px;
|
|
line-height: 17px;
|
|
}
|
|
|
|
.dynamic-island-gallery__group {
|
|
padding: 14px 0 18px;
|
|
border-top: 1px solid rgb(255 255 255 / 9%);
|
|
}
|
|
|
|
.dynamic-island-gallery__group h2 {
|
|
margin: 0 8px 10px;
|
|
font-size: 15px;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.dynamic-island-gallery__variant + .dynamic-island-gallery__variant {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.dynamic-island-gallery__variant > span {
|
|
display: block;
|
|
margin: 0 10px 5px;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.dynamic-island-gallery__stage {
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 72px;
|
|
overflow: hidden;
|
|
place-items: center;
|
|
border: 1px solid rgb(255 255 255 / 8%);
|
|
border-radius: 30px;
|
|
background:
|
|
radial-gradient(circle at 70% 15%, rgb(93 89 255 / 24%), transparent 34%),
|
|
#1a1a22;
|
|
}
|
|
|
|
.dynamic-island-gallery__stage--expanded {
|
|
min-height: 142px;
|
|
}
|
|
|
|
:deep(.dynamic-island-gallery__preview.phone-dynamic-island) {
|
|
position: relative;
|
|
top: auto;
|
|
left: auto;
|
|
max-width: calc(100% - 12px);
|
|
transform: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.dynamic-island-gallery {
|
|
scroll-behavior: auto;
|
|
}
|
|
}
|
|
</style>
|