feat(docs): restyling code copy icon (#312)

Bringing code copy icon in example viewer and markdown to the same view. Tooltip isn't used anymore.
positive-js · Oct 21, 2019 · db74d1f · db74d1f
1 parent ab23035
commit db74d1f
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 44 deletions.
diff --git a/packages/docs/src/app/components/component-viewer/component-viewer.component.ts b/packages/docs/src/app/components/component-viewer/component-viewer.component.ts
@@ -108,28 +108,49 @@ export class ComponentOverviewComponent implements OnDestroy {
         const codeBlocks: NodeListOf<Element> = document.querySelectorAll('.docs-markdown__pre .docs-markdown__code');
 
         codeBlocks.forEach((codeBlock) => {
+            // Creating copy code Block
+            const copyBlock = document.createElement('span');
+            copyBlock.className = 'docs-markdown-code-block';
+
+            // Creating copy success message
+            const copySuccessBlock = document.createElement('span');
+            copySuccessBlock.className = 'docs-markdown-code-block__copied';
+            copySuccessBlock.innerText = 'Скопировано';
+
+            const succeedIcon = document.createElement('i');
+            succeedIcon.className = 'mc mc-check_16';
+            copySuccessBlock.prepend(succeedIcon);
+
+            // Adding copy success message to copy code Block
+            copyBlock.appendChild(copySuccessBlock);
+
+            // Creating copy Icon
             const copyIcon = document.createElement('i');
             copyIcon.className = 'mc mc-copy_16 docs-markdown__code-icon';
             copyIcon.addEventListener('click', this.copyCode);
-            codeBlock.prepend(copyIcon);
+            // Adding copy Icon to copy code Block
+            copyBlock.appendChild(copyIcon);
+
+            codeBlock.prepend(copyBlock);
         });
     }
 
     copyCode(event: Event) {
-        const codeCopyAnimationTime = 200;
-        const code = (<HTMLElement> event.target).parentNode;
+        const codeCopyAnimationTime = 1000;
+        const copyBlock = (<HTMLElement> event.target).parentElement.parentElement;
 
         const range = document.createRange();
-        range.selectNodeContents(code);
+        range.selectNodeContents(copyBlock);
         const sel = window.getSelection();
         sel.removeAllRanges();
         sel.addRange(range);
         document.execCommand('copy');
         sel.removeAllRanges();
 
-        (<HTMLElement> event.target).classList.add('docs-markdown__code-icon_active');
+        copyBlock.classList.add('docs-markdown-code-block_success');
+
         setTimeout(() => {
-            (<HTMLElement> event.target).classList.remove('docs-markdown__code-icon_active');
+            copyBlock.classList.remove('docs-markdown-code-block_success');
         }, codeCopyAnimationTime);
     }
 

diff --git a/packages/docs/src/app/shared/example-viewer/_example-viewer-theme.scss b/packages/docs/src/app/shared/example-viewer/_example-viewer-theme.scss
@@ -18,7 +18,7 @@
         padding: 16px;
     }
 
-    .docs-example-source_copy {
+    .code-copy__icon {
         color: $color;
 
         &:hover { color: $color_hover; }

diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.html b/packages/docs/src/app/shared/example-viewer/example-viewer.html
@@ -8,16 +8,10 @@
     <div *ngIf="exampleData; else lostExample" [class.docs-example-viewer__source]="true"
          [class.docs-example-viewer__source_hidden]="!(isSourceShown || isSwitcherHidden)">
         <stackblitz-button [example]="example"></stackblitz-button>
-        <span class="docs-example-source_copy">
-                            <i class="mc mc-copy_16"
-                               (click)="copyCode($event)"
-                               #tooltip="mcTooltip"
-                               mcTooltip
-                               mcTitle="Содержимое скопировано в буфер обмена"
-                               mcTrigger="manual"
-                               mcMouseEnterDelay = "20"
-                               mcPlacement="bottom"></i>
-         </span>
+        <span class="docs-example-source-copy">
+            <span class="code-copy__copied"><i class="mc mc-check_16"></i> Скопировано</span>
+            <i class="code-copy__icon mc mc-copy_16" (click)="copyCode($event)"></i>
+        </span>
         <mc-tab-group mc-light-tabs (selectedTabChange)="setLineNumbers()">
             <mc-tab *ngFor="let tabName of getExampleTabNames()" [label]="tabName">
                 <div class="docs-example-source-wrapper">

diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.scss b/packages/docs/src/app/shared/example-viewer/example-viewer.scss
@@ -12,13 +12,28 @@
     display: none;
 }
 
-.docs-example-source_copy {
+.docs-example-source-copy {
     display: flex;
     position: absolute;
     top: 40px;
     right: 0;
     z-index: 10;
     padding: 6px 6px;
+
+    .code-copy__copied {
+        display: none;
+        font-size: 14px;
+    }
+
+    &_success {
+        .code-copy__copied {
+            display: block;
+        }
+
+        .code-copy__icon {
+            display: none;
+        }
+    }
 }
 
 .docs-example-viewer-title {
@@ -33,12 +48,6 @@
     flex: 1 1 auto;
 }
 
-.docs-example-source-copy {
-    position: absolute;
-    top: 8px;
-    display: none;
-}
-
 .docs-example-source-wrapper {
     min-height: 201px;
     display: flex;

diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.ts b/packages/docs/src/app/shared/example-viewer/example-viewer.ts
@@ -1,7 +1,6 @@
 import { ComponentPortal } from '@angular/cdk/portal';
-import { Component, ElementRef, Inject, Input, ViewChild } from '@angular/core';
+import { Component, ElementRef, Inject, Input } from '@angular/core';
 import { EXAMPLE_COMPONENTS, LiveExample } from '@ptsecurity/mosaic-examples';
-import { McTooltip } from '@ptsecurity/mosaic/tooltip';
 
 import { CopierService } from '../copier/copier.service';
 
@@ -31,7 +30,10 @@ export class ExampleViewer {
     shadowHide = 'hljs-shadow_hidden';
     maxEditorLength = 15;
     lineNumbers = '';
-    mcTooltipDelay = 3000;
+    codeCopyDelay = 1000;
+
+    codeCopySuccessClass: string = 'docs-example-source-copy_success';
+
     /** String key of the currently displayed example. */
     @Input()
     get example() {
@@ -52,7 +54,6 @@ export class ExampleViewer {
 
     private _example: string;
 
-    @ViewChild('tooltip', { static: false }) tooltip: McTooltip;
     constructor(private copier: CopierService,
                 @Inject(ElementRef) elementRef: ElementRef) {
         this.elementRef = elementRef;
@@ -95,11 +96,10 @@ export class ExampleViewer {
         sel.addRange(range);
         document.execCommand('copy');
         sel.removeAllRanges();
-
-        this.tooltip.show();
+        event.target.parentNode.classList.add(this.codeCopySuccessClass);
         setTimeout(() => {
-            this.tooltip.hide();
-        }, this.mcTooltipDelay);
+            event.target.parentNode.classList.remove(this.codeCopySuccessClass);
+        }, this.codeCopyDelay);
     }
 
     private resolveHighlightedExampleFile(fileName: string) {

diff --git a/packages/docs/src/highlightjs/material-dark.scss b/packages/docs/src/highlightjs/material-dark.scss
@@ -6,6 +6,10 @@
         display: block;
         overflow-x: auto;
         padding: 0.5em;
+    }
+
+    .hljs,
+    .docs-example-source-copy {
         background: #2b2b2b;
         color: #bababa;
     }

diff --git a/packages/docs/src/highlightjs/material-light.scss b/packages/docs/src/highlightjs/material-light.scss
@@ -6,6 +6,10 @@ Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmai
     display: block;
     overflow-x: auto;
     padding: 0.5em;
+}
+
+.hljs,
+.docs-example-source-copy {
     background: #fdf6e3;
     color: #657b83;
 }

diff --git a/packages/docs/src/styles/_markdown.scss b/packages/docs/src/styles/_markdown.scss
@@ -7,7 +7,7 @@
         padding-top: 8px;
     }
 
-    &__img{
+    &__img {
         display: flex;
         max-width: 100%;
         padding-bottom: 4px;
@@ -79,23 +79,28 @@
         padding: 12px;
     }
 
-    &__code-icon {
+    &-code-block {
         display: flex;
         position: absolute;
         top: 0;
         right: 0;
         z-index: 10;
         padding: 6px 6px;
-        -webkit-transition: -webkit-transform 0.1s;
-        -moz-transition: -moz-transform 0.1s;
-        transition: transform 0.1s;
-    }
 
-    &__code-icon_active {
-        -webkit-transform: scale(0.93);
-        -moz-transform: scale(0.93);
-        -ms-transform: scale(0.93);
-        transform: scale(0.93);
+        &__copied {
+            display: none;
+            font-size: 14px;
+        }
+
+        &_success {
+            .docs-markdown-code-block__copied {
+                display: block;
+            }
+
+            .docs-markdown__code-icon {
+                display: none;
+            }
+        }
     }
 }
 
@@ -128,7 +133,8 @@
         color: $text;
     }
 
-    .docs-markdown__pre .docs-markdown__code {
+    .docs-markdown__pre .docs-markdown__code,
+    .docs-markdown-code-block {
         //colors from solarized and Darcula color schemes
         background:  if($is-dark, #2b2b2b, #fdf6e3);
         color: if($is-dark, #bababa, #657b83);