feat(frontend: soundboard): adjust sound button sizes to improve UX (#15

)
dominikks · Nov 7, 2023 · 6062445 · 6062445
1 parent c5c2327
commit 6062445
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 13 deletions.
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
@@ -2,4 +2,6 @@
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  max-width: 100vw;
+  overflow-x: hidden;
 }
diff --git a/frontend/src/app/keybind-generator/keybind-generator.component.scss b/frontend/src/app/keybind-generator/keybind-generator.component.scss
@@ -1,7 +1,7 @@
 @import 'variables';
 
 .max-width {
-  max-width: 1200px;
+  max-width: 1500px;
   margin: 0 auto;
   width: 100%;
 }

diff --git a/frontend/src/app/recorder/recorder.component.scss b/frontend/src/app/recorder/recorder.component.scss
@@ -7,7 +7,7 @@
 }
 
 .max-width {
-  max-width: 1200px;
+  max-width: 1500px;
   margin: 0 auto;
   width: 100%;
 }

diff --git a/frontend/src/app/settings/random-infixes/random-infixes.component.scss b/frontend/src/app/settings/random-infixes/random-infixes.component.scss
@@ -1,6 +1,6 @@
 mat-card {
   margin-bottom: 8px;
-  max-width: 1200px;
+  max-width: 1500px;
 }
 
 .infix-list-item {

diff --git a/frontend/src/app/soundboard/soundboard-button/soundboard-button.component.html b/frontend/src/app/soundboard/soundboard-button/soundboard-button.component.html
@@ -1,5 +1,5 @@
 <button mat-raised-button (click)="this.playSound()" class="main-button">
-  <div class="sound-name"><ng-content></ng-content></div>
+  <div class="sound-name" #soundName><ng-content></ng-content></div>
   <div class="sound-source mat-small" [matTooltip]="(guildId | guildName) + displayedCategory" matTooltipShowDelay="500">
     <ng-container *ngIf="category == null">{{ guildId | guildName }}</ng-container>
     <ng-container *ngIf="category === ''"><span class="no-category">-- empty --</span></ng-container>

diff --git a/frontend/src/app/soundboard/soundboard-button/soundboard-button.component.scss b/frontend/src/app/soundboard/soundboard-button/soundboard-button.component.scss
@@ -4,17 +4,19 @@
 
 .main-button {
   height: 100%;
-  width: 100%;
+  min-width: 100%;
+  object-fit: cover;
 
   &:not(:only-child) {
-    padding-right: 56px;
+    padding-right: 72px;
   }
 
   ::ng-deep .mdc-button__label {
     display: flex;
     align-self: stretch;
     flex-direction: column;
     text-align: center;
+    min-width: 100%;
 
     z-index: 0; // prevents the label from overlapping the preview button or filters
   }
@@ -25,6 +27,10 @@
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
+
+  &.mat-unthemed {
+    color: rgba(232, 230, 227, 0.38);
+  }
 }
 
 .sound-name,
@@ -38,7 +44,15 @@
   align-items: center;
   justify-content: center;
   font-weight: 500;
-  padding-bottom: 1em;
+  margin-top: 0.5em;
+  margin-bottom: 1.5em;
+  max-height: 100%;
+  word-break: break-word;
+
+  ::ng-deep .mat-icon {
+    flex: none;
+    margin-right: 0.5em;
+  }
 }
 
 .sound-source {

diff --git a/frontend/src/app/soundboard/soundboard-button/soundboard-button.component.ts b/frontend/src/app/soundboard/soundboard-button/soundboard-button.component.ts
@@ -1,12 +1,12 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 
 @Component({
   selector: 'app-soundboard-button',
   templateUrl: './soundboard-button.component.html',
   styleUrls: ['./soundboard-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SoundboardButtonComponent {
+export class SoundboardButtonComponent implements AfterViewInit {
   @Input({ required: true }) guildId: string;
   @Input() category?: string;
   @Input() isLocallyPlaying = false;
@@ -15,10 +15,16 @@ export class SoundboardButtonComponent {
   @Output() playLocal = new EventEmitter<void>();
   @Output() stopLocal = new EventEmitter<void>();
 
+  @ViewChild('soundName') nameLabel: ElementRef;
+
   get displayedCategory() {
     return this.category == null || this.category === '' ? '' : `/${this.category}`;
   }
 
+  ngAfterViewInit() {
+    this.setLabelMinWidthToFitContent();
+  }
+
   playSound(local = false) {
     if (local) {
       this.playLocal.emit();
@@ -34,4 +40,18 @@ export class SoundboardButtonComponent {
       this.playSound(true);
     }
   }
+
+  setLabelMinWidthToFitContent() {
+    const label = this.nameLabel.nativeElement;
+    label.style.whiteSpace = 'nowrap';
+    const computedStyle = window.getComputedStyle(label);
+    const horizontalPadding = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
+    const singleLineWidth = label.clientWidth - horizontalPadding;
+
+    // subtract all paddings/margins from viewport width; this gets the maximum width, the label can have
+    const cssMaxWidth = 'calc(100vw - 72px - 16px - 16px - 10px)';
+
+    label.style.minWidth = `min(${singleLineWidth / 2 + horizontalPadding + 50}px, ${cssMaxWidth})`;
+    label.style.whiteSpace = null;
+  }
 }
diff --git a/frontend/src/app/soundboard/soundboard.component.scss b/frontend/src/app/soundboard/soundboard.component.scss
@@ -4,7 +4,7 @@
   flex-direction: column;
 }
 
-$main-width: 1200px;
+$main-width: 1500px;
 
 .max-width {
   margin: 0 auto;
@@ -95,9 +95,8 @@ main {
 
     app-soundboard-button {
       margin: 5px;
-      flex: 1 0 175px;
-      max-width: 300px;
-      height: 70px;
+      flex: 1 0 170px;
+      min-height: 70px;
     }
   }