From 2b161c7af57f626168a737186cacf11a68f9ebb6 Mon Sep 17 00:00:00 2001 From: Artem Sedykh Date: Wed, 10 Jun 2020 00:08:43 +0300 Subject: [PATCH] fix #11, #8 --- README.md | 2 ++ release_notes/v1.2.1.md | 22 ++++++++++++++++++++++ src/components/button.js | 2 -- src/components/buttons.js | 7 ++++++- src/components/dropdown.js | 2 -- src/main.js | 11 +++++++++-- src/models/button.js | 4 ++++ src/sharedStyle.js | 3 --- src/style.js | 10 ++++++++++ 9 files changed, 53 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 14625e8..ceac931 100644 --- 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 index 0fe2f57..19f2c47 100644 --- 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 index 1ae932f..5d1fd2e 100644 --- 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 index 552b13a..b646edb 100644 --- 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 index 178416d..5bdbb83 100644 --- 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 index 234a0c6..782e9aa 100644 --- 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` - (button.type === 'dropdown' + ? html`` + : html``))} + !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 index 0053e87..9e9cdaf 100644 --- 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 index 5719c35..888b0e1 100644 --- 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 index b26adaa..df533a6 100644 --- 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;