From 55aad1bf5d220bd1c5b985ea88e5e70461b1be2a Mon Sep 17 00:00:00 2001 From: RFDarter Date: Wed, 24 Jul 2024 00:47:50 +0200 Subject: [PATCH 1/3] [v3] fix sorting to sort by name if sorting weights ar equal (#115) --- packages/v3/src/esp-entity-table.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/v3/src/esp-entity-table.ts b/packages/v3/src/esp-entity-table.ts index 4bc224b..42eb5d7 100644 --- a/packages/v3/src/esp-entity-table.ts +++ b/packages/v3/src/esp-entity-table.ts @@ -105,9 +105,13 @@ export class EntityTable extends LitElement implements RestAction { return a.entity_category < b.entity_category ? -1 : a.entity_category == b.entity_category - ? sortA < sortB - ? -1 - : 1 + ? sortA === sortB + ? a.name.toLowerCase() < b.name.toLowerCase() + ? -1 + : 1 + : sortA < sortB + ? -1 + : 1 : 1 }); this.requestUpdate(); From adce439209436bfc59973d145714869859a9fe5a Mon Sep 17 00:00:00 2001 From: RFDarter Date: Wed, 24 Jul 2024 00:48:27 +0200 Subject: [PATCH 2/3] [v3] Slider styles for IE and FF (#113) --- packages/v3/src/esp-range-slider.ts | 70 ++++++++++++++++++++++++++--- 1 file changed, 65 insertions(+), 5 deletions(-) diff --git a/packages/v3/src/esp-range-slider.ts b/packages/v3/src/esp-range-slider.ts index 66d1a54..c136a10 100644 --- a/packages/v3/src/esp-range-slider.ts +++ b/packages/v3/src/esp-range-slider.ts @@ -189,7 +189,9 @@ export class EspRangeSlider extends LitElement { width: 100%; } input[type=range] { + background: transparent; -webkit-appearance: none; + appearance: none; margin: 20px 0; width: 100%; touch-action: none; @@ -205,6 +207,32 @@ export class EspRangeSlider extends LitElement { background: #03a9f4; border-radius: 25px; } + input[type=range]::-moz-range-track { + width: 100%; + height: 4px; + cursor: pointer; + animate: 0.2s; + background: #03a9f4; + border-radius: 25px; + } + input[type=range]::-ms-track { + background: transparent; + width: 100%; + height: 4px; + cursor: pointer; + animate: 0.2s; + background: transparent; + border-color: transparent; + color: transparent; + } + input[type=range]::-ms-fill-lower { + background: #03a9f4; + border-radius: 25px; + } + input[type=range]::-ms-fill-upper { + background: #03a9f4; + border-radius: 25px; + } input[type=range]::-webkit-slider-thumb { height: 20px; width: 20px; @@ -215,23 +243,50 @@ export class EspRangeSlider extends LitElement { -webkit-appearance: none; margin-top: -8px; } + input[type=range]::-moz-range-thumb { + height: 20px; + width: 20px; + border-radius: 50%; + background: #fff; + box-shadow: 0 0 4px 0 rgba(0,0,0, 1); + cursor: pointer; + border: none; + } + input[type=range]::-ms-thumb { + height: 20px; + width: 20px; + border-radius: 50%; + background: #fff; + box-shadow: 0 0 4px 0 rgba(0,0,0, 1); + cursor: pointer; + border: none; + } input[type=range]:focus::-webkit-slider-runnable-track { background: #03a9f4; } - .range-wrap{ + input[type=range]:focus::-moz-range-track { + background: #03a9f4; + } + input[type=range]:focus::-ms-fill-lower { + background: #03a9f4; + } + input[type=range]:focus::-ms-fill-upper { + background: #03a9f4; + } + .range-wrap { display: flex; align-items: center; } - .slider-wrap{ + .slider-wrap { flex-grow: 1; margin: 0px 15px; position: relative; } - .range-value{ + .range-value { position: absolute; top: -50%; } - .range-value span{ + .range-value span { padding: 0 3px 0 3px; height: 19px; line-height: 18px; @@ -245,7 +300,12 @@ export class EspRangeSlider extends LitElement { transform: translate(-50%, +80%); border-radius: 6px; } - .range-value span:before{ + @-moz-document url-prefix() { + .range-value span { + transform: translate(-50%, +150%); + } + } + .range-value span:before { content: ""; position: absolute; width: 0; From 0e8dbcf28a857a8b07fdee701d758d0685d70c03 Mon Sep 17 00:00:00 2001 From: RFDarter Date: Wed, 24 Jul 2024 00:49:34 +0200 Subject: [PATCH 3/3] [v3] Climate component (#114) --- packages/v3/src/css/app.ts | 2 +- packages/v3/src/css/esp-entity-table.ts | 19 ++++- packages/v3/src/esp-entity-table.ts | 106 +++++++++++++----------- packages/v3/src/esp-range-slider.ts | 3 +- 4 files changed, 78 insertions(+), 52 deletions(-) diff --git a/packages/v3/src/css/app.ts b/packages/v3/src/css/app.ts index 60a5df3..f821f90 100644 --- a/packages/v3/src/css/app.ts +++ b/packages/v3/src/css/app.ts @@ -3,7 +3,7 @@ import { css } from "lit"; export default css` .flex-grid-half { display: grid; - grid-template-columns: 600px 2fr; + grid-template-columns: 700px 2fr; } .flex-grid-half.expanded_entity, .flex-grid-half.expanded_logs { diff --git a/packages/v3/src/css/esp-entity-table.ts b/packages/v3/src/css/esp-entity-table.ts index 82a93a6..f0ab116 100644 --- a/packages/v3/src/css/esp-entity-table.ts +++ b/packages/v3/src/css/esp-entity-table.ts @@ -72,7 +72,24 @@ export default css` margin: auto; display: flex; } - + .climate-wrap{ + width: 100%; + margin: 10px 0 10px 0; + } + .climate-row { + width: 100%; + display: inline-flex; + flex-wrap: wrap; + text-align: left; + } + .climate-row > select{ + width: 50%; + } + .climate-row > label{ + align-content: center; + width: 150px; + } + input[type="color"]::-webkit-color-swatch-wrapper { padding: 0 !important; } diff --git a/packages/v3/src/esp-entity-table.ts b/packages/v3/src/esp-entity-table.ts index 42eb5d7..4b9822e 100644 --- a/packages/v3/src/esp-entity-table.ts +++ b/packages/v3/src/esp-entity-table.ts @@ -621,65 +621,73 @@ class ActionRenderer { render_climate() { if (!this.entity) return; - let target_temp_slider, target_temp_label; + let target_temp_slider, target_temp_label, target_temp; + let current_temp = html`
+ +
`; + if ( this.entity.target_temperature_low !== undefined && this.entity.target_temperature_high !== undefined ) { - target_temp_label = html`${this.entity - .target_temperature_low} .. ${this.entity - .target_temperature_high}`; - target_temp_slider = html` - ${this._range( - this.entity, - "set", - "target_temperature_low", - this.entity.target_temperature_low, - this.entity.min_temp, - this.entity.max_temp, - this.entity.step - )} - ${this._range( - this.entity, - "set", - "target_temperature_high", - this.entity.target_temperature_high, - this.entity.min_temp, - this.entity.max_temp, - this.entity.step - )} - `; + target_temp = html` +
+ + ${this._range( + this.entity, + "set", + "target_temperature_low", + this.entity.target_temperature_low, + this.entity.min_temp, + this.entity.max_temp, + this.entity.step + )} +
+
+ + ${this._range( + this.entity, + "set", + "target_temperature_high", + this.entity.target_temperature_high, + this.entity.min_temp, + this.entity.max_temp, + this.entity.step + )} +
`; } else { - target_temp_label = html`${this.entity.target_temperature}`; - target_temp_slider = html` - ${this._range( - this.entity, - "set", - "target_temperature", - this.entity.target_temperature!!, - this.entity.min_temp, - this.entity.max_temp, - this.entity.step - )} - `; + target_temp = html` +
+ + ${this._range( + this.entity, + "set", + "target_temperature", + this.entity.target_temperature!!, + this.entity.min_temp, + this.entity.max_temp, + this.entity.step + )} +
`; } let modes = html``; if ((this.entity.modes ? this.entity.modes.length : 0) > 0) { - modes = html`Mode:
- ${this._select( - this.entity, - "set", - "mode", - this.entity.modes || [], - this.entity.mode || "" - )}`; + modes = html` +
+ + ${this._select( + this.entity, + "set", + "mode", + this.entity.modes || [], + this.entity.mode || "" + )} +
`; } return html` - - ${target_temp_slider} ${modes} +
+ ${current_temp} ${target_temp} ${modes} +
`; } } diff --git a/packages/v3/src/esp-range-slider.ts b/packages/v3/src/esp-range-slider.ts index c136a10..4395af0 100644 --- a/packages/v3/src/esp-range-slider.ts +++ b/packages/v3/src/esp-range-slider.ts @@ -186,7 +186,8 @@ export class EspRangeSlider extends LitElement { cssReset, css` :host { - width: 100%; + min-width: 150px; + flex: 1; } input[type=range] { background: transparent;