mirror of
https://github.com/sky-systems/sky_phone.git
synced 2026-09-01 18:58:58 +00:00
Alec Schitzkat
7cdfac3285
Introduces Graphics Mode settings to toggle between "Performance" (blur-free) and "Ultimate" (full effects) to optimize CEF rendering. Expands device customization with ten new phone frames, standardizes 24-hour time formatting across all apps, and updates the build target to Chrome 103 for better compatibility.
50 lines
1.4 KiB
Vue
50 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
|
import PhoneStatusIndicators from '@/components/PhoneStatusIndicators.vue'
|
|
import { usePhoneStore } from '@/stores/phone'
|
|
|
|
const phone = usePhoneStore()
|
|
withDefaults(defineProps<{ controlCenterOpened?: boolean }>(), {
|
|
controlCenterOpened: false,
|
|
})
|
|
const emit = defineEmits<{ controlCenter: [] }>()
|
|
const time = ref('')
|
|
let intervalId: number | undefined
|
|
|
|
function updateTime(): void {
|
|
time.value = new Intl.DateTimeFormat([], {
|
|
hour: '2-digit',
|
|
hourCycle: 'h23',
|
|
minute: '2-digit',
|
|
}).format(new Date())
|
|
}
|
|
|
|
onMounted(() => {
|
|
updateTime()
|
|
intervalId = window.setInterval(updateTime, 30_000)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
if (intervalId !== undefined) window.clearInterval(intervalId)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<header class="phone-status-bar" :aria-label="phone.t('Common.phoneStatus')">
|
|
<time class="phone-status-bar__time">{{ time }}</time>
|
|
<button
|
|
class="phone-status-bar__indicators"
|
|
type="button"
|
|
:aria-label="phone.t('ControlCenter.open')"
|
|
:aria-expanded="controlCenterOpened"
|
|
@click.stop="emit('controlCenter')"
|
|
>
|
|
<PhoneStatusIndicators
|
|
:airplane-mode="phone.preferences.settings.airplaneMode"
|
|
:cellular-enabled="phone.preferences.settings.cellularEnabled"
|
|
:wifi-enabled="phone.preferences.settings.wifiEnabled"
|
|
/>
|
|
</button>
|
|
</header>
|
|
</template>
|