From dfbde237bbcb2831f833ad4b97f4d4b3e163b956 Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Tue, 25 Jun 2024 21:27:17 +0800 Subject: [PATCH] refactor(core): `Root` use `Platform` directive (#7931) --- .../addon-mobile/styles/common/button.less | 9 +++++++-- .../directives/platform/platform.directive.ts | 8 ++++---- .../calendar/calendar-sheet.style.less | 8 ++++++++ .../core/components/root/root.component.ts | 20 +++++++------------ projects/core/styles/taiga-ui-theme.less | 2 +- projects/core/styles/theme/appearance.less | 3 ++- projects/core/styles/theme/calendar.less | 7 ------- projects/demo/src/modules/app/app.config.ts | 6 +++++- .../components/card-large/examples/1/index.ts | 12 +++++++++-- 9 files changed, 44 insertions(+), 31 deletions(-) delete mode 100644 projects/core/styles/theme/calendar.less diff --git a/projects/addon-mobile/styles/common/button.less b/projects/addon-mobile/styles/common/button.less index d70c01cd8d58..22e0ee0b84f9 100644 --- a/projects/addon-mobile/styles/common/button.less +++ b/projects/addon-mobile/styles/common/button.less @@ -1,4 +1,4 @@ -[tuiButton] { +[tuiCardLarge] [tuiButton] { width: 100%; } @@ -14,7 +14,12 @@ --t-radius: 0.75rem; } - &:disabled:not(._loading) { + &[data-appearance='primary']:disabled:not(._loading), + &[data-appearance='secondary']:disabled:not(._loading), + &[data-appearance='accent']:disabled:not(._loading), + &[data-appearance='destructive']:disabled:not(._loading), + &[data-appearance='opposite']:disabled:not(._loading), + &[data-appearance='flat']:disabled:not(._loading) { background: var(--tui-background-neutral-1); color: var(--tui-background-neutral-1-pressed); opacity: 1; diff --git a/projects/cdk/directives/platform/platform.directive.ts b/projects/cdk/directives/platform/platform.directive.ts index 8304dc2849cc..f42f518a65c4 100644 --- a/projects/cdk/directives/platform/platform.directive.ts +++ b/projects/cdk/directives/platform/platform.directive.ts @@ -7,14 +7,14 @@ import {TUI_PLATFORM} from '@taiga-ui/cdk/tokens'; providers: [ { provide: TUI_PLATFORM, - deps: [TuiPlatform], - useFactory: ({tuiPlatform}: TuiPlatform) => - tuiPlatform || inject(TUI_PLATFORM, {skipSelf: true}), + useFactory: () => inject(TuiPlatform).tuiPlatform, }, ], }) export class TuiPlatform { @Input() @HostBinding('attr.data-platform') - public tuiPlatform: '' | 'android' | 'ios' | 'web' = ''; + public tuiPlatform: 'android' | 'ios' | 'web' = inject(TUI_PLATFORM, { + skipSelf: true, + }); } diff --git a/projects/core/components/calendar/calendar-sheet.style.less b/projects/core/components/calendar/calendar-sheet.style.less index c924b752e38b..3b36bf474752 100644 --- a/projects/core/components/calendar/calendar-sheet.style.less +++ b/projects/core/components/calendar/calendar-sheet.style.less @@ -8,6 +8,14 @@ width: @itemSize * 7; } +[data-type='weekday'] { + color: var(--tui-text-primary); +} + +[data-type='weekend'] { + color: var(--tui-status-negative); +} + .t-row { justify-content: flex-start; diff --git a/projects/core/components/root/root.component.ts b/projects/core/components/root/root.component.ts index 84ef30b859b1..4035a3713c8e 100644 --- a/projects/core/components/root/root.component.ts +++ b/projects/core/components/root/root.component.ts @@ -8,8 +8,9 @@ import { } from '@angular/core'; import {toSignal} from '@angular/core/rxjs-interop'; import {TUI_VERSION} from '@taiga-ui/cdk/constants'; +import {TuiPlatform} from '@taiga-ui/cdk/directives/platform'; import {tuiWatch} from '@taiga-ui/cdk/observables'; -import {TUI_IS_ANDROID, TUI_IS_IOS, TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens'; +import {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens'; import {TuiAlerts} from '@taiga-ui/core/components/alert'; import {TUI_DIALOGS, TuiDialogs} from '@taiga-ui/core/components/dialog'; import {TuiScrollControls} from '@taiga-ui/core/components/scrollbar'; @@ -38,11 +39,10 @@ import {debounceTime, map, of} from 'rxjs'; encapsulation: ViewEncapsulation.None, // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection changeDetection: ChangeDetectionStrategy.Default, + hostDirectives: [TuiPlatform], host: { 'data-tui-version': TUI_VERSION, '[style.--tui-duration.ms]': 'duration', - '[class._ios]': 'isIOS', - '[class._android]': 'isAndroid', '[class._reduced-motion]': 'reducedMotion', '[class._mobile]': 'isMobileRes()', // Required for the :active state to work in Safari. https://stackoverflow.com/a/33681490 @@ -50,26 +50,20 @@ import {debounceTime, map, of} from 'rxjs'; }, }) export class TuiRoot { - private readonly dialogs$ = inject>(TUI_DIALOGS); - private readonly isMobile = inject(TUI_IS_MOBILE); - private readonly breakpoint = inject(TuiBreakpointService); - - protected readonly isIOS = inject(TUI_IS_IOS); - protected readonly isAndroid = inject(TUI_IS_ANDROID); protected readonly reducedMotion = inject(TUI_REDUCED_MOTION); protected readonly duration = tuiGetDuration(inject(TUI_ANIMATIONS_SPEED)); protected readonly isMobileRes = toSignal( - this.breakpoint.pipe( + inject(TuiBreakpointService).pipe( map(breakpoint => breakpoint === 'mobile'), tuiWatch(inject(ChangeDetectorRef)), ), ); - protected readonly scrollbars$: Observable = this.isMobile + protected readonly scrollbars$: Observable = inject(TUI_IS_MOBILE) ? of(false) - : this.dialogs$.pipe( - map(dialogs => !dialogs.length), + : inject>(TUI_DIALOGS).pipe( + map(({length}) => !length), debounceTime(0), ); diff --git a/projects/core/styles/taiga-ui-theme.less b/projects/core/styles/taiga-ui-theme.less index 500b5bf5fab1..cfcb2a902e97 100644 --- a/projects/core/styles/taiga-ui-theme.less +++ b/projects/core/styles/taiga-ui-theme.less @@ -1,3 +1,3 @@ @import 'theme/variables.less'; @import 'theme/appearance.less'; -@import 'theme/calendar.less'; +@import 'theme/appearance/textfield.less'; diff --git a/projects/core/styles/theme/appearance.less b/projects/core/styles/theme/appearance.less index a363403ac8a6..27091399d3f2 100644 --- a/projects/core/styles/theme/appearance.less +++ b/projects/core/styles/theme/appearance.less @@ -9,4 +9,5 @@ @import 'appearance/primary.less'; @import 'appearance/secondary.less'; @import 'appearance/status.less'; -@import 'appearance/textfield.less'; +// Do not add it, we need it separately in proprietary theme +// @import 'appearance/textfield.less'; diff --git a/projects/core/styles/theme/calendar.less b/projects/core/styles/theme/calendar.less deleted file mode 100644 index 6f747c448c85..000000000000 --- a/projects/core/styles/theme/calendar.less +++ /dev/null @@ -1,7 +0,0 @@ -tui-calendar-sheet [data-type='weekday'] { - color: var(--tui-text-primary); -} - -tui-calendar-sheet [data-type='weekend'] { - color: var(--tui-status-negative); -} diff --git a/projects/demo/src/modules/app/app.config.ts b/projects/demo/src/modules/app/app.config.ts index 0e4960716cc2..a0fbf1dca25f 100644 --- a/projects/demo/src/modules/app/app.config.ts +++ b/projects/demo/src/modules/app/app.config.ts @@ -22,7 +22,7 @@ import { type TuiDocSourceCodePathOptions, tuiSortPages, } from '@taiga-ui/addon-doc'; -import {TUI_BASE_HREF, TUI_IS_E2E, TUI_IS_PLAYWRIGHT} from '@taiga-ui/cdk'; +import {TUI_BASE_HREF, TUI_IS_E2E, TUI_IS_PLAYWRIGHT, TUI_PLATFORM} from '@taiga-ui/cdk'; import { TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, @@ -57,6 +57,10 @@ export const config: ApplicationConfig = { ), NG_EVENT_PLUGINS, Title, + { + provide: TUI_PLATFORM, + useValue: 'web', + }, { provide: TUI_IS_PLAYWRIGHT, useFactory: () => Boolean(inject(SESSION_STORAGE).getItem('playwright')), diff --git a/projects/demo/src/modules/components/card-large/examples/1/index.ts b/projects/demo/src/modules/components/card-large/examples/1/index.ts index a8b05a9f2893..d623918e8d5a 100644 --- a/projects/demo/src/modules/components/card-large/examples/1/index.ts +++ b/projects/demo/src/modules/components/card-large/examples/1/index.ts @@ -2,12 +2,20 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiPlatform} from '@taiga-ui/cdk'; -import {TuiButton, TuiLink, TuiSurface} from '@taiga-ui/core'; +import {TuiButton, TuiLink, TuiSurface, TuiTitle} from '@taiga-ui/core'; import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout'; @Component({ standalone: true, - imports: [TuiCardLarge, TuiSurface, TuiButton, TuiLink, TuiPlatform, TuiHeader], + imports: [ + TuiCardLarge, + TuiSurface, + TuiButton, + TuiLink, + TuiPlatform, + TuiHeader, + TuiTitle, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation,