Fix icons in fan control modal

Raphiiko · Mar 17, 2024 · 843a07a · 843a07a
1 parent 9efeb44
commit 843a07a
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 4 deletions.
diff --git a/...ightness-control-modal/brightness-control-slider/brightness-control-slider.component.html b/...ightness-control-modal/brightness-control-slider/brightness-control-slider.component.html
@@ -1,5 +1,6 @@
 <div class="brightness-slider-bar-row">
-  <i class="material-icons brightness-level-icon">brightness_5</i>
+  <i class="material-icons brightness-level-icon" *ngIf="icons === 'BRIGHTNESS'">brightness_5</i>
+  <i class="material-symbols-outlined brightness-level-icon icon-filled" *ngIf="icons === 'FAN_SPEED'">mode_fan_off</i>
   <div class="brightness-slider-bar" (mousedown)="onDragStart($event)">
     <div
       class="brightness-slider-bar-inner"
@@ -8,10 +9,11 @@
       [style.width]="innerWidth"
     >
       <div class="brightness-slider-bar-label"
-        ><span>{{ (dragging ? dragValue : value) | number : '1.0-0' }}%</span></div
+      ><span>{{ (dragging ? dragValue : value) | number : '1.0-0' }}%</span></div
       >
     </div>
     <div class="brightness-slider-bar-range-guide" #rangeGuideEl></div>
   </div>
-  <i class="material-icons brightness-level-icon">brightness_7</i>
+  <i class="material-icons brightness-level-icon" *ngIf="icons === 'BRIGHTNESS'">brightness_7</i>
+  <i class="material-symbols-outlined brightness-level-icon icon-filled" *ngIf="icons === 'FAN_SPEED'">mode_fan</i>
 </div>
diff --git a/...brightness-control-modal/brightness-control-slider/brightness-control-slider.component.ts b/...brightness-control-modal/brightness-control-slider/brightness-control-slider.component.ts
@@ -23,6 +23,7 @@ export class BrightnessControlSliderComponent implements OnInit, OnChanges {
   @Input() value = 50;
   @Input() step = 1;
   @Input() transitionActive = false;
+  @Input() icons: 'BRIGHTNESS' | 'FAN_SPEED' = 'BRIGHTNESS';
   @Output() valueChange = new EventEmitter<number>();
 
   @ViewChild('rangeGuideEl') rangeGuideEl?: ElementRef;

diff --git a/src-ui/app/components/bsb-fan-speed-control-modal/bsb-fan-speed-control-modal.component.html b/src-ui/app/components/bsb-fan-speed-control-modal/bsb-fan-speed-control-modal.component.html
@@ -9,6 +9,7 @@
         [value]="(fanControl.fanSpeed | async) ?? 0"
         [min]="fanSpeedBounds[0]"
         [max]="fanSpeedBounds[1]"
+        [icons]="'FAN_SPEED'"
         (valueChange)="setFanSpeed.next($event)"
       ></app-brightness-control-slider>
       <div class="brightness-slider-title">

diff --git a/src-ui/app/components/main-status-bar/main-status-bar.component.html b/src-ui/app/components/main-status-bar/main-status-bar.component.html
@@ -49,7 +49,7 @@
         @hshrink
       >
         <div class="pill-icon" @hshrink>
-          <i class="material-symbols-outlined">mode_fan</i>
+          <i class="material-symbols-outlined icon-filled">mode_fan</i>
         </div>
         <span @hshrink *ngIf="state.hover"
         >{{ 'comp.main-status-bar.bsbFanSpeed.label' | translate }}:&nbsp;</span

diff --git a/src-ui/styles/misc.scss b/src-ui/styles/misc.scss
@@ -226,3 +226,7 @@
   }
   @return $result;
 }
+
+.icon-filled {
+  font-variation-settings: 'FILL' 1;
+}