diff --git a/src/modules/appView.ts b/src/modules/appLauncher.ts similarity index 86% rename from src/modules/appView.ts rename to src/modules/appLauncher.ts index 37333cd..14c263b 100644 --- a/src/modules/appView.ts +++ b/src/modules/appLauncher.ts @@ -9,7 +9,7 @@ export const run = (element: HTMLDivElement): void => { element.style.alignItems = 'center' element.style.justifyContent = 'center' element.style.aspectRatio = '1 / 1' - element.innerHTML = '' + element.innerHTML = '' element.onclick = () => { window.wm.toggleLauncher() diff --git a/src/modules/apps.ts b/src/modules/apps.ts index 8f46a50..5621bea 100644 --- a/src/modules/apps.ts +++ b/src/modules/apps.ts @@ -9,15 +9,17 @@ export const meta = { export const run = (element: HTMLDivElement): void => { element.style.display = 'flex' element.style.alignItems = 'center' - element.style.gap = '10px' - element.style.paddingLeft = '15px' - element.style.paddingRight = '15px' + element.style.gap = '5px' + element.style.flex = '1' window.addEventListener('app_opened', (e: AppOpenedEvent): void => { const appIcon = document.createElement('app') const app = e.detail.app const win = e.detail.win - appIcon.innerHTML = `` + appIcon.style.background = 'var(--surface-0)' + appIcon.style.padding = '5px 7.5px' + appIcon.style.borderRadius = '5px' + appIcon.innerHTML = ` ${app.name}` appIcon.onclick = async () => { const win = await e.detail.win win.focus() diff --git a/src/modules/battery.ts b/src/modules/battery.ts new file mode 100644 index 0000000..dce3252 --- /dev/null +++ b/src/modules/battery.ts @@ -0,0 +1,13 @@ +export const meta = { + name: 'Battery', + description: 'Tells you your device\'s battery.', + id: 'battery' +} + +export const run = (element: HTMLDivElement): void => { + element.style.display = 'flex' + element.style.alignItems = 'center' + element.style.paddingLeft = '15px' + element.style.paddingRight = '15px' + element.innerHTML = '100%' +} diff --git a/src/modules/clock.ts b/src/modules/clock.ts index 6d32996..be3fb90 100644 --- a/src/modules/clock.ts +++ b/src/modules/clock.ts @@ -5,6 +5,8 @@ export const meta = { } export const run = (element: HTMLDivElement): void => { + let date: Date = new Date() + element.style.display = 'flex' element.style.flexDirection = 'column' element.style.padding = '5px 10px' @@ -20,8 +22,6 @@ export const run = (element: HTMLDivElement): void => { return date.toLocaleTimeString('en-US', { hour12: false, hour: 'numeric', minute: 'numeric' }) } - let date: Date = new Date() - refreshDate() refreshClock() diff --git a/src/modules/weather.ts b/src/modules/weather.ts new file mode 100644 index 0000000..9ef4707 --- /dev/null +++ b/src/modules/weather.ts @@ -0,0 +1,13 @@ +export const meta = { + name: 'Weather', + description: 'Tells you the weather.', + id: 'weather' +} + +export const run = (element: HTMLDivElement): void => { + element.style.display = 'flex' + element.style.alignItems = 'center' + element.style.paddingLeft = '15px' + element.style.paddingRight = '15px' + element.innerHTML = '☁️ 26*C' +} diff --git a/src/statusbar.ts b/src/statusbar.ts index ffc8a98..3ff1b7c 100644 --- a/src/statusbar.ts +++ b/src/statusbar.ts @@ -1,7 +1,9 @@ import * as clock from './modules/clock.ts' import * as switcher from './modules/switcher.ts' -import * as appView from './modules/appView.ts' +import * as appView from './modules/appLauncher.ts' import * as apps from './modules/apps.ts' +import * as weather from './modules/weather.ts' +import * as battery from './modules/battery.ts' import { StatusItem } from './types' @@ -16,8 +18,10 @@ class StatusBar { this.add(appView) this.add(apps) + this.add(weather) this.add(clock) this.add(switcher) + this.add(battery) } add (item: StatusItem): void { diff --git a/src/style.less b/src/style.less index 542e498..a2dc460 100644 --- a/src/style.less +++ b/src/style.less @@ -44,10 +44,10 @@ body, html { } toolbar { - width: 100%; + width: calc(100% - 40px); display: flex; gap: 10px; - margin-bottom: 10px; + margin: 0 0 0 0; justify-content: center; & > div { @@ -75,7 +75,7 @@ toolbar { window-area { position: relative; width: calc(100% - 40px); - margin-left: 20px; + margin-top: 20px; margin-bottom: 20px; height: 100%; overflow: hidden;