chore: update animal page

taiga-family · Aug 29, 2024 · d4abe9a · d4abe9a
1 parent 5ca99be
commit d4abe9a
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 39 deletions.
diff --git a/apps/taiga-lumbermill/src/dashboards/dashboards/dashboards.component.html b/apps/taiga-lumbermill/src/dashboards/dashboards/dashboards.component.html
@@ -13,7 +13,6 @@
         <span tuiFade>{{ title }} dashboard</span>
     </span>
     <tui-tabs
-        tuiFade
         [activeItemIndex]="0"
         [style.margin-left]="'auto'"
     >

diff --git a/apps/taiga-lumbermill/src/dashboards/space-zoo/components/animal/animal.component.html b/apps/taiga-lumbermill/src/dashboards/space-zoo/components/animal/animal.component.html
@@ -1,5 +1,4 @@
 @let animal = animals[id];
-@let value = value$ | async;
 <div class="info">
     <tui-avatar
         [size]="'xxl'"
@@ -17,11 +16,12 @@ <h3 tuiTitle>
                 [style.gap]="'0.5rem'"
             >
                 <span tuiSubtitle>Health:</span>
+                @let HealthvValue = values$[0]() | async;
                 <tui-badge
                     tuiStatus
-                    [appearance]="animal.health === 'good' || value === max ? 'success' : 'warning'"
+                    [appearance]="animal.health === 'good' || HealthvValue === max ? 'success' : 'warning'"
                 >
-                    {{ value === max ? 'good' : animal.health }}
+                    {{ HealthvValue === max ? 'good' : animal.health }}
                 </tui-badge>
             </div>
             <div class="tags">
@@ -31,27 +31,6 @@ <h3 tuiTitle>
             </div>
         </h3>
     </header>
-</div>
-<div class="main">
-    <div
-        tuiAppearance="whiteblock"
-        tuiCardLarge="normal"
-        class="card"
-    >
-        <header tuiHeader>
-            <h2
-                tuiTitle
-                [style.text-align]="'center'"
-            >
-                About animal
-            </h2>
-        </header>
-        <div>
-            <p class="about">From: {{ animal.from }}</p>
-            <p class="about">Description: {{ animal.about }}</p>
-        </div>
-        <div></div>
-    </div>
     <div
         tuiAppearance="whiteblock"
         tuiCardLarge="normal"
@@ -67,24 +46,20 @@ <h3 tuiTitle>
         </header>
         <div class="list">
             @for (act of actions; track $index) {
+                @let value = values$[$index]() | async;
                 <div
+                    class="action"
                     [class.disable]="!inArray(act)"
-                    [style.display]="'flex'"
-                    [style.gap]="'1rem'"
                 >
                     <button
                         tuiCardLarge="normal"
                         tuiSurface="elevated"
                         class="card"
-                        [style.margin-bottom]="'auto'"
-                        [style.margin-top]="'auto'"
-                        (click)="inArray(act) ? (states[$index] = !states[$index]) : ''"
+                        (click)="inArray(act) ? states[$index].set(!states[$index]()) : ''"
                     >
-                        <p class="tui-space_top-0 tui-space_bottom-0 action-text">
-                            {{ act }}
-                        </p>
+                        <p class="tui-space_top-0 tui-space_bottom-0 action-text">{{ act }}</p>
                     </button>
-                    @if (states[$index]) {
+                    @if (states[$index]()) {
                         <label
                             *ngIf="value"
                             tuiProgressLabel
@@ -110,3 +85,24 @@ <h3 tuiTitle>
         </div>
     </div>
 </div>
+<div class="main">
+    <div
+        tuiAppearance="whiteblock"
+        tuiCardLarge="normal"
+        class="card"
+    >
+        <header tuiHeader>
+            <h2
+                tuiTitle
+                [style.text-align]="'center'"
+            >
+                About animal
+            </h2>
+        </header>
+        <div>
+            <p class="about">From: {{ animal.from }}</p>
+            <p class="about">Description: {{ animal.about }}</p>
+        </div>
+        <div></div>
+    </div>
+</div>
diff --git a/apps/taiga-lumbermill/src/dashboards/space-zoo/components/animal/animal.component.less b/apps/taiga-lumbermill/src/dashboards/space-zoo/components/animal/animal.component.less
@@ -5,7 +5,6 @@
 .info {
     display: flex;
     align-items: center;
-    justify-content: center;
     gap: 2rem;
     text-align: center;
 
@@ -27,8 +26,11 @@
     flex-wrap: wrap;
 }
 
-.card {
+.card[tuiCardLarge][data-space] {
     flex-grow: 1;
+    padding-top: 1.2rem;
+    padding-bottom: 1.2rem;
+    height: min-content;
 }
 
 .about {
@@ -49,7 +51,6 @@
 .list {
     display: flex;
     flex-direction: column;
-    gap: 0.4rem;
 }
 
 .disable {
@@ -61,3 +62,9 @@
     font-weight: 600;
     text-align: left;
 }
+
+.action {
+    display: flex;
+    gap: 1rem;
+    height: max-content;
+}
diff --git a/apps/taiga-lumbermill/src/dashboards/space-zoo/components/animal/animal.component.ts b/apps/taiga-lumbermill/src/dashboards/space-zoo/components/animal/animal.component.ts
@@ -1,5 +1,11 @@
 import {CommonModule} from '@angular/common';
-import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    signal,
+} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {ActivatedRoute} from '@angular/router';
 import {TuiAppearance, TuiSurface, TuiTitle} from '@taiga-ui/core';
@@ -39,7 +45,18 @@ export class AnimalComponent {
         takeWhile((value) => value <= this.max),
     );
 
-    protected states = animals[this.id].action.map((_) => false);
+    protected states = actions.map((_) => signal(false));
+    protected values$ = actions.map((_, ind) =>
+        computed(() =>
+            this.states[ind]()
+                ? timer(140, 80).pipe(
+                      map((i) => i + 30),
+                      startWith(30),
+                      takeWhile((value) => value <= this.max),
+                  )
+                : null,
+        ),
+    );
 
     protected inArray(value: string): boolean {
         return this.animals[this.id].action.includes(value);