Add the ability to hide icons
Implement GUI setting to hide icons in exchange for increased font size (implements: #131)
This commit is contained in:
Abász
parent
cac178f06d
commit
28d223c109
|
|
@ -35,7 +35,7 @@ export class DashboardMetric extends AppElement {
|
|||
`
|
||||
|
||||
@property({ type: Object })
|
||||
icon
|
||||
icon = ''
|
||||
|
||||
@property({ type: String })
|
||||
unit = ''
|
||||
|
|
@ -47,7 +47,7 @@ export class DashboardMetric extends AppElement {
|
|||
return html`
|
||||
<div class="label">${this.icon}</div>
|
||||
<div class="content">
|
||||
<span class="metric-value">${this.value !== undefined ? this.value : '--'}</span>
|
||||
<span class="metric-value" style="${this.icon === '' ? 'font-size: 200%;' : ''}">${this.value !== undefined ? this.value : '--'}</span>
|
||||
<span class="metric-unit">${this.unit}</span>
|
||||
</div>
|
||||
<slot></slot>
|
||||
|
|
|
|||
|
|
@ -64,25 +64,25 @@ export class PerformanceDashboard extends AppElement {
|
|||
}
|
||||
`
|
||||
dashboardMetricComponents = (formattedMetrics, appState) => ({
|
||||
distance: html`<dashboard-metric .icon=${icon_route} .unit=${formattedMetrics?.totalLinearDistanceFormatted?.unit || 'm'} .value=${formattedMetrics?.totalLinearDistanceFormatted?.value}></dashboard-metric>`,
|
||||
distance: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_route : ''} .unit=${formattedMetrics?.totalLinearDistanceFormatted?.unit || 'm'} .value=${formattedMetrics?.totalLinearDistanceFormatted?.value}></dashboard-metric>`,
|
||||
|
||||
pace: html`<dashboard-metric .icon=${icon_stopwatch} unit="/500m" .value=${formattedMetrics?.cyclePaceFormatted?.value}></dashboard-metric>`,
|
||||
pace: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_stopwatch : ''} unit="/500m" .value=${formattedMetrics?.cyclePaceFormatted?.value}></dashboard-metric>`,
|
||||
|
||||
power: html`<dashboard-metric .icon=${icon_bolt} unit="watt" .value=${formattedMetrics?.cyclePower?.value}></dashboard-metric>`,
|
||||
power: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_bolt : ''} unit="watt" .value=${formattedMetrics?.cyclePower?.value}></dashboard-metric>`,
|
||||
|
||||
stkRate: html`<dashboard-metric .icon=${icon_paddle} unit="/min" .value=${formattedMetrics?.cycleStrokeRate?.value}></dashboard-metric>`,
|
||||
stkRate: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_paddle : ''} unit="/min" .value=${formattedMetrics?.cycleStrokeRate?.value}></dashboard-metric>`,
|
||||
|
||||
heartRate: html`<dashboard-metric .icon=${icon_heartbeat} unit="bpm" .value=${formattedMetrics?.heartrate?.value}>
|
||||
heartRate: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_heartbeat : ''} unit="bpm" .value=${formattedMetrics?.heartrate?.value}>
|
||||
${formattedMetrics?.heartrateBatteryLevel?.value
|
||||
? html`<battery-icon .batteryLevel=${formattedMetrics?.heartrateBatteryLevel?.value}></battery-icon>`
|
||||
: ''}
|
||||
</dashboard-metric>`,
|
||||
|
||||
totalStk: html`<dashboard-metric .icon=${icon_paddle} unit="total" .value=${formattedMetrics?.totalNumberOfStrokes?.value}></dashboard-metric>`,
|
||||
totalStk: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_paddle : ''} unit="total" .value=${formattedMetrics?.totalNumberOfStrokes?.value}></dashboard-metric>`,
|
||||
|
||||
calories: html`<dashboard-metric .icon=${icon_fire} unit="kcal" .value=${formattedMetrics?.totalCalories?.value}></dashboard-metric>`,
|
||||
calories: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_fire : ''} unit="kcal" .value=${formattedMetrics?.totalCalories?.value}></dashboard-metric>`,
|
||||
|
||||
timer: html`<dashboard-metric .icon=${icon_clock} .value=${formattedMetrics?.totalMovingTimeFormatted?.value}></dashboard-metric>`,
|
||||
timer: html`<dashboard-metric .icon=${this.appState.config.guiConfigs.showIcons ? icon_clock : ''} .value=${formattedMetrics?.totalMovingTimeFormatted?.value}></dashboard-metric>`,
|
||||
|
||||
forceCurve: html`<dashboard-force-curve .value=${appState?.metrics.driveHandleForceCurve} style="grid-column: span 2"></dashboard-force-curve>`,
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
import { AppElement, html, css } from './AppElement.js'
|
||||
import { customElement, property, queryAll } from 'lit/decorators.js'
|
||||
import { customElement, property, query, queryAll } from 'lit/decorators.js'
|
||||
import { icon_settings } from '../lib/icons.js'
|
||||
import './AppDialog.js'
|
||||
|
||||
|
|
@ -73,14 +73,26 @@ export class DashboardActions extends AppElement {
|
|||
text-align: center;
|
||||
background-color: var(--theme-widget-color);
|
||||
}
|
||||
|
||||
.show-icons-selector {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
app-dialog > *:last-child {
|
||||
margin-bottom: -24px;
|
||||
}
|
||||
`
|
||||
|
||||
@property({ type: Object })
|
||||
config
|
||||
|
||||
@queryAll('input')
|
||||
@queryAll('.metric-selector>input')
|
||||
inputs
|
||||
|
||||
@query('input[name="showIcons"]')
|
||||
showIconInput
|
||||
|
||||
static get properties () {
|
||||
return {
|
||||
selectedMetrics: { type: Array },
|
||||
|
|
@ -93,6 +105,7 @@ export class DashboardActions extends AppElement {
|
|||
super()
|
||||
this.selectedMetrics = []
|
||||
this.sumSelectedSlots = 0
|
||||
this.showIcons = true
|
||||
this.isValid = false
|
||||
}
|
||||
|
||||
|
|
@ -132,6 +145,10 @@ export class DashboardActions extends AppElement {
|
|||
${this.renderSelectedMetrics()}
|
||||
</table>
|
||||
</div>
|
||||
<p class="show-icons-selector">
|
||||
<label for="actions">Show icons</label>
|
||||
<input @change=${this.toggleIcons} name="showIcons" type="checkbox" />
|
||||
</p>
|
||||
</app-dialog>
|
||||
`
|
||||
}
|
||||
|
|
@ -139,6 +156,7 @@ export class DashboardActions extends AppElement {
|
|||
firstUpdated () {
|
||||
this.selectedMetrics = this.config.dashboardMetrics
|
||||
this.sumSelectedSlots = this.selectedMetrics.length
|
||||
this.showIcons = this.config.showIcons
|
||||
if (this.sumSelectedSlots === 8) {
|
||||
this.isValid = true
|
||||
} else {
|
||||
|
|
@ -147,6 +165,7 @@ export class DashboardActions extends AppElement {
|
|||
[...this.inputs].forEach(input => {
|
||||
input.checked = this.selectedMetrics.find(metric => metric === input.name) !== undefined
|
||||
})
|
||||
this.showIconInput.checked = this.showIcons
|
||||
}
|
||||
|
||||
renderSelectedMetrics () {
|
||||
|
|
@ -181,6 +200,10 @@ export class DashboardActions extends AppElement {
|
|||
}
|
||||
}
|
||||
|
||||
toggleIcons (e) {
|
||||
this.showIcons = e.target.checked
|
||||
}
|
||||
|
||||
isFormValid () {
|
||||
return this.sumSelectedSlots === 8 && this.selectedMetrics[3] !== this.selectedMetrics[4]
|
||||
}
|
||||
|
|
@ -194,7 +217,8 @@ export class DashboardActions extends AppElement {
|
|||
config: {
|
||||
...this.appState.config,
|
||||
guiConfigs: {
|
||||
dashboardMetrics: this.selectedMetrics
|
||||
dashboardMetrics: this.selectedMetrics,
|
||||
showIcons: this.showIcons
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@ export const APP_STATE = {
|
|||
// true if remote device shutdown is enabled
|
||||
shutdownEnabled: false,
|
||||
guiConfigs: {
|
||||
dashboardMetrics: ['distance', 'timer', 'pace', 'power', 'stkRate', 'totalStk', 'calories', 'actions']
|
||||
dashboardMetrics: ['distance', 'timer', 'pace', 'power', 'stkRate', 'totalStk', 'calories', 'actions'],
|
||||
showIcons: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue