fix(addon-doc): use code actions together (#5570)

taiga-family · Oct 9, 2023 · 9451225 · 9451225
1 parent a759118
commit 9451225
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 23 deletions.
diff --git a/projects/addon-doc/components/code/code.style.less b/projects/addon-doc/components/code/code.style.less
@@ -14,8 +14,8 @@
     margin: 0;
     white-space: normal;
 
-    &:hover .t-copy,
-    &:focus-visible .t-copy {
+    &:hover .t-code-actions,
+    &:focus-visible .t-code-actions {
         opacity: 1;
     }
 }
@@ -24,11 +24,14 @@
     margin-top: 1rem;
 }
 
-.t-copy {
+.t-code-actions {
     position: absolute;
     top: 0.875rem;
     right: 2rem;
+    display: flex;
     opacity: 0;
+    gap: 0.5rem;
+    flex-direction: row-reverse;
 }
 
 // highlightjs added class

diff --git a/projects/addon-doc/components/code/code.template.html b/projects/addon-doc/components/code/code.template.html
@@ -9,5 +9,8 @@
     class="t-code"
 >
     <code [lineNumbers]="true" [highlight]="content"></code>
-    <tui-doc-copy class="t-copy" [cdkCopyToClipboard]="content"></tui-doc-copy>
+    <div class="t-code-actions">
+        <tui-doc-copy class="t-copy" [cdkCopyToClipboard]="content"></tui-doc-copy>
+        <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
@@ -56,7 +56,10 @@ 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>
-    <tui-doc-copy class="t-copy"></tui-doc-copy>`,
+    <div class="t-code-actions">
+        <tui-doc-copy class="t-copy"></tui-doc-copy>
+\t
+    </div>`.replace(`\t`, `        `), // prettier problem
         );
     });
 
@@ -68,7 +71,10 @@ 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>
-    <tui-doc-copy class="t-copy"></tui-doc-copy>`,
+    <div class="t-code-actions">
+        <tui-doc-copy class="t-copy"></tui-doc-copy>
+\t
+    </div>`.replace(`\t`, `        `), // prettier problem
         );
     });
 
@@ -82,7 +88,10 @@ 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>
-    <tui-doc-copy class="t-copy"></tui-doc-copy>`,
+    <div class="t-code-actions">
+        <tui-doc-copy class="t-copy"></tui-doc-copy>
+\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
@@ -72,19 +72,6 @@
     }
 }
 
-.t-code-actions {
-    position: absolute;
-    top: 4.375rem;
-    right: 1rem;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-    & > * {
-        margin-left: 0.5rem;
-    }
-}
-
 .t-link-icon {
     margin-left: 0.3rem;
     vertical-align: baseline;

diff --git a/projects/addon-doc/components/example/example.template.html b/projects/addon-doc/components/example/example.template.html
@@ -111,12 +111,11 @@
     #codeSection
     let-code
 >
-    <section class="t-code-actions">
+    <tui-doc-code [code]="code">
         <ng-container *ngFor="let action of codeActions">
             <ng-container *polymorpheusOutlet="action as text; context: {$implicit: code}">
                 {{ text }}
             </ng-container>
         </ng-container>
-    </section>
-    <tui-doc-code [code]="code"></tui-doc-code>
+    </tui-doc-code>
 </ng-template>