Put number selector label above the input (#21835)

home-assistant · Aug 29, 2024 · 18210f3 · 18210f3
1 parent 362a6f4
commit 18210f3
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 6 deletions.
diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts
@@ -1,4 +1,11 @@
-import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -60,12 +67,10 @@ export class HaNumberSelector extends LitElement {
     }
 
     return html`
+      ${this.label ? html`${this.label}${this.required ? "*" : ""}` : nothing}
       <div class="input">
         ${!isBox
           ? html`
-              ${this.label
-                ? html`${this.label}${this.required ? "*" : ""}`
-                : ""}
               <ha-slider
                 labeled
                 .min=${this.selector.number!.min}
@@ -75,10 +80,11 @@ export class HaNumberSelector extends LitElement {
                 .disabled=${this.disabled}
                 .required=${this.required}
                 @change=${this._handleSliderChange}
+                .ticks=${this.selector.number?.slider_ticks}
               >
               </ha-slider>
             `
-          : ""}
+          : nothing}
         <ha-textfield
           .inputMode=${this.selector.number?.step === "any" ||
           (this.selector.number?.step ?? 1) % 1 !== 0
@@ -105,7 +111,7 @@ export class HaNumberSelector extends LitElement {
       </div>
       ${!isBox && this.helper
         ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
+        : nothing}
     `;
   }
 
@@ -141,6 +147,9 @@ export class HaNumberSelector extends LitElement {
       }
       ha-slider {
         flex: 1;
+        margin-right: 16px;
+        margin-inline-end: 16px;
+        margin-inline-start: 0;
       }
       ha-textfield {
         --ha-textfield-input-width: 40px;

diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts
@@ -20,6 +20,7 @@ export class HaSlider extends MdSlider {
         --md-sys-color-on-surface: var(--primary-text-color);
         --md-slider-handle-width: 14px;
         --md-slider-handle-height: 14px;
+        --md-slider-state-layer-size: 24px;
         min-width: 100px;
         min-inline-size: 100px;
         width: 200px;

diff --git a/src/data/selector.ts b/src/data/selector.ts
@@ -323,6 +323,7 @@ export interface NumberSelector {
     step?: number | "any";
     mode?: "box" | "slider";
     unit_of_measurement?: string;
+    slider_ticks?: boolean;
   } | null;
 }
 

diff --git a/src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts b/src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts
@@ -36,6 +36,7 @@ export class HuiDialogEditSection extends LitElement {
             number: {
               min: 1,
               max: maxColumns,
+              slider_ticks: true,
             },
           },
         },

diff --git a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
@@ -77,6 +77,7 @@ export class HuiViewEditor extends LitElement {
                     min: 1,
                     max: 10,
                     mode: "slider",
+                    slider_ticks: true,
                   },
                 },
               },
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,6 +36,7 @@ export class HuiDialogEditSection extends LitElement { @@
                 number: {
                   min: 1,
                   max: maxColumns,
+                  slider_ticks: true,
                 },
               },
             },
@@ Expand Down @@