From 6258d1ad98a7c2aef5edb77444601700b7b84b7a Mon Sep 17 00:00:00 2001 From: splincode Date: Mon, 27 Dec 2021 16:54:19 +0300 Subject: [PATCH] feat(addon-doc): add fade in animation for tab content --- package-lock.json | 83 +++++++++++-------- package.json | 6 +- .../src/components/example/example.module.ts | 6 +- .../src/components/example/example.style.less | 16 ---- .../components/example/example.template.html | 26 ++---- .../src/components/main/main.component.ts | 9 +- .../src/components/main/main.style.less | 13 ++- .../tab-content/tab-content.component.ts | 19 +++++ .../tab-content/tab-content.module.ts | 13 +++ .../tab-content/tab-content.template.html | 17 ++++ .../tab-content/tab-content.template.less | 34 ++++++++ 11 files changed, 163 insertions(+), 79 deletions(-) create mode 100644 projects/addon-doc/src/components/tab-content/tab-content.component.ts create mode 100644 projects/addon-doc/src/components/tab-content/tab-content.module.ts create mode 100644 projects/addon-doc/src/components/tab-content/tab-content.template.html create mode 100644 projects/addon-doc/src/components/tab-content/tab-content.template.less diff --git a/package-lock.json b/package-lock.json index 8d04dc00d459f..01e8b15c72c00 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6675,9 +6675,9 @@ "dev": true }, "@types/marked": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@types/marked/-/marked-1.2.1.tgz", - "integrity": "sha512-d5adCgRHB+NAme23hkiTkvpfZUDqoNtL2Sr2nZBJqSj3zyHLxsfFWsGQ2sK2z9aX6L1xkJzon2c0jTPcsEjpaQ==" + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@types/marked/-/marked-2.0.5.tgz", + "integrity": "sha512-shRZ7XnYFD/8n8zSjKvFdto1QNSf4tONZIlNEZGrJe8GsOE8DL/hG1Hbl8gZlfLnjS7+f5tZGIaTgfpyW38h4w==" }, "@types/mime": { "version": "2.0.3", @@ -11087,7 +11087,8 @@ "commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true }, "common-tags": { "version": "1.8.0", @@ -14433,9 +14434,9 @@ "dev": true }, "emoji-toolkit": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/emoji-toolkit/-/emoji-toolkit-6.0.1.tgz", - "integrity": "sha512-QZZq0beHg753JxcBt89UBFqzwYNuMtXhNO+jY3viSAndewmn9biTE5glaro1RA0uWJ4hKqw4k1Mboe1M6sGkMA==" + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/emoji-toolkit/-/emoji-toolkit-6.6.0.tgz", + "integrity": "sha512-pEu0kow2p1N8zCKnn/L6H0F3rWUBB3P3hVjr/O5yl1fK7N9jU4vO4G7EFapC5Y3XwZLUCY0FZbOPyTkH+4V2eQ==" }, "emojis-list": { "version": "3.0.0", @@ -18411,9 +18412,9 @@ "dev": true }, "highlight.js": { - "version": "10.4.1", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.4.1.tgz", - "integrity": "sha512-yR5lWvNz7c85OhVAEAeFhVCc/GV4C30Fjzc/rCP0aCWzc1UUOPUk55dK/qdwTZHBvMZo+eZ2jpk62ndX/xMFlg==" + "version": "11.3.1", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.3.1.tgz", + "integrity": "sha512-PUhCRnPjLtiLHZAQ5A/Dt5F8cWZeMyj9KRsACsWT+OD6OP0x6dp5OmT5jdx0JgEyPxPZZIPQpRN2TciUT7occw==" }, "highlightjs-line-numbers.js": { "version": "2.8.0", @@ -22714,11 +22715,18 @@ } }, "katex": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/katex/-/katex-0.12.0.tgz", - "integrity": "sha512-y+8btoc/CK70XqcHqjxiGWBOeIL8upbS0peTPXTvgrh21n1RiWWcIpSWM+4uXq+IAgNh9YYQWdc7LVDPDAEEAg==", + "version": "0.13.24", + "resolved": "https://registry.npmjs.org/katex/-/katex-0.13.24.tgz", + "integrity": "sha512-jZxYuKCma3VS5UuxOx/rFV1QyGSl3Uy/i0kTJF3HgQ5xMinCQVF8Zd4bMY/9aI9b9A2pjIBOsjSSm68ykTAr8w==", "requires": { - "commander": "^2.19.0" + "commander": "^8.0.0" + }, + "dependencies": { + "commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==" + } } }, "keyv": { @@ -24104,9 +24112,9 @@ } }, "marked": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.5.tgz", - "integrity": "sha512-2AlqgYnVPOc9WDyWu7S5DJaEZsfk6dNh/neatQ3IHUW4QLutM/VPSH9lG7bif+XjFWc9K9XR3QvR+fXuECmfdA==" + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz", + "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==" }, "marked-terminal": { "version": "3.3.0", @@ -25063,39 +25071,44 @@ } }, "ngx-highlightjs": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/ngx-highlightjs/-/ngx-highlightjs-4.1.3.tgz", - "integrity": "sha512-4pVQ4EXNDjIes7u93iX5Seyzg7dZXLdw6eAMLEQnYZ/2n1s8Wb9SHS3v2dCiO1VjpVFnfWsHzKwNxgzWbIinqg==", + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/ngx-highlightjs/-/ngx-highlightjs-4.1.4.tgz", + "integrity": "sha512-yh5p8J+mUNHMm5kQM1CAyRdLT2KiW631l/Rky+rkxwT6NZHG80yImWXZt7RG3heTQzd1wDOWMQ8JznF3KeUv5g==", "requires": { - "highlight.js": "*", - "highlightjs-line-numbers.js": "*", + "highlight.js": "^10.0.0", + "highlightjs-line-numbers.js": "^2.8.0", "tslib": "^2.0.0" }, "dependencies": { + "highlight.js": { + "version": "10.7.3", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", + "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==" + }, "tslib": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", - "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" } } }, "ngx-markdown": { - "version": "11.0.1", - "resolved": "https://registry.npmjs.org/ngx-markdown/-/ngx-markdown-11.0.1.tgz", - "integrity": "sha512-/abng+e19947ZAhEzFl7n1J+KZbrrO2O6gSUtyT3x5I5CHXQPZxZ0SawlZ2Yyu8UNjI75xmemU+7pArKyrOtOg==", + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/ngx-markdown/-/ngx-markdown-11.1.3.tgz", + "integrity": "sha512-z32q8l76ubrcP62L03mdvrizwueLBHV10LkT8MEDnFcjmY+8J1PytxFJ9EBTJpvc+CaPolgAoi7felN2XJZTSg==", "requires": { - "@types/marked": "^1.1.0", + "@types/marked": "^2.0.0", "emoji-toolkit": "^6.0.1", - "katex": "^0.12.0", - "marked": "^1.2.0", - "prismjs": "^1.22.0", + "katex": "^0.13.0", + "marked": "^2.0.0", + "prismjs": "^1.23.0", "tslib": "^2.0.0" }, "dependencies": { "tslib": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", - "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" } } }, diff --git a/package.json b/package.json index 3e2098417131c..b9c2c19ce56b9 100644 --- a/package.json +++ b/package.json @@ -94,9 +94,9 @@ "core-js": "^2.6.9", "dompurify": "^2.2.3", "express": "^4.15.2", - "highlight.js": "^10.4.1", - "ngx-highlightjs": "^4.1.3", - "ngx-markdown": "^11.0.1", + "highlight.js": "^11.3.1", + "ngx-highlightjs": "^4.1.4", + "ngx-markdown": "^11.1.3", "preboot": "^7.0.0", "rxjs": "~6.6.3", "tslib": "^1.10.0", diff --git a/projects/addon-doc/src/components/example/example.module.ts b/projects/addon-doc/src/components/example/example.module.ts index 7aa79fe82b510..1fc06b4b16803 100644 --- a/projects/addon-doc/src/components/example/example.module.ts +++ b/projects/addon-doc/src/components/example/example.module.ts @@ -1,23 +1,21 @@ -import {ClipboardModule} from '@angular/cdk/clipboard'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {TuiButtonModule} from '@taiga-ui/core'; import {TuiTabsModule} from '@taiga-ui/kit'; import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; -import {TuiDocCodeModule} from '../code/code.module'; import {TuiDocCopyModule} from '../copy/copy.module'; +import {TuiTabContentModule} from '../tab-content/tab-content.module'; import {TuiDocExampleComponent} from './example.component'; import {TuiDocExampleGetTabsPipe} from './example-get-tabs.pipe'; @NgModule({ imports: [ CommonModule, - ClipboardModule, TuiTabsModule, TuiButtonModule, TuiDocCopyModule, - TuiDocCodeModule, + TuiTabContentModule, PolymorpheusModule, ], declarations: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe], diff --git a/projects/addon-doc/src/components/example/example.style.less b/projects/addon-doc/src/components/example/example.style.less index a42120b06ee7d..8a7dab4b49d73 100644 --- a/projects/addon-doc/src/components/example/example.style.less +++ b/projects/addon-doc/src/components/example/example.style.less @@ -61,22 +61,6 @@ flex-grow: 1; } -.t-demo { - .customize-scroll(); - padding: 2rem; - overflow-x: auto; - - @media @mobile-m { - padding: 1rem; - } -} - -.t-copy-code { - position: absolute; - top: 4.375rem; - right: 1rem; -} - .t-link-icon { margin-left: 0.3rem; vertical-align: baseline; diff --git a/projects/addon-doc/src/components/example/example.template.html b/projects/addon-doc/src/components/example/example.template.html index 8f97a0d772b8f..0447379c2304b 100644 --- a/projects/addon-doc/src/components/example/example.template.html +++ b/projects/addon-doc/src/components/example/example.template.html @@ -42,27 +42,15 @@

- -
+ + -
- - - - - + diff --git a/projects/addon-doc/src/components/main/main.component.ts b/projects/addon-doc/src/components/main/main.component.ts index d7d4386058c48..c0cbe6465e684 100644 --- a/projects/addon-doc/src/components/main/main.component.ts +++ b/projects/addon-doc/src/components/main/main.component.ts @@ -1,4 +1,10 @@ -import {Component, forwardRef, Inject, ViewEncapsulation} from '@angular/core'; +import { + Component, + forwardRef, + HostBinding, + Inject, + ViewEncapsulation, +} from '@angular/core'; import {LOCAL_STORAGE, WINDOW} from '@ng-web-apis/common'; import {TuiSwipeService} from '@taiga-ui/cdk'; import {TuiBrightness, TuiModeDirective} from '@taiga-ui/core'; @@ -31,6 +37,7 @@ export class TuiDocMainComponent { @Inject(WINDOW) private readonly windowRef: Window, ) {} + @HostBinding('attr.data-mode') get mode(): TuiBrightness | null { return this.night ? 'onDark' : null; } diff --git a/projects/addon-doc/src/components/main/main.style.less b/projects/addon-doc/src/components/main/main.style.less index 53d85b95ab433..67227572f9bbf 100644 --- a/projects/addon-doc/src/components/main/main.style.less +++ b/projects/addon-doc/src/components/main/main.style.less @@ -107,6 +107,10 @@ label.night-mode { padding: 0.5em; color: var(--tui-text-01); background-color: var(--tui-clear-disabled); + + &.hljs-line-numbers { + background: transparent; + } } .hljs-subst, @@ -170,7 +174,14 @@ label.night-mode { .hljs-variable, .hljs-template-variable { - color: var(--tui-warning-fill); + color: var(--tui-link-hover); +} + +[data-mode='onDark'] { + .hljs-variable, + .hljs-template-variable { + color: var(--tui-warning-fill); + } } .hljs-addition { diff --git a/projects/addon-doc/src/components/tab-content/tab-content.component.ts b/projects/addon-doc/src/components/tab-content/tab-content.component.ts new file mode 100644 index 0000000000000..998b0b05626e8 --- /dev/null +++ b/projects/addon-doc/src/components/tab-content/tab-content.component.ts @@ -0,0 +1,19 @@ +import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core'; +import {TUI_IS_CYPRESS} from '@taiga-ui/cdk'; + +@Component({ + selector: 'tui-tab-content', + templateUrl: './tab-content.template.html', + styleUrls: ['./tab-content.template.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class TuiTabContentComponent { + @Input() isActiveTab: boolean = false; + @Input() code?: string; + + constructor(@Inject(TUI_IS_CYPRESS) private readonly isCypress: boolean) {} + + get useAnimation() { + return !this.isCypress && !this.isActiveTab; + } +} diff --git a/projects/addon-doc/src/components/tab-content/tab-content.module.ts b/projects/addon-doc/src/components/tab-content/tab-content.module.ts new file mode 100644 index 0000000000000..f906d500511a9 --- /dev/null +++ b/projects/addon-doc/src/components/tab-content/tab-content.module.ts @@ -0,0 +1,13 @@ +import {ClipboardModule} from '@angular/cdk/clipboard'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {TuiDocCodeModule, TuiDocCopyModule} from '@taiga-ui/addon-doc'; + +import {TuiTabContentComponent} from './tab-content.component'; + +@NgModule({ + imports: [CommonModule, TuiDocCodeModule, TuiDocCopyModule, ClipboardModule], + declarations: [TuiTabContentComponent], + exports: [TuiTabContentComponent], +}) +export class TuiTabContentModule {} diff --git a/projects/addon-doc/src/components/tab-content/tab-content.template.html b/projects/addon-doc/src/components/tab-content/tab-content.template.html new file mode 100644 index 0000000000000..016de34ac30f1 --- /dev/null +++ b/projects/addon-doc/src/components/tab-content/tab-content.template.html @@ -0,0 +1,17 @@ +
+
+ +
+ + + + + +
diff --git a/projects/addon-doc/src/components/tab-content/tab-content.template.less b/projects/addon-doc/src/components/tab-content/tab-content.template.less new file mode 100644 index 0000000000000..39b0578db2eb1 --- /dev/null +++ b/projects/addon-doc/src/components/tab-content/tab-content.template.less @@ -0,0 +1,34 @@ +@import 'taiga-ui-local'; + +@keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +.t-use-fade-animate { + will-change: opacity; + animation: fadeIn ease-in 500ms; + animation-fill-mode: forwards; + animation-iteration-count: 1; +} + +.t-demo { + .customize-scroll(); + padding: 2rem; + overflow-x: auto; + + @media @mobile-m { + padding: 1rem; + } +} + +.t-copy-code { + position: absolute; + top: 4.375rem; + right: 1rem; +}