From 02c81c55206ef7a60947ac7459a2243ce01fdfe0 Mon Sep 17 00:00:00 2001 From: ThinLiquid Date: Tue, 17 Oct 2023 04:43:18 +0100 Subject: [PATCH 1/2] =?UTF-8?q?[=E2=9A=A1]=20Statusbar=20revamp?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/apps.ts | 10 ++++++---- src/modules/battery.ts | 13 +++++++++++++ src/modules/clock.ts | 4 ++-- src/modules/weather.ts | 13 +++++++++++++ src/statusbar.ts | 4 ++++ src/style.less | 6 +++--- 6 files changed, 41 insertions(+), 9 deletions(-) create mode 100644 src/modules/battery.ts create mode 100644 src/modules/weather.ts 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..d24b6cc 100644 --- a/src/statusbar.ts +++ b/src/statusbar.ts @@ -2,6 +2,8 @@ import * as clock from './modules/clock.ts' import * as switcher from './modules/switcher.ts' import * as appView from './modules/appView.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; From 63408d7a4cbac736bfbdc2d3ae370e762e431e21 Mon Sep 17 00:00:00 2001 From: ThinLiquid Date: Tue, 17 Oct 2023 04:52:33 +0100 Subject: [PATCH 2/2] =?UTF-8?q?[=E2=9A=A1]=20Changed=20app=20launcher=20ic?= =?UTF-8?q?on?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/{appView.ts => appLauncher.ts} | 2 +- src/statusbar.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/modules/{appView.ts => appLauncher.ts} (86%) 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/statusbar.ts b/src/statusbar.ts index d24b6cc..3ff1b7c 100644 --- a/src/statusbar.ts +++ b/src/statusbar.ts @@ -1,6 +1,6 @@ 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'