From 43c0b6d43d13162569af388261e66fe3c7bb2306 Mon Sep 17 00:00:00 2001 From: Tangent Chang Date: Fri, 17 May 2024 00:37:30 +0800 Subject: [PATCH] refactor: import standalone dependencies --- .../combo-counter/combo-counter.component.ts | 3 +- ...-layout-setting-panel-content.component.ts | 17 ++---- .../hotkey-dialog/hotkey-dialog.component.ts | 2 - .../key-side-dropdown.component.ts | 5 +- ...ghlight-setting-panel-content.component.ts | 3 +- src/app/components/layout/layout.component.ts | 8 +-- .../seven-segment/seven-segment.component.ts | 2 - .../sides-dropdown.component.ts | 5 +- .../speedometer/speedometer.component.ts | 3 +- .../switch-sector/switch-sector.component.ts | 7 +-- src/app/components/switch/switch.component.ts | 8 +-- ...ibility-setting-panel-content.component.ts | 5 +- src/app/nav/nav.component.ts | 59 +++++++++++-------- .../pages/home-page/home-page.component.ts | 2 - .../lesson-page/lesson-page.component.html | 1 + .../lesson-page/lesson-page.component.ts | 21 +++---- .../settings-page/settings-page.component.ts | 12 ++-- src/main.ts | 16 +---- 18 files changed, 82 insertions(+), 97 deletions(-) diff --git a/src/app/components/combo-counter/combo-counter.component.ts b/src/app/components/combo-counter/combo-counter.component.ts index 7646f13..5df757f 100644 --- a/src/app/components/combo-counter/combo-counter.component.ts +++ b/src/app/components/combo-counter/combo-counter.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -12,7 +11,7 @@ import { SevenSegmentComponent } from '../seven-segment/seven-segment.component' @Component({ selector: 'app-combo-counter', standalone: true, - imports: [CommonModule, SevenSegmentComponent], + imports: [SevenSegmentComponent], templateUrl: './combo-counter.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/app/components/device-layout-setting-panel-content/device-layout-setting-panel-content.component.ts b/src/app/components/device-layout-setting-panel-content/device-layout-setting-panel-content.component.ts index 425ac5b..83e202a 100644 --- a/src/app/components/device-layout-setting-panel-content/device-layout-setting-panel-content.component.ts +++ b/src/app/components/device-layout-setting-panel-content/device-layout-setting-panel-content.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -7,10 +6,10 @@ import { ViewChild, inject, } from '@angular/core'; -import { MatButtonModule } from '@angular/material/button'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatIconModule } from '@angular/material/icon'; -import { MatSelectModule } from '@angular/material/select'; +import { MatButton } from '@angular/material/button'; +import { MatFormField } from '@angular/material/form-field'; +import { MatIcon } from '@angular/material/icon'; +import { MatOption, MatSelect } from '@angular/material/select'; import { patchState } from '@ngrx/signals'; import { addEntity } from '@ngrx/signals/entities'; import { DeviceLayoutStore } from 'src/app/stores/device-layout.store'; @@ -18,13 +17,7 @@ import { DeviceLayoutStore } from 'src/app/stores/device-layout.store'; @Component({ selector: 'app-device-layout-setting-panel-content', standalone: true, - imports: [ - CommonModule, - MatSelectModule, - MatFormFieldModule, - MatButtonModule, - MatIconModule, - ], + imports: [MatSelect, MatOption, MatFormField, MatButton, MatIcon], templateUrl: './device-layout-setting-panel-content.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/app/components/hotkey-dialog/hotkey-dialog.component.ts b/src/app/components/hotkey-dialog/hotkey-dialog.component.ts index a0ebe51..7ca1aea 100644 --- a/src/app/components/hotkey-dialog/hotkey-dialog.component.ts +++ b/src/app/components/hotkey-dialog/hotkey-dialog.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component } from '@angular/core'; import { MatButton } from '@angular/material/button'; import { @@ -33,7 +32,6 @@ export const HOTKEY_GROUPS = [ selector: 'app-hotkey-dialog', standalone: true, imports: [ - CommonModule, MatDialogActions, MatDialogClose, MatDialogContent, diff --git a/src/app/components/key-side-dropdown/key-side-dropdown.component.ts b/src/app/components/key-side-dropdown/key-side-dropdown.component.ts index 0dcd420..a8857a8 100644 --- a/src/app/components/key-side-dropdown/key-side-dropdown.component.ts +++ b/src/app/components/key-side-dropdown/key-side-dropdown.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -6,13 +5,13 @@ import { Output, input, } from '@angular/core'; -import { MatSelectModule } from '@angular/material/select'; +import { MatOption, MatSelect } from '@angular/material/select'; import { PreferKeySide } from 'src/app/models/highlight-setting.models'; @Component({ selector: 'app-key-side-dropdown', standalone: true, - imports: [CommonModule, MatSelectModule], + imports: [MatSelect, MatOption], templateUrl: './key-side-dropdown.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/app/components/layout-highlight-setting-panel-content/layout-highlight-setting-panel-content.component.ts b/src/app/components/layout-highlight-setting-panel-content/layout-highlight-setting-panel-content.component.ts index 377ab9f..3e14463 100644 --- a/src/app/components/layout-highlight-setting-panel-content/layout-highlight-setting-panel-content.component.ts +++ b/src/app/components/layout-highlight-setting-panel-content/layout-highlight-setting-panel-content.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; import { HighlightSetting } from 'src/app/models/highlight-setting.models'; import { HighlightSettingStore } from 'src/app/stores/highlight-setting.store'; @@ -8,7 +7,7 @@ import { SidesDropdownComponent } from '../sides-dropdown/sides-dropdown.compone @Component({ selector: 'app-layout-highlight-setting-panel-content', standalone: true, - imports: [CommonModule, SidesDropdownComponent, KeySideDropdownComponent], + imports: [SidesDropdownComponent, KeySideDropdownComponent], templateUrl: './layout-highlight-setting-panel-content.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/app/components/layout/layout.component.ts b/src/app/components/layout/layout.component.ts index b79b53e..3284e32 100644 --- a/src/app/components/layout/layout.component.ts +++ b/src/app/components/layout/layout.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -23,7 +22,7 @@ const gridRows = 5; @Component({ selector: 'app-layout', standalone: true, - imports: [CommonModule, SwitchComponent, LetDirective, VisibleDirective], + imports: [SwitchComponent, LetDirective, VisibleDirective], templateUrl: './layout.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -31,8 +30,9 @@ export class LayoutComponent { public viewBoxWidth = cellSize * gridColumns + gap * (gridColumns - 1); public viewBoxHeight = cellSize * gridRows + gap * (gridRows - 1); readonly keyLabelMap = input>({}); - readonly highlightKeyCombination = - input(null); + readonly highlightKeyCombination = input( + null, + ); readonly highlightKeyCombinationInText = computed(() => { const highlightKeyCombination = this.highlightKeyCombination(); diff --git a/src/app/components/seven-segment/seven-segment.component.ts b/src/app/components/seven-segment/seven-segment.component.ts index c473e73..aea562d 100644 --- a/src/app/components/seven-segment/seven-segment.component.ts +++ b/src/app/components/seven-segment/seven-segment.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -10,7 +9,6 @@ import { @Component({ selector: 'app-seven-segment', standalone: true, - imports: [CommonModule], templateUrl: './seven-segment.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/app/components/sides-dropdown/sides-dropdown.component.ts b/src/app/components/sides-dropdown/sides-dropdown.component.ts index 6de27f0..c718d7b 100644 --- a/src/app/components/sides-dropdown/sides-dropdown.component.ts +++ b/src/app/components/sides-dropdown/sides-dropdown.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -6,13 +5,13 @@ import { Output, input, } from '@angular/core'; -import { MatSelectModule } from '@angular/material/select'; +import { MatOption, MatSelect } from '@angular/material/select'; import { PreferSides } from '../../models/highlight-setting.models'; @Component({ selector: 'app-sides-dropdown', standalone: true, - imports: [CommonModule, MatSelectModule], + imports: [MatSelect, MatOption], templateUrl: './sides-dropdown.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/app/components/speedometer/speedometer.component.ts b/src/app/components/speedometer/speedometer.component.ts index a36f5d4..ef9ce02 100644 --- a/src/app/components/speedometer/speedometer.component.ts +++ b/src/app/components/speedometer/speedometer.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -24,7 +23,7 @@ const maxDiffPerFrame = 2; @Component({ selector: 'app-speedometer', standalone: true, - imports: [CommonModule, SevenSegmentComponent], + imports: [SevenSegmentComponent], templateUrl: './speedometer.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/app/components/switch-sector/switch-sector.component.ts b/src/app/components/switch-sector/switch-sector.component.ts index 2da9c17..616927e 100644 --- a/src/app/components/switch-sector/switch-sector.component.ts +++ b/src/app/components/switch-sector/switch-sector.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -20,7 +19,6 @@ const alpha2 = (Math.asin(((o / 2) * Math.SQRT2) / r2) / Math.PI) * 180; @Component({ selector: '[appSwitchSector]', standalone: true, - imports: [CommonModule], templateUrl: './switch-sector.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -30,8 +28,9 @@ export class SwitchSectorComponent { readonly degree = input.required(); readonly positionCode = input.required(); readonly keyLabel = input([]); - readonly highlightKeyCombination = - input(null); + readonly highlightKeyCombination = input( + null, + ); readonly sectorPath = computed(() => { const center = this.center(); diff --git a/src/app/components/switch/switch.component.ts b/src/app/components/switch/switch.component.ts index 5f0872d..5b4d0ea 100644 --- a/src/app/components/switch/switch.component.ts +++ b/src/app/components/switch/switch.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -15,7 +14,7 @@ import { SwitchSectorComponent } from '../switch-sector/switch-sector.component' @Component({ selector: '[appSwitch]', standalone: true, - imports: [CommonModule, SwitchSectorComponent], + imports: [SwitchSectorComponent], templateUrl: './switch.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -31,8 +30,9 @@ export class SwitchComponent { ]; readonly positionCodeMap = input.required>(); readonly keyLabelMap = input>({}); - readonly highlightKeyCombination = - input(null); + readonly highlightKeyCombination = input( + null, + ); readonly r = computed(() => { return (this.rotationDirection() === 'cw' ? 1 : -1) * this.rotation(); }); diff --git a/src/app/components/visibility-setting-panel-content/visibility-setting-panel-content.component.ts b/src/app/components/visibility-setting-panel-content/visibility-setting-panel-content.component.ts index e27e76b..184b80c 100644 --- a/src/app/components/visibility-setting-panel-content/visibility-setting-panel-content.component.ts +++ b/src/app/components/visibility-setting-panel-content/visibility-setting-panel-content.component.ts @@ -1,11 +1,10 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, computed, inject, } from '@angular/core'; -import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatCheckbox } from '@angular/material/checkbox'; import { VisibilitySetting } from 'src/app/models/visibility-setting.models'; import { VisibilitySettingStore } from 'src/app/stores/visibility-setting.store'; @@ -22,7 +21,7 @@ const VISIBILITY_SETTING_ITEMS: { @Component({ selector: 'app-visibility-setting-panel-content', standalone: true, - imports: [CommonModule, MatCheckboxModule], + imports: [MatCheckbox], templateUrl: './visibility-setting-panel-content.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/app/nav/nav.component.ts b/src/app/nav/nav.component.ts index 09bf079..27d6e09 100644 --- a/src/app/nav/nav.component.ts +++ b/src/app/nav/nav.component.ts @@ -1,22 +1,30 @@ import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; -import { CommonModule } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; import { Component, ViewChild, computed, inject, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { MatButtonModule } from '@angular/material/button'; +import { MatIconButton } from '@angular/material/button'; import { MatDialog } from '@angular/material/dialog'; -import { MatDividerModule } from '@angular/material/divider'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatIconModule } from '@angular/material/icon'; -import { MatInputModule } from '@angular/material/input'; -import { MatListModule } from '@angular/material/list'; +import { MatDivider } from '@angular/material/divider'; +import { MatFormField, MatSuffix } from '@angular/material/form-field'; +import { MatIcon } from '@angular/material/icon'; +import { MatInput } from '@angular/material/input'; +import { + MatListItem, + MatListSubheaderCssMatStyler, + MatNavList, +} from '@angular/material/list'; import { MatSidenav, + MatSidenavContainer, MatSidenavContent, - MatSidenavModule, } from '@angular/material/sidenav'; -import { MatToolbarModule } from '@angular/material/toolbar'; -import { MatTooltipModule } from '@angular/material/tooltip'; -import { RouterModule } from '@angular/router'; +import { MatToolbar } from '@angular/material/toolbar'; +import { MatTooltip } from '@angular/material/tooltip'; +import { + RouterLinkActive, + RouterLinkWithHref, + RouterOutlet, +} from '@angular/router'; import * as fuzzy from 'fuzzy'; import { uniqBy } from 'ramda'; import { Observable } from 'rxjs'; @@ -29,20 +37,25 @@ import { LESSON_DATA_FOR_SEARCH, TOPICS } from '../data/topics'; templateUrl: './nav.component.html', standalone: true, imports: [ - CommonModule, + AsyncPipe, FormsModule, - MatButtonModule, - MatDividerModule, - MatFormFieldModule, - MatIconModule, - MatInputModule, - MatListModule, - MatListModule, + MatDivider, + MatFormField, + MatSuffix, + MatIcon, + MatIconButton, + MatInput, + MatListItem, + MatListSubheaderCssMatStyler, + MatNavList, + MatSidenav, + MatSidenavContainer, MatSidenavContent, - MatSidenavModule, - MatToolbarModule, - MatTooltipModule, - RouterModule, + MatToolbar, + MatTooltip, + RouterLinkActive, + RouterLinkWithHref, + RouterOutlet, ], }) export class NavComponent { diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts index 341c3ba..06b4584 100644 --- a/src/app/pages/home-page/home-page.component.ts +++ b/src/app/pages/home-page/home-page.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -17,7 +16,6 @@ import { pickRandomItem } from 'src/app/utils/random.utils'; selector: 'app-home-page', standalone: true, imports: [ - CommonModule, MatButton, MatIcon, RouterLink, diff --git a/src/app/pages/lesson-page/lesson-page.component.html b/src/app/pages/lesson-page/lesson-page.component.html index 30604ad..cb32f41 100644 --- a/src/app/pages/lesson-page/lesson-page.component.html +++ b/src/app/pages/lesson-page/lesson-page.component.html @@ -43,6 +43,7 @@ >