fix #11, #8

artem-sedykh · Jun 9, 2020 · 2b161c7 · 2b161c7
1 parent ee685ca
commit 2b161c7
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -115,6 +115,7 @@ A minimalistic yet customizable climate card for [Home Assistant](https://github
 | **fan_mode** | object | optional | v1.0.1 | fan operation for climate device. [fan_mode examples](#fan_mode)
 | fan_mode: `icon` | string | optional | v1.0.1 | Specify a custom icon from any of the available mdi icons.
 | fan_mode: `order` | number | optional | v1.0.1 | sort order, default value `0`
+| fan_mode: `location` | string | optional | v1.0.1 | allows you to display buttons on the main panel, types `main, bottom`, default `bottom`
 | fan_mode: `hide` | number | optional | v1.0.1 | hide button, default value `False`
 | fan_mode: `style` | function | optional | v1.0.1 | style
 | fan_mode: `disabled` | function | optional | v1.0.1 | disabled function
@@ -144,6 +145,7 @@ A minimalistic yet customizable climate card for [Home Assistant](https://github
 | buttons: `name:icon` | string | optional | v1.0.1 | Specify a custom icon from any of the available mdi icons.
 | buttons: `name:type` | string | optional | v1.0.1 | `dropdown` or `button` default `bitton`
 | buttons: `name:order` | number | optional | v1.0.1 | sort order
+| buttons: `name:location` | string | optional | v1.2.1 | allows you to display buttons on the main panel, types `main, bottom`, default `bottom`
 | buttons: `name:state` | object | optional | v1.0.1 | config to get button state.
 | buttons: `name:state:entity` | string | optional | v1.0.1 | button entity_id.
 | buttons: `name:state:attribute` | string | optional | v1.0.1 | entity attribute

diff --git a/release_notes/v1.2.1.md b/release_notes/v1.2.1.md
@@ -58,3 +58,25 @@ Or you can use one permanent icon
   secondary_info: fan-mode-dropdown
 ```
 ![image](https://user-images.githubusercontent.com/861063/84180244-d80d0a80-aa8f-11ea-8275-f4e3db85fd31.png)
+
+- Added the ability to make buttons on the main screen
+
+```yaml
+- type: custom:mini-climate
+  entity: climate.dahatsu
+  fan_mode:
+    location: main
+```
+![image](https://user-images.githubusercontent.com/861063/84198175-d5201300-aaab-11ea-94fb-bf9fde5aa2b1.png)
+
+This rule also applies to buttons.
+```yaml
+- type: custom:mini-climate
+  entity: climate.dahatsu
+  buttons:
+    custom_button:
+      location: main
+```
+![image](https://user-images.githubusercontent.com/861063/84198845-d4d44780-aaac-11ea-8590-4eff94457593.png)
+
+> With these settings, the data may not fit on the mobile version!
diff --git a/src/components/button.js b/src/components/button.js
@@ -67,8 +67,6 @@ class ClimateButton extends LitElement {
         margin: 0;
         overflow: hidden;
         transition: background .5s;
-        --paper-item-min-height: var(--mc-unit);
-        --mc-dropdown-unit: var(--mc-unit);
       }
       :host([color]) {
         background: var(--mc-active-color);

diff --git a/src/components/buttons.js b/src/components/buttons.js
@@ -41,7 +41,7 @@ class ClimateButtons extends LitElement {
     const context = this;
     return html`${Object.entries(this.buttons)
       .map(b => b[1])
-      .filter(b => !b.hide)
+      .filter(b => b.location !== 'main' && !b.hide)
       .sort((a, b) => ((a.order > b.order) ? 1 : ((b.order > a.order) ? -1 : 0)))
       .map(button => context.renderInternal(button))}`;
   }
@@ -58,6 +58,7 @@ class ClimateButtons extends LitElement {
         transition: background .5s;
         --paper-item-min-height: var(--mc-unit);
         --mc-dropdown-unit: var(--mc-unit);
+        --mdc-icon-button-size: calc(var(--mc-unit));
       }
       :host([color]) {
         background: var(--mc-active-color);
@@ -68,6 +69,10 @@ class ClimateButtons extends LitElement {
         opacity: .25;
         pointer-events: none;
       }
+      mc-button {
+        width: calc(var(--mc-unit));
+        height: calc(var(--mc-unit));
+      }
     `];
   }
 }

diff --git a/src/components/dropdown.js b/src/components/dropdown.js
@@ -77,8 +77,6 @@ class ClimateDropDown extends LitElement {
         margin: 0;
         overflow: hidden;
         transition: background .5s;
-        --paper-item-min-height: var(--mc-unit);
-        --mc-dropdown-unit: var(--mc-unit);
       }
       :host([color]) {
         background: var(--mc-active-color);

diff --git a/src/main.js b/src/main.js
@@ -431,8 +431,15 @@ class MiniClimate extends LitElement {
       `;
     }
 
+    const buttons = Object.entries(this.buttons).map(b => b[1])
+      .filter(b => b.location === 'main' && !b.hide)
+      .sort((a, b) => ((a.order > b.order) ? 1 : ((b.order > a.order) ? -1 : 0)));
+
     return html`
-        <mc-mode-menu 
+        ${buttons.map(button => (button.type === 'dropdown'
+    ? html`<mc-dropdown .dropdown=${button}></mc-dropdown>`
+    : html`<mc-button .button=${button}></mc-button>`))}
+        <mc-mode-menu
           .mode=${this.hvacMode}>
         </mc-mode-menu>
         <mc-temperature
@@ -545,7 +552,7 @@ class MiniClimate extends LitElement {
   }
 
   renderToggleButton() {
-    if (this.config.buttons.filter(b => !b.hide).length === 0)
+    if (this.config.buttons.filter(b => !b.hide && b.location !== 'main').length === 0)
       return '';
 
     if (this.config.toggle.hide)

diff --git a/src/models/button.js b/src/models/button.js
@@ -13,6 +13,10 @@ export default class ButtonObject {
     return this.config.id;
   }
 
+  get location() {
+    return this.config.location || 'bottom';
+  }
+
   get hass() {
     return this._hass;
   }

diff --git a/src/sharedStyle.js b/src/sharedStyle.js
@@ -14,9 +14,6 @@ const sharedStyle = css`
     height: calc(var(--mc-unit) * .6);
   }
   ha-icon-button {
-    width: calc(var(--mc-unit));
-    height: calc(var(--mc-unit));
-    --mdc-icon-button-size: calc(var(--mc-unit));
     color: var(--mc-button-color);
     transition: color .25s;
   }

diff --git a/src/style.js b/src/style.js
@@ -21,6 +21,9 @@ const style = css`
     --mc-info-opacity: 1;
     --mc-bg-opacity: var(--mini-climate-background-opacity, 1);
     color: var(--mc-text-color);
+    --mc-dropdown-unit: calc(var(--mc-unit) * .75);
+    --paper-item-min-height: var(--mc-unit);
+    --mdc-icon-button-size: calc(var(--mc-unit) * 0.75);
   }
   ha-card.--group {
     box-shadow: none;
@@ -185,6 +188,13 @@ const style = css`
   .mc-toggle_content {
     margin-top: calc(var(--mc-unit) * .05);
   }
+  .ctl-wrap mc-dropdown, .ctl-wrap mc-button {
+    min-width: calc(var(--mc-unit) * .75);
+  }
+  .ctl-wrap mc-button {
+    width: calc(var(--mc-unit) * 0.75);
+    height: calc(var(--mc-unit) * 0.75);
+  }
 `;
 
 export default style;