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 index d475bb194..223dd6782 100644 --- 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 = 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 = ( event.target).parentNode; + const codeCopyAnimationTime = 1000; + const copyBlock = ( 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(); - ( event.target).classList.add('docs-markdown__code-icon_active'); + copyBlock.classList.add('docs-markdown-code-block_success'); + setTimeout(() => { - ( 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 index 41b25cdfb..a629508c0 100644 --- 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 index f07ecd818..c8036dbab 100644 --- 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 @@
- - - + + Скопировано + +
diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.scss b/packages/docs/src/app/shared/example-viewer/example-viewer.scss index 95524a0ae..39f05efd3 100644 --- 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 index 7823c03d9..6520a9652 100644 --- 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 index d28a56f76..56e3bffed 100644 --- 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 index 3562a3090..74dfe8fa4 100644 --- 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