From 426f982683820a6ba5885411be0085053d8bf20d Mon Sep 17 00:00:00 2001
From: Lars Berning <151194+laberning@users.noreply.github.com>
Date: Fri, 28 Jan 2022 19:52:21 +0100
Subject: [PATCH] refactores frontend styling, updates some dependencies
---
app/client/components/AppElement.js | 6 -
app/client/components/BatteryIcon.js | 40 ++
app/client/components/DashboardActions.js | 56 ++-
app/client/components/DashboardMetric.js | 49 +-
app/client/components/PerformanceDashboard.js | 47 +-
app/client/index.html | 36 +-
app/client/style.css | 95 ----
package-lock.json | 422 +++++++++---------
package.json | 8 +-
9 files changed, 400 insertions(+), 359 deletions(-)
create mode 100644 app/client/components/BatteryIcon.js
delete mode 100644 app/client/style.css
diff --git a/app/client/components/AppElement.js b/app/client/components/AppElement.js
index ae1325a..efbde94 100644
--- a/app/client/components/AppElement.js
+++ b/app/client/components/AppElement.js
@@ -32,10 +32,4 @@ export class AppElement extends LitElement {
})
)
}
-
- // currently we do not use shadow root since there is still a global style file
- // but maybe one day we dissolve it into the components and use shadow dom instead
- createRenderRoot () {
- return this
- }
}
diff --git a/app/client/components/BatteryIcon.js b/app/client/components/BatteryIcon.js
new file mode 100644
index 0000000..1c51b31
--- /dev/null
+++ b/app/client/components/BatteryIcon.js
@@ -0,0 +1,40 @@
+'use strict'
+/*
+ Open Rowing Monitor, https://github.com/laberning/openrowingmonitor
+
+ Component that renders a battery indicator
+*/
+
+import { AppElement, svg, css } from './AppElement.js'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('battery-icon')
+export class DashboardMetric extends AppElement {
+ static styles = css`
+ .icon {
+ height: 1.2em;
+ }
+
+ .low-battery {
+ color: var(--theme-warning-color)
+ }
+ `
+
+ @property({ type: String })
+ batteryLevel = ''
+
+ render () {
+ // 416 is the max width value of the battery bar in the SVG graphic
+ const batteryWidth = this.batteryLevel * 416 / 100
+
+ // if battery level is low, highlight the battery icon
+ const iconClass = this.batteryLevel > 25 ? 'icon' : 'icon low-battery'
+
+ return svg`
+
+
+ `
+ }
+}
diff --git a/app/client/components/DashboardActions.js b/app/client/components/DashboardActions.js
index d97eb26..f92d4cb 100644
--- a/app/client/components/DashboardActions.js
+++ b/app/client/components/DashboardActions.js
@@ -11,39 +11,71 @@ import { icon_undo, icon_expand, icon_compress, icon_poweroff, icon_bluetooth }
@customElement('dashboard-actions')
export class DashboardActions extends AppElement {
- static get styles () {
- return css`
- `
- }
+ static styles = css`
+ button {
+ outline:none;
+ background-color: var(--theme-button-color);
+ border: 0;
+ color: var(--theme-font-color);
+ padding: 0.5em 0.9em 0.3em 0.9em;
+ margin: 0.2em 0;
+ font-size: 60%;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ width: 3.5em;
+ }
+
+ #windowed-icon {
+ display: none;
+ }
+
+ .icon {
+ height: 1.8em;
+ }
+
+ .peripheral-mode {
+ font-size: 80%;
+ }
+
+ @media (display-mode: fullscreen) {
+ #fullscreen-icon {
+ display: none;
+ }
+ #windowed-icon {
+ display: inline;
+ }
+ }
+ `
render () {
return html`
${icon_undo}
${this.renderOptionalButtons()}
${icon_bluetooth}
- ${this.peripheralMode()}
- `
+ ${this.peripheralMode()}
+ `
}
renderOptionalButtons () {
const buttons = []
// changing to fullscreen mode only makes sence when the app is openend in a regular
- // webbrowser (kiosk and standalone mode are always in fullscreen view) and the browser
- // supports this feature
+ // webbrowser (kiosk and standalone mode are always in fullscreen view) and if the
+ // browser supports this feature
if (this.appState.appMode === 'BROWSER' && document.documentElement.requestFullscreen) {
buttons.push(html`
-
+
${icon_expand}
${icon_compress}
-
- `)
+
+ `)
}
// a shutdown button only makes sence when the app is openend as app on a mobile
// device. at some point we might also think of using this to power down the raspi
// when we are running in kiosk mode
if (this.appState.appMode === 'STANDALONE') {
buttons.push(html`
- ${icon_poweroff}
+ ${icon_poweroff}
`)
}
return buttons
diff --git a/app/client/components/DashboardMetric.js b/app/client/components/DashboardMetric.js
index ffdf4e8..bbd7392 100644
--- a/app/client/components/DashboardMetric.js
+++ b/app/client/components/DashboardMetric.js
@@ -5,15 +5,34 @@
Component that renders a metric of the dashboard
*/
-import { AppElement, html, svg, css } from './AppElement.js'
+import { AppElement, html, css } from './AppElement.js'
import { customElement, property } from 'lit/decorators.js'
@customElement('dashboard-metric')
export class DashboardMetric extends AppElement {
- static get styles () {
- return css`
- `
- }
+ static styles = css`
+ .label, .content {
+ padding: 0.1em 0;
+ }
+
+ .icon {
+ height: 1.8em;
+ }
+
+ .metric-value {
+ font-size: 150%;
+ }
+
+ .metric-unit {
+ font-size: 80%;
+ }
+
+ ::slotted(*) {
+ right: 0.2em;
+ bottom: 0;
+ position: absolute;
+ }
+ `
@property({ type: Object })
icon
@@ -24,9 +43,6 @@ export class DashboardMetric extends AppElement {
@property({ type: String })
value = ''
- @property({ type: String })
- batteryLevel = ''
-
render () {
return html`
${this.icon}
@@ -34,22 +50,7 @@ export class DashboardMetric extends AppElement {
${this.value !== undefined ? this.value : '--'}
${this.unit}
- ${this.batteryLevel &&
- html`${this.batteryIcon}
`
- }
- `
- }
-
- get batteryIcon () {
- // 416 is the max width value of the battery bar in the SVG graphic
- const batteryWidth = this.batteryLevel * 416 / 100
-
- return svg`
-
-
-
+
+ ${metrics?.heartrateBatteryLevel?.value
+ ? html`
+ `
: html`Open Rowing Monitor
+
+
+
You need to enable JavaScript to run this app.