Retile Mode

app/client/components/BatteryIcon.js

@@ -11,6 +11,12 @@ import { customElement, property } from 'lit/decorators.js'
 @customElement('battery-icon')
 export class DashboardMetric extends AppElement {
   static styles = css`
+    :host {
+      right: 0.2em;
+      bottom: 0;
+      position: absolute;
+    }
+
     .icon {
       height: 1.2em;
     }

app/client/components/DashboardForceCurve.js

@@ -41,6 +41,10 @@ export class DashboardForceCurve extends AppElement {
       position: relative;
     }
 
+    :host {
+      grid-column: span 2;
+    }
+
     .title {
       position: absolute;
       top: 0;
@@ -181,7 +185,12 @@ export class DashboardForceCurve extends AppElement {
       <!== Only show label if no chart -->
       ${this._chart?.data.datasets[0].data.length ?
         '' :
-        html`<div class="title"> Force Curve </div>`
+        html`
+          <div class="title"> 
+            Force Curve 
+            <slot></slot>
+          </div>
+        `
       }
       <canvas @click="${this._handleClick}" id="chart"></canvas>
     `

app/client/components/DashboardMetric.js

@@ -23,14 +23,12 @@ export class DashboardMetric extends AppElement {
         font-size: 150%;
     }
 
-    .metric-unit {
-        font-size: 80%;
+    .metric-value.with-icon {
+        font-size: 200%;
     }
 
-    ::slotted(*) {
-      right: 0.2em;
-      bottom: 0;
-      position: absolute;
+    .metric-unit {
+        font-size: 80%;
     }
   `
 
@@ -44,15 +42,18 @@ export class DashboardMetric extends AppElement {
   accessor value
 
   render () {
+    const hasIcon = this.icon !== ''
     return html`
-      <div class="${this.icon === '' ? '' : 'label'}">
-        <div class=${this.icon === '' ? '' : 'icon'}>${this.icon}</div>
+      <div class="${hasIcon ? 'icon' : 'label'}">
+        ${this.icon}
+        <slot></slot>
       </div>
       <div class="content">
-        <span class="metric-value" style="${this.icon === '' ? 'font-size: 200%;' : ''}">${this.value !== undefined ? this.value : '--'}</span>
+        <span class="metric-value ${hasIcon ? 'with-icon' : ''}">
+          ${this.value !== undefined ? this.value : '--'}
+        </span>
         <span class="metric-unit">${this.unit}</span>
       </div>
-      <slot></slot>
     `
   }
 }

app/client/components/DashboardToolbar.js

@@ -8,7 +8,6 @@
 import { AppElement, html, css } from './AppElement.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import { iconSettings, iconUndo, iconExpand, iconCompress, iconPoweroff, iconBluetooth, iconUpload, iconHeartbeat, iconAntplus } from '../lib/icons.js'
-import './SettingsDialog.js'
 import './AppDialog.js'
 
 @customElement('dashboard-toolbar')
@@ -51,6 +50,11 @@ export class DashboardToolbar extends AppElement {
       filter: brightness(150%);
     }
 
+    button.active {
+      background: var(--theme-accent-color, #4a9eff);
+      filter: brightness(120%);
+    }
+
     button .text {
       position: absolute;
       left: 2px;
@@ -91,12 +95,25 @@ export class DashboardToolbar extends AppElement {
   @state()
   accessor _dialog
 
+  @state()
+  accessor _retileMode = false
+
   render () {
     return html`
       <div class="button-group">
         <button @click=${this.openSettings} title="Settings">
           ${iconSettings}
         </button>
+        <button @click=${this.toggleRetileMode} title="Retile Dashboard" class="${this._retileMode ? 'active' : ''}">
+          ${this._retileMode ? 'Submit' : 'Retile'}
+        </button>
+        ${this._retileMode
+          ? html`
+          <button @click=${this.resetToDefault} title="Reset to Default">
+            Reset
+          </button>
+        `
+          : ''}
         <button @click=${this.reset} title="Reset">
           ${iconUndo}
         </button>
@@ -179,9 +196,10 @@ export class DashboardToolbar extends AppElement {
   }
 
   openSettings () {
-    this._dialog = html`<settings-dialog .config=${this.config.guiConfigs} @close=${() => {
-      this._dialog = undefined
-    }}></settings-dialog>`
+    this.dispatchEvent(new CustomEvent('open-settings', {
+      bubbles: true,
+      composed: true
+    }))
   }
 
   toggleFullscreen () {
@@ -195,6 +213,22 @@ export class DashboardToolbar extends AppElement {
     }
   }
 
+  toggleRetileMode () {
+    this._retileMode = !this._retileMode
+    this.dispatchEvent(new CustomEvent('retile-mode-changed', {
+      bubbles: true,
+      composed: true,
+      detail: { active: this._retileMode }
+    }))
+  }
+
+  resetToDefault () {
+    this.dispatchEvent(new CustomEvent('reset-layout-to-default', {
+      bubbles: true,
+      composed: true
+    }))
+  }
+
   reset () {
     this.sendEvent('triggerAction', { command: 'reset' })
   }