Support hiding headings for mode rows

nervetattoo · Nov 8, 2019 · 40015d3 · 40015d3
1 parent 02ddb3f
commit 40015d3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -37,6 +37,7 @@ resources:
 - `control` _object|array_ (From 0.27)
   - `_names` _bool_: Show mode names or not. Defaults to true
   - `_icons` _bool_: Show mode icons or not. Defaults to true
+  - `_headings` _bool_: Show a heading for each mode button row. Defaults to true
   - `{type}` _object|bool_: The key of the mode type (hvac, preset, fan, swing)
     - `name` _string|bool_: Specify a custom name or set to `false` to show only the icon
     - `icon` _string|bool_: Specify a custom icon or set to `false` to not show icon

diff --git a/src/index.js b/src/index.js
@@ -133,8 +133,9 @@ class SimpleThermostat extends LitElement {
     this._values = {}
     this._hide = DEFAULT_HIDE
     this.modeOptions = {
-      _names: true,
-      _icons: true,
+      names: true,
+      icons: true,
+      headings: true,
     }
   }
 
@@ -188,10 +189,11 @@ class SimpleThermostat extends LitElement {
     } else if (Array.isArray(this.config.control)) {
       controlModes = buildBasicModes(this.config.control)
     } else if (typeof this.config.control === 'object') {
-      const { _names, _icons, ...modes } = this.config.control
+      const { _names, _icons, _headings, ...modes } = this.config.control
 
       this.modeOptions.names = _names
       this.modeOptions.icons = _icons
+      this.modeOptions.headings = _headings
 
       const entries = Object.entries(modes)
       if (entries.length > 0) {
@@ -414,10 +416,15 @@ class SimpleThermostat extends LitElement {
 
     const str = type == 'hvac' ? 'operation' : `${type}_mode`
     const title = this.localize(`ui.card.climate.${str}`)
+    const { headings } = this.modeOptions
 
     return html`
-      <div class="modes">
-        <div class="mode-title">${title}</div>
+      <div class="modes ${headings ? 'heading' : ''}">
+        ${this.modeOptions.headings
+          ? html`
+              <div class="mode-title">${title}</div>
+            `
+          : null}
         ${list.map(
           ({ value, icon, name }) => html`
             <div

diff --git a/src/styles.js b/src/styles.js
@@ -112,12 +112,15 @@ export default css`
   }
   .modes {
     display: grid;
-    grid-template-columns: min-content;
+    grid-template-columns: auto;
     grid-auto-flow: column;
     grid-gap: 2px;
     margin-top: calc(var(--st-spacing) * 2);
     padding: var(--st-spacing);
   }
+  .modes.heading {
+    grid-template-columns: min-content;
+  }
   .mode-title {
     padding: 0 16px;
     place-self: center;