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;