fix: missing padding for grouping button

punxaphil · Dec 7, 2023 · 8136709 · 8136709
1 parent a41a7af
commit 8136709
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 34 deletions.
diff --git a/src/components/button.ts b/src/components/button.ts
diff --git a/src/components/grouping-button.ts b/src/components/grouping-button.ts
@@ -0,0 +1,43 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export class GroupingButton extends LitElement {
+  @property() icon!: string;
+  @property() name!: string;
+
+  render() {
+    const iconAndName = (!!this.icon && !!this.name) || nothing;
+    return html`
+      <ha-control-button>
+        ${this.icon ? html` <ha-icon icon-and-name=${iconAndName} .icon=${this.icon}></ha-icon>` : ''}
+        ${this.name ? html`<span>${this.name}</span>` : ''}
+      </ha-control-button>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-control-button {
+        width: fit-content;
+        --control-button-background-color: var(--accent-color);
+        --control-button-icon-color: var(--secondary-text-color);
+      }
+
+      ha-icon {
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      ha-icon[icon-and-name] {
+        padding-right: 0;
+      }
+
+      span {
+        padding-right: 1rem;
+        padding-left: 1rem;
+        font-weight: bold;
+      }
+    `;
+  }
+}
+
+customElements.define('sonos-grouping-button', GroupingButton);
diff --git a/src/sections/grouping.ts b/src/sections/grouping.ts
@@ -4,9 +4,9 @@ import { when } from 'lit/directives/when.js';
 import MediaControlService from '../services/media-control-service';
 import Store from '../model/store';
 import { dispatchActivePlayerId } from '../utils/utils';
-import { getButton } from '../components/button';
 import { listStyle } from '../constants';
 import { MediaPlayer } from '../model/media-player';
+import '../components/grouping-button';
 
 export class Grouping extends LitElement {
   @property() store!: Store;
@@ -50,8 +50,12 @@ export class Grouping extends LitElement {
   private renderJoinAllButton() {
     const notJoinedPlayers = this.getNotJoinedPlayers();
     return when(notJoinedPlayers.length, () => {
-      const click = async () => await this.mediaControlService.join(this.activePlayer.id, notJoinedPlayers);
-      return getButton(click, 'mdi:checkbox-multiple-marked-outline');
+      return html`
+        <sonos-grouping-button
+          @click=${async () => await this.mediaControlService.join(this.activePlayer.id, notJoinedPlayers)}
+          .icon=${'mdi:checkbox-multiple-marked-outline'}
+        ></sonos-grouping-button>
+      `;
     });
   }
 
@@ -64,8 +68,12 @@ export class Grouping extends LitElement {
   private renderUnJoinAllButton() {
     const joinedPlayers = this.getJoinedPlayers();
     return when(joinedPlayers.length, () => {
-      const click = async () => await this.mediaControlService.unJoin(joinedPlayers);
-      return getButton(click, 'mdi:minus-box-multiple-outline');
+      return html`
+        <sonos-grouping-button
+          @click=${async () => await this.mediaControlService.unJoin(joinedPlayers)}
+          .icon=${'mdi:minus-box-multiple-outline'}
+        ></sonos-grouping-button>
+      `;
     });
   }
 
@@ -97,8 +105,13 @@ export class Grouping extends LitElement {
 
   private renderPredefinedGroups() {
     return this.store.predefinedGroups.map((predefinedGroup) => {
-      const click = async () => await this.mediaControlService.createGroup(predefinedGroup, this.allGroups);
-      return getButton(click, 'mdi:speaker-multiple', predefinedGroup.name);
+      return html`
+        <sonos-grouping-button
+          @click=${async () => await this.mediaControlService.createGroup(predefinedGroup, this.allGroups)}
+          .icon=${'mdi:speaker-multiple'}
+          .name=${predefinedGroup.name}
+        ></sonos-grouping-button>
+      `;
     });
   }
   static get styles() {