chore(demo): improve color table for mobile (#8609)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Aug 23, 2024 · fb85eba · fb85eba
1 parent cbaac1b
commit fb85eba
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 28 deletions.
diff --git a/projects/addon-doc/components/copy/index.html b/projects/addon-doc/components/copy/index.html
@@ -8,15 +8,17 @@
     (click)="onClick()"
 >
     <span
+        *tuiLet="copied$ | async as copied"
         class="t-content"
-        [class.t-content_moved]="copied$ | async"
     >
         <span
             class="t-initial"
-            [attr.data-text]="texts[0]"
+            [attr.data-text]="copied ? '' : texts[0]"
         >
-            <ng-content />
+            <ng-container *ngIf="!copied">
+                <ng-content />
+            </ng-container>
         </span>
-        {{ texts[1] }}
+        {{ copied ? texts[1] : '' }}
     </span>
 </button>
diff --git a/projects/addon-doc/components/copy/index.less b/projects/addon-doc/components/copy/index.less
@@ -11,6 +11,7 @@
     .transition(background);
 
     width: 100%;
+    height: 100%;
     color: var(--tui-text-primary);
     background: var(--tui-background-base);
     overflow: hidden;
@@ -33,11 +34,6 @@
 
     display: flex;
     flex-direction: column;
-    transform: translateY(1rem);
     text-align: center;
     line-height: 2rem;
-
-    &_moved {
-        transform: translateY(-1rem);
-    }
 }
diff --git a/projects/addon-doc/components/copy/index.ts b/projects/addon-doc/components/copy/index.ts
@@ -1,6 +1,7 @@
 import {AsyncPipe, NgIf} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {TUI_FALSE_HANDLER} from '@taiga-ui/cdk/constants';
+import {TuiLet} from '@taiga-ui/cdk/directives/let';
 import {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous';
 import {TuiButton} from '@taiga-ui/core/components/button';
 import {TUI_COPY_TEXTS} from '@taiga-ui/kit/tokens';
@@ -12,7 +13,7 @@ const COPIED_TIMEOUT = 1500;
 @Component({
     standalone: true,
     selector: 'tui-doc-copy',
-    imports: [NgIf, AsyncPipe, TuiButton],
+    imports: [NgIf, AsyncPipe, TuiButton, TuiLet],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/...colors/examples/table/table.template.html → ...s/markup/colors/examples/table/index.html b/...colors/examples/table/table.template.html → ...s/markup/colors/examples/table/index.html
@@ -13,7 +13,7 @@ <h3 class="name">
             {{ color }}
         </h3>
     </td>
-    <td>
+    <td class="circle">
         <div
             class="demo"
             [style.background]="'var(' + color + ')'"

diff --git a/...up/colors/examples/table/table.style.less → ...s/markup/colors/examples/table/index.less b/...up/colors/examples/table/table.style.less → ...s/markup/colors/examples/table/index.less
@@ -4,13 +4,15 @@
     width: 100%;
     color: var(--tui-text-primary);
     background: var(--tui-background-base);
+    font-family: monospace;
+    table-layout: fixed;
 
     tr:not(:first-child) {
         border-top: 1px solid var(--tui-border-normal);
     }
 
     td {
-        padding: 1.5rem;
+        padding: 1.5rem 0.5rem;
 
         &:last-child {
             color: var(--tui-text-secondary);
@@ -19,19 +21,24 @@
     }
 }
 
+.circle {
+    text-align: center;
+}
+
 .demo {
     position: relative;
-    width: 4rem;
-    height: 4rem;
+    width: 3rem;
+    height: 3rem;
     border-radius: 100%;
     overflow: hidden;
+    display: inline-flex;
 }
 
 .name {
     .transition(color);
     position: relative;
     display: inline-block;
-    height: 2rem;
+    min-height: 2rem;
     background: var(--tui-background-base-alt);
     border-radius: var(--tui-radius-m);
     padding: 0.25rem 0.75rem;
@@ -44,19 +51,15 @@
             opacity: 1;
         }
     }
-
-    .copy {
-        min-width: 100%;
-    }
 }
 
 .value {
     position: relative;
-    width: 11.25rem;
-
-    .copy {
-        top: -0.25rem;
-    }
+    width: fit-content;
+    margin-right: 1rem;
+    padding: 1rem 0.75rem;
+    overflow-wrap: break-word;
+    text-align: center;
 }
 
 .copy {
@@ -66,6 +69,17 @@
     left: 0;
     background: var(--tui-background-base-alt);
     opacity: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 2rem;
+
+    ::ng-deep button {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        left: 0;
+        top: 0;
+    }
 
     &:hover {
         opacity: 1;

diff --git a/.../colors/examples/table/table.component.ts → ...les/markup/colors/examples/table/index.ts b/.../colors/examples/table/table.component.ts → ...les/markup/colors/examples/table/index.ts
@@ -4,14 +4,14 @@ import {Component, inject, Input} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {WA_WINDOW} from '@ng-web-apis/common';
 import {TuiDocCopy} from '@taiga-ui/addon-doc';
-import {tuiInjectElement} from '@taiga-ui/cdk';
+import {tuiInjectElement, tuiPure} from '@taiga-ui/cdk';
 
 @Component({
     standalone: true,
     selector: 'table[colors]',
     imports: [NgIf, AsyncPipe, NgForOf, TuiDocCopy, ClipboardModule],
-    templateUrl: './table.template.html',
-    styleUrls: ['./table.style.less'],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     changeDetection,
 })
 export class TableColors {
@@ -21,6 +21,7 @@ export class TableColors {
     @Input()
     public colors: readonly string[] = [];
 
+    @tuiPure
     protected getValue(variable: string): string {
         return this.styles.getPropertyValue(variable);
     }

diff --git a/projects/demo/src/modules/markup/colors/index.ts b/projects/demo/src/modules/markup/colors/index.ts
@@ -7,7 +7,7 @@ import {TuiGroup} from '@taiga-ui/core';
 import {TuiBlock} from '@taiga-ui/kit';
 
 import {BACKGROUNDS, CHARTS, OTHERS, STATUSES, TEXT} from './constants';
-import {TableColors} from './examples/table/table.component';
+import {TableColors} from './examples/table';
 
 @Component({
     standalone: true,