Add AppBar notch with time, DE, layout, battery, brightness and power
Warinyourself
3 weeks ago
parent
ea715d5f1e
commit
b286ebbe05
@ -0,0 +1,82 @@
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { Power, Sun, Battery, BatteryCharging, BatteryFull, BatteryLow, BatteryMedium, BatteryWarning } from '@lucide/vue'
|
||||
import { useLightdm } from '@/composables/useLightdm'
|
||||
import { useSystemInfo } from '@/composables/useSystemInfo'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { usePageStore } from '@/store/page'
|
||||
import { getDesktopIcon, systemActionsObject } from '@/utils/helper'
|
||||
import AppIcon from '@/components/app/AppIcon.vue'
|
||||
import timeRef, { timePresets, type TimePreset } from '@/utils/time'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AppBar',
|
||||
setup() {
|
||||
const session = useLightdm()
|
||||
const sys = useSystemInfo()
|
||||
const appStore = useAppStore()
|
||||
const pageStore = usePageStore()
|
||||
|
||||
const formattedTime = computed(() => {
|
||||
const preset = (appStore.timeFormat as TimePreset) || 'HH:mm'
|
||||
const options = timePresets[preset] ?? timePresets['HH:mm']
|
||||
return new Intl.DateTimeFormat(pageStore.locale, options).format(timeRef.time)
|
||||
})
|
||||
|
||||
const BatteryIcon = computed(() => {
|
||||
if (!sys.battery.value) return Battery
|
||||
const { level, ac_status } = sys.battery.value
|
||||
if (ac_status) return BatteryCharging
|
||||
if (level > 80) return BatteryFull
|
||||
if (level > 50) return BatteryMedium
|
||||
if (level > 20) return BatteryLow
|
||||
return BatteryWarning
|
||||
})
|
||||
|
||||
return () => {
|
||||
const desktop = session.currentDesktop.value
|
||||
const layout = sys.currentLayout.value
|
||||
const bat = sys.battery.value
|
||||
|
||||
return (
|
||||
<div class="app-bar">
|
||||
{appStore.showTime && (
|
||||
<div class="app-bar__item">
|
||||
<span class="app-bar__time">{formattedTime.value}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{desktop && (
|
||||
<div class="app-bar__item">
|
||||
<AppIcon name={getDesktopIcon(desktop.key)} />
|
||||
<span>{desktop.name}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{layout && (
|
||||
<div class="app-bar__item app-bar__item--clickable" onClick={sys.cycleLayout}>
|
||||
<span class="app-bar__layout">{layout.short_description.toUpperCase()}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sys.canAccessBattery.value && bat && (
|
||||
<div class="app-bar__item">
|
||||
<BatteryIcon.value />
|
||||
<span>{Math.round(bat.level)}%</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sys.canAccessBrightness.value && (
|
||||
<div class="app-bar__item">
|
||||
<Sun />
|
||||
<span>{Math.round(sys.brightness.value)}%</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="app-bar__item app-bar__item--clickable" onClick={systemActionsObject.shutdown}>
|
||||
<Power />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,84 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
export interface BatteryData {
|
||||
level: number
|
||||
status: string
|
||||
ac_status: boolean
|
||||
}
|
||||
|
||||
export interface LayoutData {
|
||||
name: string
|
||||
short_description: string
|
||||
description: string
|
||||
}
|
||||
|
||||
const canAccessBattery = ref(false)
|
||||
const canAccessBrightness = ref(false)
|
||||
const battery = ref<BatteryData | null>(null)
|
||||
const brightness = ref(0)
|
||||
const layouts = ref<LayoutData[]>([])
|
||||
const currentLayout = ref<LayoutData | null>(null)
|
||||
|
||||
function _readBattery() {
|
||||
const b = (window.lightdm as any)?.battery_data
|
||||
if (b) battery.value = { level: b.level, status: b.status, ac_status: b.ac_status }
|
||||
}
|
||||
|
||||
export function initSystemInfo() {
|
||||
canAccessBattery.value = !!(window.lightdm as any)?.can_access_battery
|
||||
canAccessBrightness.value = !!(window.lightdm as any)?.can_access_brightness
|
||||
|
||||
if (canAccessBattery.value) {
|
||||
_readBattery()
|
||||
;(window.lightdm as any)?.battery_update?.connect(_readBattery)
|
||||
}
|
||||
|
||||
if (canAccessBrightness.value) {
|
||||
brightness.value = (window.lightdm as any)?.brightness ?? 0
|
||||
;(window.lightdm as any)?.brightness_update?.connect(() => {
|
||||
brightness.value = (window.lightdm as any)?.brightness ?? 0
|
||||
})
|
||||
}
|
||||
|
||||
const ldmLayouts: any[] = (window.lightdm as any)?.layouts || []
|
||||
layouts.value = ldmLayouts.map((l) => ({
|
||||
name: l.name,
|
||||
short_description: l.short_description,
|
||||
description: l.description,
|
||||
}))
|
||||
|
||||
const ldmLayout = (window.lightdm as any)?.layout
|
||||
if (ldmLayout) {
|
||||
currentLayout.value = {
|
||||
name: ldmLayout.name,
|
||||
short_description: ldmLayout.short_description,
|
||||
description: ldmLayout.description,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function cycleLayout() {
|
||||
if (!layouts.value.length) return
|
||||
const idx = layouts.value.findIndex((l) => l.name === currentLayout.value?.name)
|
||||
const next = layouts.value[(idx + 1) % layouts.value.length]!
|
||||
currentLayout.value = next
|
||||
;(window.lightdm as any).layout = next
|
||||
}
|
||||
|
||||
function setBrightness(value: number) {
|
||||
brightness.value = Math.max(0, Math.min(100, Math.round(value)))
|
||||
;(window.lightdm as any)?.brightness_set?.(brightness.value)
|
||||
}
|
||||
|
||||
export function useSystemInfo() {
|
||||
return {
|
||||
canAccessBattery,
|
||||
canAccessBrightness,
|
||||
battery,
|
||||
brightness,
|
||||
layouts,
|
||||
currentLayout,
|
||||
cycleLayout,
|
||||
setBrightness,
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue