mirror of
https://github.com/sky-systems/sky_phone.git
synced 2026-09-04 16:23:22 +00:00
Merge branch 'dev' into feature/funk
This commit is contained in:
Alec Schitzkat
@@ -0,0 +1,927 @@
|
||||
<script setup lang="ts">
|
||||
import { kGlass, kRange } from 'konsta/vue'
|
||||
import {
|
||||
BellOff,
|
||||
Bluetooth,
|
||||
Calculator,
|
||||
Camera,
|
||||
Flashlight,
|
||||
LockKeyhole,
|
||||
Moon,
|
||||
Plane,
|
||||
Play,
|
||||
RotateCw,
|
||||
Signal,
|
||||
SkipBack,
|
||||
SkipForward,
|
||||
Sun,
|
||||
TimerReset,
|
||||
Volume2,
|
||||
Wifi,
|
||||
} from 'lucide-vue-next'
|
||||
import {
|
||||
computed,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
ref,
|
||||
watch,
|
||||
type CSSProperties,
|
||||
} from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { usePhoneStore } from '@/stores/phone'
|
||||
import { nuiCall } from '@/utils/nui'
|
||||
|
||||
const props = defineProps<{ opened: boolean }>()
|
||||
const emit = defineEmits<{ close: [] }>()
|
||||
|
||||
type ConnectivityPreference =
|
||||
| 'airplaneMode'
|
||||
| 'bluetoothEnabled'
|
||||
| 'cellularEnabled'
|
||||
| 'focusMode'
|
||||
| 'rotationLocked'
|
||||
| 'wifiEnabled'
|
||||
|
||||
const phone = usePhoneStore()
|
||||
const router = useRouter()
|
||||
const panel = ref<HTMLElement | null>(null)
|
||||
const brightness = ref(phone.preferences.settings.screenBrightness)
|
||||
const volume = ref(
|
||||
Math.round(
|
||||
(phone.preferences.settings.notificationVolume +
|
||||
phone.preferences.settings.ringtoneVolume) /
|
||||
2,
|
||||
),
|
||||
)
|
||||
const flashlightActive = ref(false)
|
||||
const flashlightPending = ref(false)
|
||||
const previousAlertVolume = ref(volume.value || 75)
|
||||
|
||||
const inactiveGlassColors = {
|
||||
bgIos: 'bg-[rgba(72,72,74,0.58)]',
|
||||
shadowIos: 'shadow-ios-dark-glass',
|
||||
}
|
||||
const rotationColors = computed(() =>
|
||||
phone.preferences.settings.rotationLocked
|
||||
? {
|
||||
bgIos: 'bg-white',
|
||||
shadowIos: 'shadow-ios-light-glass',
|
||||
}
|
||||
: inactiveGlassColors,
|
||||
)
|
||||
const focusColors = computed(() =>
|
||||
phone.preferences.settings.focusMode
|
||||
? {
|
||||
bgIos: 'bg-[#5e5ce6]',
|
||||
shadowIos: 'shadow-ios-dark-glass',
|
||||
}
|
||||
: inactiveGlassColors,
|
||||
)
|
||||
const alertsMuted = computed(() => volume.value === 0)
|
||||
const alertMuteColors = computed(() =>
|
||||
alertsMuted.value
|
||||
? {
|
||||
bgIos: 'bg-white',
|
||||
shadowIos: 'shadow-ios-light-glass',
|
||||
}
|
||||
: inactiveGlassColors,
|
||||
)
|
||||
const flashlightColors = computed(() =>
|
||||
flashlightActive.value
|
||||
? {
|
||||
bgIos: 'bg-white',
|
||||
shadowIos: 'shadow-ios-light-glass',
|
||||
}
|
||||
: inactiveGlassColors,
|
||||
)
|
||||
const brightnessStyle = computed<CSSProperties>(() => ({
|
||||
'--control-level': `${brightness.value}%`,
|
||||
}))
|
||||
const volumeStyle = computed<CSSProperties>(() => ({
|
||||
'--control-level': `${volume.value}%`,
|
||||
}))
|
||||
|
||||
function togglePreference(key: ConnectivityPreference): void {
|
||||
phone.setPreference(key, !phone.preferences.settings[key])
|
||||
}
|
||||
|
||||
function updateBrightness(event: Event): void {
|
||||
const nextValue = Number.parseInt(
|
||||
(event.target as HTMLInputElement).value,
|
||||
10,
|
||||
)
|
||||
brightness.value = nextValue
|
||||
phone.preferences.settings.screenBrightness = nextValue
|
||||
}
|
||||
|
||||
function saveBrightness(event: Event): void {
|
||||
phone.setPreference(
|
||||
'screenBrightness',
|
||||
Number.parseInt((event.target as HTMLInputElement).value, 10),
|
||||
)
|
||||
}
|
||||
|
||||
function updateVolume(event: Event): void {
|
||||
volume.value = Number.parseInt((event.target as HTMLInputElement).value, 10)
|
||||
}
|
||||
|
||||
function saveVolume(event: Event): void {
|
||||
const nextValue = Number.parseInt(
|
||||
(event.target as HTMLInputElement).value,
|
||||
10,
|
||||
)
|
||||
if (nextValue > 0) previousAlertVolume.value = nextValue
|
||||
phone.setAlertVolumes(nextValue)
|
||||
}
|
||||
|
||||
function toggleAlertMute(): void {
|
||||
if (alertsMuted.value) {
|
||||
volume.value = previousAlertVolume.value
|
||||
} else {
|
||||
previousAlertVolume.value = volume.value
|
||||
volume.value = 0
|
||||
}
|
||||
phone.setAlertVolumes(volume.value)
|
||||
}
|
||||
|
||||
function pointerRangeValue(
|
||||
event: PointerEvent,
|
||||
minimum: number,
|
||||
maximum: number,
|
||||
): number {
|
||||
const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
|
||||
const ratio =
|
||||
1 - Math.min(1, Math.max(0, (event.clientY - rect.top) / rect.height))
|
||||
return Math.round(minimum + ratio * (maximum - minimum))
|
||||
}
|
||||
|
||||
function startBrightnessDrag(event: PointerEvent): void {
|
||||
;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
|
||||
const nextValue = pointerRangeValue(event, 10, 100)
|
||||
brightness.value = nextValue
|
||||
phone.preferences.settings.screenBrightness = nextValue
|
||||
}
|
||||
|
||||
function dragBrightness(event: PointerEvent): void {
|
||||
if (!(event.currentTarget as HTMLElement).hasPointerCapture(event.pointerId))
|
||||
return
|
||||
const nextValue = pointerRangeValue(event, 10, 100)
|
||||
brightness.value = nextValue
|
||||
phone.preferences.settings.screenBrightness = nextValue
|
||||
}
|
||||
|
||||
function finishBrightnessDrag(event: PointerEvent): void {
|
||||
const target = event.currentTarget as HTMLElement
|
||||
if (!target.hasPointerCapture(event.pointerId)) return
|
||||
const nextValue = pointerRangeValue(event, 10, 100)
|
||||
brightness.value = nextValue
|
||||
phone.setPreference('screenBrightness', nextValue)
|
||||
target.releasePointerCapture(event.pointerId)
|
||||
}
|
||||
|
||||
function startVolumeDrag(event: PointerEvent): void {
|
||||
;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
|
||||
volume.value = pointerRangeValue(event, 0, 100)
|
||||
}
|
||||
|
||||
function dragVolume(event: PointerEvent): void {
|
||||
if (!(event.currentTarget as HTMLElement).hasPointerCapture(event.pointerId))
|
||||
return
|
||||
volume.value = pointerRangeValue(event, 0, 100)
|
||||
}
|
||||
|
||||
function finishVolumeDrag(event: PointerEvent): void {
|
||||
const target = event.currentTarget as HTMLElement
|
||||
if (!target.hasPointerCapture(event.pointerId)) return
|
||||
volume.value = pointerRangeValue(event, 0, 100)
|
||||
if (volume.value > 0) previousAlertVolume.value = volume.value
|
||||
phone.setAlertVolumes(volume.value)
|
||||
target.releasePointerCapture(event.pointerId)
|
||||
}
|
||||
|
||||
async function toggleFlashlight(): Promise<void> {
|
||||
if (flashlightPending.value) return
|
||||
const enabled = !flashlightActive.value
|
||||
flashlightActive.value = enabled
|
||||
flashlightPending.value = true
|
||||
const response = await nuiCall('camera:setFlash', { enabled })
|
||||
if (!response.success) flashlightActive.value = !enabled
|
||||
flashlightPending.value = false
|
||||
}
|
||||
|
||||
function openApp(path: string): void {
|
||||
emit('close')
|
||||
void router.push(path)
|
||||
}
|
||||
|
||||
function openTimer(): void {
|
||||
emit('close')
|
||||
void router.push({ path: '/apps/clock', query: { section: 'timer' } })
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.opened,
|
||||
(opened) => {
|
||||
if (!opened) return
|
||||
brightness.value = phone.preferences.settings.screenBrightness
|
||||
volume.value = Math.round(
|
||||
(phone.preferences.settings.notificationVolume +
|
||||
phone.preferences.settings.ringtoneVolume) /
|
||||
2,
|
||||
)
|
||||
if (volume.value > 0) previousAlertVolume.value = volume.value
|
||||
void nextTick(() => panel.value?.focus({ preventScroll: true }))
|
||||
},
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (flashlightActive.value)
|
||||
void nuiCall('camera:setFlash', { enabled: false })
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Transition name="control-center">
|
||||
<section
|
||||
v-if="opened"
|
||||
class="control-center"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-label="phone.t('ControlCenter.label')"
|
||||
>
|
||||
<button
|
||||
class="control-center__backdrop"
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
:aria-label="phone.t('ControlCenter.close')"
|
||||
@click="emit('close')"
|
||||
></button>
|
||||
|
||||
<div ref="panel" class="control-center__panel" tabindex="-1">
|
||||
<div class="control-center__top-grid">
|
||||
<k-glass
|
||||
class="control-center__connectivity"
|
||||
:colors="inactiveGlassColors"
|
||||
:highlight="false"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="control-center__connectivity-button"
|
||||
:class="{
|
||||
'control-center__connectivity-button--airplane':
|
||||
phone.preferences.settings.airplaneMode,
|
||||
}"
|
||||
:aria-label="phone.t('ControlCenter.airplaneMode')"
|
||||
:aria-pressed="phone.preferences.settings.airplaneMode"
|
||||
@click="togglePreference('airplaneMode')"
|
||||
>
|
||||
<Plane aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="control-center__connectivity-button"
|
||||
:class="{
|
||||
'control-center__connectivity-button--cellular':
|
||||
phone.preferences.settings.cellularEnabled,
|
||||
}"
|
||||
:aria-label="phone.t('ControlCenter.cellular')"
|
||||
:aria-pressed="phone.preferences.settings.cellularEnabled"
|
||||
@click="togglePreference('cellularEnabled')"
|
||||
>
|
||||
<Signal aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="control-center__connectivity-button"
|
||||
:class="{
|
||||
'control-center__connectivity-button--wifi':
|
||||
phone.preferences.settings.wifiEnabled,
|
||||
}"
|
||||
:aria-label="phone.t('ControlCenter.wifi')"
|
||||
:aria-pressed="phone.preferences.settings.wifiEnabled"
|
||||
@click="togglePreference('wifiEnabled')"
|
||||
>
|
||||
<Wifi aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="control-center__connectivity-button"
|
||||
:class="{
|
||||
'control-center__connectivity-button--bluetooth':
|
||||
phone.preferences.settings.bluetoothEnabled,
|
||||
}"
|
||||
:aria-label="phone.t('ControlCenter.bluetooth')"
|
||||
:aria-pressed="phone.preferences.settings.bluetoothEnabled"
|
||||
@click="togglePreference('bluetoothEnabled')"
|
||||
>
|
||||
<Bluetooth aria-hidden="true" />
|
||||
</button>
|
||||
</k-glass>
|
||||
|
||||
<k-glass
|
||||
class="control-center__media"
|
||||
:colors="inactiveGlassColors"
|
||||
:highlight="false"
|
||||
>
|
||||
<div class="control-center__media-copy">
|
||||
<span>{{ phone.t('ControlCenter.media') }}</span>
|
||||
<strong>{{ phone.t('ControlCenter.notPlaying') }}</strong>
|
||||
</div>
|
||||
<div class="control-center__media-controls">
|
||||
<button
|
||||
type="button"
|
||||
disabled
|
||||
:aria-label="phone.t('ControlCenter.previous')"
|
||||
>
|
||||
<SkipBack aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled
|
||||
:aria-label="phone.t('ControlCenter.play')"
|
||||
>
|
||||
<Play aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled
|
||||
:aria-label="phone.t('ControlCenter.next')"
|
||||
>
|
||||
<SkipForward aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</k-glass>
|
||||
</div>
|
||||
|
||||
<div class="control-center__middle-grid">
|
||||
<div class="control-center__round-control">
|
||||
<k-glass
|
||||
component="button"
|
||||
type="button"
|
||||
class="control-center__round-button"
|
||||
:class="{
|
||||
'control-center__round-button--light':
|
||||
phone.preferences.settings.rotationLocked,
|
||||
}"
|
||||
:colors="rotationColors"
|
||||
:aria-label="phone.t('ControlCenter.rotationLock')"
|
||||
:aria-pressed="phone.preferences.settings.rotationLocked"
|
||||
@click="togglePreference('rotationLocked')"
|
||||
>
|
||||
<RotateCw aria-hidden="true" />
|
||||
<LockKeyhole
|
||||
class="control-center__rotation-lock"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</k-glass>
|
||||
</div>
|
||||
|
||||
<div class="control-center__round-control">
|
||||
<k-glass
|
||||
component="button"
|
||||
type="button"
|
||||
class="control-center__round-button"
|
||||
:class="{
|
||||
'control-center__round-button--light': alertsMuted,
|
||||
}"
|
||||
:colors="alertMuteColors"
|
||||
:aria-label="
|
||||
phone.t(
|
||||
alertsMuted
|
||||
? 'ControlCenter.unmuteRingtone'
|
||||
: 'ControlCenter.muteRingtone',
|
||||
)
|
||||
"
|
||||
:aria-pressed="alertsMuted"
|
||||
@click="toggleAlertMute"
|
||||
>
|
||||
<BellOff aria-hidden="true" />
|
||||
</k-glass>
|
||||
</div>
|
||||
|
||||
<k-glass
|
||||
class="control-center__slider"
|
||||
:colors="inactiveGlassColors"
|
||||
:highlight="false"
|
||||
:style="brightnessStyle"
|
||||
@pointerdown="startBrightnessDrag"
|
||||
@pointermove="dragBrightness"
|
||||
@pointerup="finishBrightnessDrag"
|
||||
@pointercancel="finishBrightnessDrag"
|
||||
>
|
||||
<span
|
||||
class="control-center__slider-level"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<k-range
|
||||
class="control-center__range"
|
||||
:value="brightness"
|
||||
:min="10"
|
||||
:max="100"
|
||||
:aria-label="phone.t('ControlCenter.brightness')"
|
||||
@input="updateBrightness"
|
||||
@change="saveBrightness"
|
||||
/>
|
||||
<Sun
|
||||
class="control-center__slider-icon"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</k-glass>
|
||||
|
||||
<k-glass
|
||||
class="control-center__slider"
|
||||
:colors="inactiveGlassColors"
|
||||
:highlight="false"
|
||||
:style="volumeStyle"
|
||||
@pointerdown="startVolumeDrag"
|
||||
@pointermove="dragVolume"
|
||||
@pointerup="finishVolumeDrag"
|
||||
@pointercancel="finishVolumeDrag"
|
||||
>
|
||||
<span
|
||||
class="control-center__slider-level"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<k-range
|
||||
class="control-center__range"
|
||||
:value="volume"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:aria-label="phone.t('ControlCenter.volume')"
|
||||
@input="updateVolume"
|
||||
@change="saveVolume"
|
||||
/>
|
||||
<Volume2
|
||||
class="control-center__slider-icon"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</k-glass>
|
||||
|
||||
<k-glass
|
||||
component="button"
|
||||
type="button"
|
||||
class="control-center__focus-button"
|
||||
:colors="focusColors"
|
||||
:aria-label="phone.t('ControlCenter.focus')"
|
||||
:aria-pressed="phone.preferences.settings.focusMode"
|
||||
@click="togglePreference('focusMode')"
|
||||
>
|
||||
<Moon aria-hidden="true" />
|
||||
<span>{{ phone.t('ControlCenter.focus') }}</span>
|
||||
</k-glass>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
class="control-center__quick-actions"
|
||||
:aria-label="phone.t('ControlCenter.quickActions')"
|
||||
>
|
||||
<div class="control-center__quick-action">
|
||||
<k-glass
|
||||
component="button"
|
||||
type="button"
|
||||
class="control-center__quick-button"
|
||||
:class="{
|
||||
'control-center__quick-button--flashlight-active':
|
||||
flashlightActive,
|
||||
}"
|
||||
:colors="flashlightColors"
|
||||
:disabled="flashlightPending"
|
||||
:aria-label="phone.t('ControlCenter.flashlight')"
|
||||
:aria-pressed="flashlightActive"
|
||||
@click="toggleFlashlight"
|
||||
>
|
||||
<Flashlight aria-hidden="true" />
|
||||
</k-glass>
|
||||
<span>{{ phone.t('ControlCenter.flashlight') }}</span>
|
||||
</div>
|
||||
<div class="control-center__quick-action">
|
||||
<k-glass
|
||||
component="button"
|
||||
type="button"
|
||||
class="control-center__quick-button"
|
||||
:colors="inactiveGlassColors"
|
||||
:aria-label="phone.t('ControlCenter.timer')"
|
||||
@click="openTimer"
|
||||
>
|
||||
<TimerReset aria-hidden="true" />
|
||||
</k-glass>
|
||||
<span>{{ phone.t('ControlCenter.timer') }}</span>
|
||||
</div>
|
||||
<div class="control-center__quick-action">
|
||||
<k-glass
|
||||
component="button"
|
||||
type="button"
|
||||
class="control-center__quick-button"
|
||||
:colors="inactiveGlassColors"
|
||||
:aria-label="phone.t('ControlCenter.camera')"
|
||||
@click="openApp('/apps/camera')"
|
||||
>
|
||||
<Camera aria-hidden="true" />
|
||||
</k-glass>
|
||||
<span>{{ phone.t('ControlCenter.camera') }}</span>
|
||||
</div>
|
||||
<div class="control-center__quick-action">
|
||||
<k-glass
|
||||
component="button"
|
||||
type="button"
|
||||
class="control-center__quick-button"
|
||||
:colors="inactiveGlassColors"
|
||||
:aria-label="phone.t('ControlCenter.calculator')"
|
||||
@click="openApp('/apps/calculator')"
|
||||
>
|
||||
<Calculator aria-hidden="true" />
|
||||
</k-glass>
|
||||
<span>{{ phone.t('ControlCenter.calculator') }}</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.control-center {
|
||||
position: absolute;
|
||||
z-index: 95;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.control-center__backdrop {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background: rgba(20, 20, 24, 0.34);
|
||||
backdrop-filter: blur(25px) saturate(1.45);
|
||||
-webkit-backdrop-filter: blur(25px) saturate(1.45);
|
||||
}
|
||||
|
||||
.control-center__panel {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 70px 18px 30px;
|
||||
outline: none;
|
||||
pointer-events: none;
|
||||
transform-origin: calc(100% - 38px) 18px;
|
||||
}
|
||||
|
||||
.control-center__top-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.control-center__connectivity,
|
||||
.control-center__media {
|
||||
min-width: 0;
|
||||
height: 154px;
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.control-center__connectivity {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.control-center__connectivity-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
background: rgba(72, 72, 74, 0.64);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
||||
0 2px 5px rgba(0, 0, 0, 0.28);
|
||||
transition:
|
||||
background 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
.control-center__connectivity-button--airplane {
|
||||
background: #ff9f0a;
|
||||
}
|
||||
|
||||
.control-center__connectivity-button--cellular {
|
||||
background: #34c759;
|
||||
}
|
||||
|
||||
.control-center__connectivity-button--wifi,
|
||||
.control-center__connectivity-button--bluetooth {
|
||||
background: #0a84ff;
|
||||
}
|
||||
|
||||
.control-center__connectivity-button:active,
|
||||
.control-center__round-button:active,
|
||||
.control-center__quick-button:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.control-center__connectivity-button svg {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
stroke-width: 2.3;
|
||||
}
|
||||
|
||||
.control-center__connectivity-button:first-child svg {
|
||||
fill: currentcolor;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.control-center__media {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 21px 18px 17px;
|
||||
}
|
||||
|
||||
.control-center__media-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.control-center__media-copy span {
|
||||
color: rgba(255, 255, 255, 0.66);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.control-center__media-copy strong {
|
||||
overflow: hidden;
|
||||
font-size: 17px;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.control-center__media-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.control-center__media-controls button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control-center__media-controls button:nth-child(2) svg {
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.control-center__media-controls svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.control-center__middle-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, 73px);
|
||||
gap: 10px;
|
||||
min-height: 156px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.control-center__round-control,
|
||||
.control-center__quick-action {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.control-center__round-control {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.control-center__round-control > span,
|
||||
.control-center__quick-action > span {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.control-center__round-button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 73px;
|
||||
height: 73px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
transition: transform 160ms ease;
|
||||
}
|
||||
|
||||
.control-center__round-button--light {
|
||||
color: #ff453a;
|
||||
}
|
||||
|
||||
.control-center__focus-button {
|
||||
display: flex;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 2;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
min-width: 0;
|
||||
height: 73px;
|
||||
padding: 0 22px;
|
||||
border: 0;
|
||||
border-radius: 37px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
transition: transform 160ms ease;
|
||||
}
|
||||
|
||||
.control-center__focus-button:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.control-center__focus-button svg {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.control-center__round-button svg,
|
||||
.control-center__quick-button svg {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.control-center__round-button .control-center__rotation-lock {
|
||||
position: absolute;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.control-center__slider {
|
||||
position: relative;
|
||||
grid-row: 1 / span 2;
|
||||
height: 156px;
|
||||
overflow: hidden;
|
||||
border-radius: 38px;
|
||||
cursor: pointer;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.control-center__slider-level {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: var(--control-level);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
transition: height 80ms linear;
|
||||
}
|
||||
|
||||
.control-center__range {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 172px;
|
||||
height: 58px !important;
|
||||
transform: translate(-50%, -50%) rotate(-90deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.control-center__range :deep(span) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.control-center__range :deep(input) {
|
||||
height: 58px !important;
|
||||
}
|
||||
|
||||
.control-center__range :deep(input::-webkit-slider-thumb) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.control-center__range :deep(input::-moz-range-thumb) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.control-center__slider-icon {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
bottom: 18px;
|
||||
left: 50%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
color: #0a84ff;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.control-center__quick-button.control-center__quick-button--flashlight-active {
|
||||
color: #bf5af2 !important;
|
||||
}
|
||||
|
||||
.control-center__slider:nth-child(3) .control-center__slider-icon {
|
||||
color: #ffd60a;
|
||||
}
|
||||
|
||||
.control-center__quick-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.control-center__quick-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 73px;
|
||||
height: 73px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
transition: transform 160ms ease;
|
||||
}
|
||||
|
||||
.control-center__quick-button:disabled {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.control-center-enter-active,
|
||||
.control-center-leave-active {
|
||||
transition: opacity 280ms ease;
|
||||
}
|
||||
|
||||
.control-center-enter-active .control-center__panel {
|
||||
transition: transform 440ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.control-center-leave-active .control-center__panel {
|
||||
transition: transform 260ms cubic-bezier(0.7, 0, 0.84, 0);
|
||||
}
|
||||
|
||||
.control-center-enter-from,
|
||||
.control-center-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.control-center-enter-from .control-center__panel,
|
||||
.control-center-leave-to .control-center__panel {
|
||||
transform: translate3d(28px, -22px, 0) scale(0.84);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.control-center-enter-active,
|
||||
.control-center-leave-active,
|
||||
.control-center-enter-active .control-center__panel,
|
||||
.control-center-leave-active .control-center__panel,
|
||||
.control-center__connectivity-button,
|
||||
.control-center__round-button,
|
||||
.control-center__focus-button,
|
||||
.control-center__quick-button {
|
||||
transition-duration: 1ms;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { BatteryMedium, Signal, Wifi } from 'lucide-vue-next'
|
||||
import { BatteryMedium, Plane, Signal, Wifi } from 'lucide-vue-next'
|
||||
import { onBeforeUnmount, onMounted, ref } from '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
|
||||
|
||||
@@ -27,10 +31,35 @@ onBeforeUnmount(() => {
|
||||
<template>
|
||||
<header class="phone-status-bar" :aria-label="phone.t('Common.phoneStatus')">
|
||||
<time>{{ time }}</time>
|
||||
<div class="phone-status-bar__indicators" aria-hidden="true">
|
||||
<Signal :size="12" :stroke-width="2.5" />
|
||||
<Wifi :size="13" :stroke-width="2.5" />
|
||||
<button
|
||||
class="phone-status-bar__indicators"
|
||||
type="button"
|
||||
:aria-label="phone.t('ControlCenter.open')"
|
||||
:aria-expanded="controlCenterOpened"
|
||||
@click.stop="emit('controlCenter')"
|
||||
>
|
||||
<Plane
|
||||
v-if="phone.preferences.settings.airplaneMode"
|
||||
:size="12"
|
||||
:stroke-width="2.5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Signal
|
||||
v-else-if="phone.preferences.settings.cellularEnabled"
|
||||
:size="12"
|
||||
:stroke-width="2.5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Wifi
|
||||
v-if="
|
||||
phone.preferences.settings.wifiEnabled &&
|
||||
!phone.preferences.settings.airplaneMode
|
||||
"
|
||||
:size="13"
|
||||
:stroke-width="2.5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<BatteryMedium :size="16" :stroke-width="2.4" />
|
||||
</div>
|
||||
</button>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user