Format

Raphiiko · Jul 8, 2024 · 98d7837 · 98d7837
1 parent 61cc7d0
commit 98d7837
Show file tree

Hide file tree

Showing 33 changed files with 404 additions and 174 deletions.
diff --git a/src-ui/app/components/brightness-control-modal/brightness-control-modal.component.html b/src-ui/app/components/brightness-control-modal/brightness-control-modal.component.html
@@ -52,20 +52,15 @@
   <div class="link-bar">
     <a
       class="link"
-      *ngIf="
-      !isActive('/dashboard/settings/brightnessCct')
-
-    "
+      *ngIf="!isActive('/dashboard/settings/brightnessCct')"
       [routerLink]="['dashboard', 'settings', 'brightnessCct']"
       (click)="close()"
     >
       <i class="material-symbols-outlined icon-filled">settings</i>
     </a>
     <a
       class="link"
-      *ngIf="
-      !isActive('/dashboard/brightnessAutomations')
-    "
+      *ngIf="!isActive('/dashboard/brightnessAutomations')"
       [routerLink]="['dashboard', 'brightnessAutomations']"
       (click)="close()"
     >

diff --git a/src-ui/app/components/brightness-control-modal/brightness-control-modal.component.scss b/src-ui/app/components/brightness-control-modal/brightness-control-modal.component.scss
@@ -19,12 +19,12 @@
       ellipse at 40% 0%,
       color-mix(in srgb, var(--a) 6%, transparent) 0,
       transparent 75%
-  ),
-  radial-gradient(
+    ),
+    radial-gradient(
       ellipse at 60% 0%,
       color-mix(in srgb, var(--b) 6%, transparent) 0,
       transparent 75%
-  );
+    );
   @include pane-radial-gradient(#fff);
   display: flex;
   flex-direction: row-reverse;
@@ -109,7 +109,7 @@ app-brightness-control-slider {
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    transition: all .15s ease;
+    transition: all 0.15s ease;
     text-decoration: none;
     flex: 1;
 

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,10 +1,12 @@
 <div class="brightness-slider-bar-row">
   <i class="material-icons brightness-level-icon" *ngIf="mode === 'BRIGHTNESS'">brightness_5</i>
-  <i class="material-symbols-outlined brightness-level-icon" *ngIf="mode === 'CCT'">thermometer_minus</i>
+  <i class="material-symbols-outlined brightness-level-icon" *ngIf="mode === 'CCT'"
+    >thermometer_minus</i
+  >
   <i
     class="material-symbols-outlined brightness-level-icon icon-filled"
     *ngIf="mode === 'FAN_SPEED'"
-  >mode_fan_off</i
+    >mode_fan_off</i
   >
   <div class="brightness-slider-bar" (mousedown)="onDragStart($event)" [class.cct]="mode === 'CCT'">
     <div
@@ -14,21 +16,26 @@
       [style.width]="innerWidth"
     >
       <div class="brightness-slider-bar-label">
-
-        <span *ngIf="['BRIGHTNESS', 'FAN_SPEED'].includes(mode)">{{ (dragging ? dragValue : value) | number : '1.0-0' }}
-          %</span>
-        <div *ngIf="['CCT'].includes(mode)" class="colortemp-icon"
-             [style.background-color]="cctColor"></div>
-        <span *ngIf="['CCT'].includes(mode)">{{ (dragging ? dragValue : value) }}K</span>
+        <span *ngIf="['BRIGHTNESS', 'FAN_SPEED'].includes(mode)"
+          >{{ (dragging ? dragValue : value) | number : '1.0-0' }} %</span
+        >
+        <div
+          *ngIf="['CCT'].includes(mode)"
+          class="colortemp-icon"
+          [style.background-color]="cctColor"
+        ></div>
+        <span *ngIf="['CCT'].includes(mode)">{{ dragging ? dragValue : value }}K</span>
       </div>
     </div>
     <div class="brightness-slider-bar-range-guide" #rangeGuideEl></div>
   </div>
   <i class="material-icons brightness-level-icon" *ngIf="mode === 'BRIGHTNESS'">brightness_7</i>
-  <i class="material-symbols-outlined brightness-level-icon" *ngIf="mode === 'CCT'">thermometer_add</i>
+  <i class="material-symbols-outlined brightness-level-icon" *ngIf="mode === 'CCT'"
+    >thermometer_add</i
+  >
   <i
     class="material-symbols-outlined brightness-level-icon icon-filled"
     *ngIf="mode === 'FAN_SPEED'"
-  >mode_fan</i
+    >mode_fan</i
   >
 </div>
diff --git a/...ightness-control-modal/brightness-control-slider/brightness-control-slider.component.scss b/...ightness-control-modal/brightness-control-slider/brightness-control-slider.component.scss
@@ -107,7 +107,6 @@
       white-space: nowrap;
     }
 
-
     &-range-guide {
       position: absolute;
       top: 0;

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
@@ -14,13 +14,10 @@
     </div>
   </div>
 
-  <div class="link-bar" @hshrink
-       *ngIf="!isActive('/dashboard/hmdAutomations')">
+  <div class="link-bar" @hshrink *ngIf="!isActive('/dashboard/hmdAutomations')">
     <a
       class="link"
-      *ngIf="
-      !isActive('/dashboard/hmdAutomations')
-    "
+      *ngIf="!isActive('/dashboard/hmdAutomations')"
       [routerLink]="['dashboard', 'hmdAutomations']"
       (click)="close()"
     >

diff --git a/src-ui/app/components/bsb-fan-speed-control-modal/bsb-fan-speed-control-modal.component.scss b/src-ui/app/components/bsb-fan-speed-control-modal/bsb-fan-speed-control-modal.component.scss
@@ -19,12 +19,12 @@
       ellipse at 40% 0%,
       color-mix(in srgb, var(--a) 6%, transparent) 0,
       transparent 75%
-  ),
-  radial-gradient(
+    ),
+    radial-gradient(
       ellipse at 60% 0%,
       color-mix(in srgb, var(--b) 6%, transparent) 0,
       transparent 75%
-  );
+    );
   @include pane-radial-gradient(#fff);
   display: flex;
   flex-direction: row-reverse;
@@ -94,7 +94,6 @@ app-brightness-control-slider {
   }
 }
 
-
 .link-bar {
   display: flex;
   height: 100%;
@@ -110,7 +109,7 @@ app-brightness-control-slider {
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    transition: all .15s ease;
+    transition: all 0.15s ease;
     text-decoration: none;
     flex: 1;
 

diff --git a/src-ui/app/components/cct-control-modal/cct-control-modal.component.html b/src-ui/app/components/cct-control-modal/cct-control-modal.component.html
@@ -22,20 +22,15 @@
   <div class="link-bar">
     <a
       class="link"
-      *ngIf="
-      !isActive('/dashboard/settings/brightnessCct')
-
-    "
+      *ngIf="!isActive('/dashboard/settings/brightnessCct')"
       [routerLink]="['dashboard', 'settings', 'brightnessCct']"
       (click)="close()"
     >
       <i class="material-symbols-outlined icon-filled">settings</i>
     </a>
     <a
       class="link"
-      *ngIf="
-      !isActive('/dashboard/brightnessAutomations')
-    "
+      *ngIf="!isActive('/dashboard/brightnessAutomations')"
       [routerLink]="['dashboard', 'brightnessAutomations']"
       (click)="close()"
     >

diff --git a/src-ui/app/components/cct-control-modal/cct-control-modal.component.scss b/src-ui/app/components/cct-control-modal/cct-control-modal.component.scss
@@ -19,12 +19,12 @@
       ellipse at 40% 0%,
       color-mix(in srgb, var(--a) 6%, transparent) 0,
       transparent 75%
-  ),
-  radial-gradient(
+    ),
+    radial-gradient(
       ellipse at 60% 0%,
       color-mix(in srgb, var(--b) 6%, transparent) 0,
       transparent 75%
-  );
+    );
   @include pane-radial-gradient(#fff);
   display: flex;
   flex-direction: row-reverse;
@@ -67,7 +67,6 @@
   }
 }
 
-
 .link-bar {
   display: flex;
   height: 100%;
@@ -83,7 +82,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    transition: all .15s ease;
+    transition: all 0.15s ease;
     text-decoration: none;
     flex: 1;
 

diff --git a/src-ui/app/components/cct-input-setting/cct-input-setting.component.html b/src-ui/app/components/cct-input-setting/cct-input-setting.component.html
@@ -1,10 +1,28 @@
 <div class="wrapper" (clickOutside)="inputOpen = false">
-  <input type="text" [value]="displayValue()" readonly (mouseenter)="mouseEnter('INPUT')"
-         (mouseleave)="mouseLeave('INPUT')" [disabled]="disabled"
-         [style.background-color]="cctColor">
-  <div class="input-container" *ngIf="inputOpen" @fade (mouseenter)="mouseEnter('CONTAINER')"
-       (mouseleave)="mouseLeave('CONTAINER')">
-    <app-slider [min]="1000" [max]="10000" [snapValues]="[6600]" [snapDistance]="200" [value]="value()" [step]="50"
-                (valueChange)="updateValue($event)"></app-slider>
+  <input
+    type="text"
+    [value]="displayValue()"
+    readonly
+    (mouseenter)="mouseEnter('INPUT')"
+    (mouseleave)="mouseLeave('INPUT')"
+    [disabled]="disabled"
+    [style.background-color]="cctColor"
+  />
+  <div
+    class="input-container"
+    *ngIf="inputOpen"
+    @fade
+    (mouseenter)="mouseEnter('CONTAINER')"
+    (mouseleave)="mouseLeave('CONTAINER')"
+  >
+    <app-slider
+      [min]="1000"
+      [max]="10000"
+      [snapValues]="[6600]"
+      [snapDistance]="200"
+      [value]="value()"
+      [step]="50"
+      (valueChange)="updateValue($event)"
+    ></app-slider>
   </div>
 </div>
diff --git a/src-ui/app/components/cct-input-setting/cct-input-setting.component.scss b/src-ui/app/components/cct-input-setting/cct-input-setting.component.scss
@@ -22,15 +22,13 @@
   text-align: center;
   cursor: pointer;
   anchor-name: --input-el;
-  transition: opacity .15s ease;
+  transition: opacity 0.15s ease;
   color: black;
   font-weight: 600;
 
   &:active {
     opacity: 0.8;
   }
-
-
 }
 
 .input-container {

diff --git a/src-ui/app/components/color-picker/color-picker.component.scss b/src-ui/app/components/color-picker/color-picker.component.scss
@@ -17,7 +17,6 @@ input {
     border: 0;
     box-shadow: none;
   }
-
 }
 
 .color-input-wrapper {

diff --git a/src-ui/app/components/dashboard-navbar/dashboard-navbar.component.html b/src-ui/app/components/dashboard-navbar/dashboard-navbar.component.html
@@ -316,7 +316,11 @@
       <div class="menu-item-label" translate>comp.dashboard-navbar.settings.notifications</div>
     </div>
 
-    <div class="menu-item" [routerLinkActive]="'active'" [routerLink]="['settings', 'brightnessCct']">
+    <div
+      class="menu-item"
+      [routerLinkActive]="'active'"
+      [routerLink]="['settings', 'brightnessCct']"
+    >
       <div class="menu-item-icon-prefix">
         <i class="material-icons-round">brightness_6</i>
       </div>

diff --git a/src-ui/app/components/duration-input-setting/duration-input-setting.component.html b/src-ui/app/components/duration-input-setting/duration-input-setting.component.html
@@ -1,15 +1,49 @@
 <div class="wrapper" (clickOutside)="inputOpen = false">
-  <input type="text" [value]="displayValue()" readonly (mouseenter)="mouseEnter('INPUT')" (mouseleave)="mouseLeave('INPUT')" [disabled]="disabled">
-  <div class="input-container" *ngIf="inputOpen" @fade (mouseenter)="mouseEnter('CONTAINER')" (mouseleave)="mouseLeave('CONTAINER')">
+  <input
+    type="text"
+    [value]="displayValue()"
+    readonly
+    (mouseenter)="mouseEnter('INPUT')"
+    (mouseleave)="mouseLeave('INPUT')"
+    [disabled]="disabled"
+  />
+  <div
+    class="input-container"
+    *ngIf="inputOpen"
+    @fade
+    (mouseenter)="mouseEnter('CONTAINER')"
+    (mouseleave)="mouseLeave('CONTAINER')"
+  >
     <div class="input-container-labels">
       <span>H</span>
       <span>M</span>
       <span>S</span>
     </div>
     <div class="input-container-inputs">
-      <input type="number" [value]="hours()" min="0" max="24" (input)="setHours(hourInput.value)" #hourInput>
-      <input type="number" [value]="minutes()" min="0" max="60" (input)="setMinutes(minuteInput.value)" #minuteInput>
-      <input type="number" [value]="seconds()" min="0" max="60" (input)="setSeconds(secondInput.value)" #secondInput>
+      <input
+        type="number"
+        [value]="hours()"
+        min="0"
+        max="24"
+        (input)="setHours(hourInput.value)"
+        #hourInput
+      />
+      <input
+        type="number"
+        [value]="minutes()"
+        min="0"
+        max="60"
+        (input)="setMinutes(minuteInput.value)"
+        #minuteInput
+      />
+      <input
+        type="number"
+        [value]="seconds()"
+        min="0"
+        max="60"
+        (input)="setSeconds(secondInput.value)"
+        #secondInput
+      />
     </div>
   </div>
 </div>
diff --git a/src-ui/app/components/duration-input-setting/duration-input-setting.component.scss b/src-ui/app/components/duration-input-setting/duration-input-setting.component.scss
@@ -5,7 +5,7 @@
   text-align: center;
   cursor: pointer;
   anchor-name: --input-el;
-  transition: all .15s ease;
+  transition: all 0.15s ease;
 
   &:active {
     opacity: 0.8;
@@ -30,13 +30,12 @@
   margin-right: 0.5em;
   align-self: anchor-center;
 
-
-  &-labels, &-inputs {
+  &-labels,
+  &-inputs {
     display: flex;
     flex-direction: row;
     align-items: center;
     width: 100%;
-
   }
 
   &-labels {