Improve background-editor background-attachment alignment (#23615)

home-assistant · Jan 9, 2025 · d0fbba5 · d0fbba5
1 parent 344e083
commit d0fbba5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/src/components/ha-button-toggle-group.ts b/src/components/ha-button-toggle-group.ts
@@ -75,8 +75,10 @@ export class HaButtonToggleGroup extends LitElement {
         direction: ltr;
       }
       mwc-button {
+        flex: 1;
         --mdc-shape-small: 0;
         --mdc-button-outline-width: 1px 0 1px 1px;
+        --mdc-button-outline-color: var(--primary-color);
       }
       ha-icon-button {
         border: 1px solid var(--primary-color);
@@ -94,7 +96,7 @@ export class HaButtonToggleGroup extends LitElement {
         width: 100%;
         height: 100%;
         position: absolute;
-        background-color: currentColor;
+        background-color: var(--primary-color);
         opacity: 0;
         pointer-events: none;
         content: "";
@@ -104,12 +106,22 @@ export class HaButtonToggleGroup extends LitElement {
       }
       ha-icon-button[active]::before,
       mwc-button[active]::before {
-        opacity: var(--mdc-icon-button-ripple-opacity, 0.12);
+        opacity: 1;
+      }
+      ha-icon-button[active] {
+        --icon-primary-color: var(--text-primary-color);
+      }
+      mwc-button[active] {
+        --mdc-theme-primary: var(--text-primary-color);
       }
       ha-icon-button:first-child,
       mwc-button:first-child {
         --mdc-shape-small: 4px 0 0 4px;
         border-radius: 4px 0 0 4px;
+        --mdc-button-outline-width: 1px;
+      }
+      mwc-button:first-child::before {
+        border-radius: 4px 0 0 4px;
       }
       ha-icon-button:last-child,
       mwc-button:last-child {
@@ -118,6 +130,9 @@ export class HaButtonToggleGroup extends LitElement {
         --mdc-shape-small: 0 4px 4px 0;
         --mdc-button-outline-width: 1px;
       }
+      mwc-button:last-child::before {
+        border-radius: 0 4px 4px 0;
+      }
       ha-icon-button:only-child,
       mwc-button:only-child {
         --mdc-shape-small: 4px;

diff --git a/src/components/ha-selector/ha-selector-button-toggle.ts b/src/components/ha-selector/ha-selector-button-toggle.ts
@@ -87,6 +87,16 @@ export class HaButtonToggleSelector extends LitElement {
   static styles = css`
     :host {
       position: relative;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: center;
+    }
+    @media all and (max-width: 600px) {
+      ha-button-toggle-group {
+        flex: 1;
+      }
     }
   `;
 }

diff --git a/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts
@@ -54,6 +54,7 @@ export class HuiViewBackgroundEditor extends LitElement {
               },
               {
                 name: "size",
+                required: true,
                 selector: {
                   select: {
                     translation_key:
@@ -65,6 +66,7 @@ export class HuiViewBackgroundEditor extends LitElement {
               },
               {
                 name: "alignment",
+                required: true,
                 selector: {
                   select: {
                     translation_key:
@@ -86,6 +88,7 @@ export class HuiViewBackgroundEditor extends LitElement {
               },
               {
                 name: "repeat",
+                required: true,
                 selector: {
                   select: {
                     translation_key: