feat(addon-doc): improve code block (#5970)

taiga-family · Nov 20, 2023 · 179178d · 179178d
1 parent 91a1cb9
commit 179178d
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 22 deletions.
diff --git a/projects/addon-doc/components/code/code.style.less b/projects/addon-doc/components/code/code.style.less
@@ -9,10 +9,19 @@
     font-weight: bold;
 }
 
+.t-header + .t-code {
+    border-radius: 0.25rem;
+}
+
 .t-code {
     position: relative;
     margin: 0;
     white-space: normal;
+    outline: 1px solid var(--tui-base-03);
+
+    ::ng-deep .hljs-ln {
+        width: max-content;
+    }
 }
 
 .t-code + .t-code {
@@ -24,26 +33,41 @@
     top: 0.75rem;
     right: 0.75rem;
     display: flex;
-    gap: 0.375rem;
     justify-content: center;
     align-items: center;
+    flex-direction: row-reverse;
+
+    :host-context(tui-root._mobile) & {
+        padding: 0.3125rem;
+        border-radius: 0.25rem;
+        border: 1px solid var(--tui-base-04);
+    }
+}
+
+.t-copy-button::ng-deep + *:not(:empty) {
+    margin-right: 0.375rem;
 }
 
 // highlightjs added class
 .hljs:not(:empty) {
     .customize-scroll();
     font: var(--tui-font-text-m);
+    font-size: 0.875rem;
     padding: 1.5rem 2rem;
     font-family: monospace;
-    background: var(--tui-clear);
     word-wrap: break-word;
     white-space: pre-wrap;
 
-    :host._has-filename & {
-        border-radius: 0.75rem;
-    }
-
     :host-context(tui-root._mobile) & {
         padding: 1rem;
     }
 }
+
+.t-code-actions,
+.hljs:not(:empty) {
+    background: var(--tui-base-01);
+
+    @supports (background: color-mix(in srgb, var(--tui-base-01), #222 2%)) {
+        background: color-mix(in srgb, var(--tui-base-01), #222 2%);
+    }
+}
diff --git a/projects/addon-doc/components/code/code.template.html b/projects/addon-doc/components/code/code.template.html
@@ -10,15 +10,16 @@
 >
     <code [lineNumbers]="true" [highlight]="content"></code>
     <div class="t-code-actions">
-        <ng-content></ng-content>
         <button
             tuiIconButton
             appearance="icon"
             size="xs"
+            class="t-copy-button"
             [icon]="(icon$ | async) || 'tuiIconCopyLarge'"
             [cdkCopyToClipboard]="content"
             (click)="copy$.next()"
         >
         </button>
+        <ng-content></ng-content>
     </div>
 </pre>
diff --git a/projects/addon-doc/components/code/tests/code.component.spec.ts b/projects/addon-doc/components/code/tests/code.component.spec.ts
@@ -57,9 +57,9 @@ describe(`TuiDocCodeComponent`, () => {
         expect(fixture.nativeElement.querySelector(`.t-code`)?.innerHTML.trim()).toEqual(
             `<code class="hljs"><span class="hljs-keyword">const</span> a = <span class="hljs-number">5</span>;</code>
     <div class="t-code-actions">
-\t
-        <button tuiiconbutton="" appearance="icon" size="xs">
+        <button tuiiconbutton="" appearance="icon" size="xs" class="t-copy-button">
         </button>
+\t
     </div>`.replace(`\t`, `        `), // prettier problem
         );
     });
@@ -73,9 +73,9 @@ describe(`TuiDocCodeComponent`, () => {
         expect(fixture.nativeElement.querySelector(`.t-code`)?.innerHTML.trim()).toEqual(
             `<code class="hljs"><span class="hljs-keyword">const</span> a = <span class="hljs-number">10</span>;</code>
     <div class="t-code-actions">
-\t
-        <button tuiiconbutton="" appearance="icon" size="xs">
+        <button tuiiconbutton="" appearance="icon" size="xs" class="t-copy-button">
         </button>
+\t
     </div>`.replace(`\t`, `        `), // prettier problem
         );
     });
@@ -91,9 +91,9 @@ describe(`TuiDocCodeComponent`, () => {
         expect(fixture.nativeElement.querySelector(`.t-code`)?.innerHTML.trim()).toEqual(
             `<code class="hljs"><span class="hljs-keyword">const</span> a = <span class="hljs-number">15</span>;</code>
     <div class="t-code-actions">
-\t
-        <button tuiiconbutton="" appearance="icon" size="xs">
+        <button tuiiconbutton="" appearance="icon" size="xs" class="t-copy-button">
         </button>
+\t
     </div>`.replace(`\t`, `        `), // prettier problem
         );
     });

diff --git a/projects/addon-doc/components/example/example.style.less b/projects/addon-doc/components/example/example.style.less
@@ -41,13 +41,13 @@
 
 .t-tabs-wrapper {
     display: flex;
-    padding: 0 0.125rem 0 2rem;
+    padding: 0 0.875rem 0 2rem;
     box-shadow: inset 0 -1px var(--tui-base-03);
     justify-content: space-between;
     align-items: center;
 
     :host-context(tui-root._mobile) & {
-        padding: 0 1rem;
+        padding: 0 0.875rem 0 1rem;
     }
 }
 

diff --git a/projects/demo/src/modules/app/stackblitz/starter/stackblitz-edit-button.component.less b/projects/demo/src/modules/app/stackblitz/starter/stackblitz-edit-button.component.less
@@ -0,0 +1,12 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+    @media @tui-mobile {
+        font-size: 0;
+    }
+
+    .t-content {
+        display: flex;
+        align-items: center;
+    }
+}
diff --git a/projects/demo/src/modules/app/stackblitz/starter/stackblitz-edit-button.component.ts b/projects/demo/src/modules/app/stackblitz/starter/stackblitz-edit-button.component.ts
@@ -4,15 +4,16 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
     selector: 'stackblitz-edit-button',
     template: `
         <button
-            appearance="flat"
-            icon="assets/icons/stackblitz.svg"
-            size="s"
-            tuiButton
+            tuiLink
             type="button"
         >
-            Edit
+            <span class="t-content">
+                <tui-svg src="assets/icons/stackblitz.svg"></tui-svg>
+                Edit
+            </span>
         </button>
     `,
+    styleUrls: ['./stackblitz-edit-button.component.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StackblitzEditButtonComponent {}
diff --git a/projects/demo/src/modules/app/stackblitz/starter/stackblitz-starter.module.ts b/projects/demo/src/modules/app/stackblitz/starter/stackblitz-starter.module.ts
@@ -1,14 +1,15 @@
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
-import {TuiButtonModule, TuiLoaderModule} from '@taiga-ui/core';
+import {TuiLinkModule, TuiLoaderModule, TuiSvgModule} from '@taiga-ui/core';
 
 import {StackblitzEditButtonComponent} from './stackblitz-edit-button.component';
 import {StackblitzStarterComponent} from './stackblitz-starter.component';
 
 @NgModule({
     imports: [
+        TuiSvgModule,
+        TuiLinkModule,
         TuiLoaderModule,
-        TuiButtonModule,
         RouterModule.forChild([{path: ``, component: StackblitzStarterComponent}]),
     ],
     declarations: [StackblitzStarterComponent, StackblitzEditButtonComponent],