feat(startup): add dialog layout and content components#598
Conversation
9169227 to
5d991c2
Compare
There was a problem hiding this comment.
Code Review
This pull request replaces the angular-split layout with GoldenLayout and introduces a new startup dialog with several sub-components for managing inspection activities. Feedback includes fixing a potential memory leak in LayoutService by preventing multiple initializations, removing manual license headers to comply with the repository style guide, and using standard Material icon names. Additionally, it is recommended to use flexible grid units instead of hardcoded heights in the startup dialog styles.
I am having trouble creating individual review comments. Click here to see my feedback.
web/src/app/services/layout/layout.service.ts (78-91)
The init method does not check if the GoldenLayout instance or ResizeObserver have already been initialized. If init is called multiple times (e.g., during component re-initialization), it will create new instances without cleaning up the old ones, leading to memory leaks and multiple observers on the same element.
public init(hostElement: HTMLElement, vcr: ViewContainerRef) {
if (this.goldenLayout) {
this.ngOnDestroy();
}
this.viewContainerRef = vcr;
this.goldenLayout = new GoldenLayout(hostElement);
this.registerComponents();
this.resizeObserver = new ResizeObserver(() => {
this.goldenLayout.setSize(
hostElement.clientWidth,
hostElement.clientHeight,
);
});
this.resizeObserver.observe(hostElement);
}web/src/app/dialogs/startup/components/inspection-list-item.component.ts (1-15)
The repository style guide explicitly states that license headers are automatically added by a commit hook and should not be added manually. Please remove the license header from this and all other new files in this pull request.
References
- License headers are automatically added by commit hook. Do not add license header. (link)
web/src/app/services/layout/layout.service.ts (115)
The icon name cards_stack does not appear to be a standard Material Symbol. This may result in the icon not being displayed correctly. Please verify the icon name or use a standard one like layers.
this.addIconToTab(container, 'layers');
web/src/app/services/layout/layout.service.ts (126)
The icon name deployed_code_history does not appear to be a standard Material Symbol. This may result in the icon not being displayed correctly. Please verify the icon name or use a standard one like history.
this.addIconToTab(container, 'history');
web/src/app/dialogs/startup/components/startup-dialog-layout.component.scss (24)
Hardcoding the row height to 600px in the grid template makes the layout inflexible and may conflict with the height: 100% set on the container. Using 1fr would allow the content area to dynamically fill the available space within the dialog.
"sidebar content" 1fr
ac55ae6 to
0c788c0
Compare
ダイアログ全体のレイアウトとコンテンツエリアの完成形。
0c788c0 to
5f59bcd
Compare
5f59bcd to
9c9563a
Compare
38fd886
Motivation
To assemble the UI components created in previous PRs (Side Menu #596 and Inspection List #597) into a complete dialog layout. This PR depends on the components introduced in PR #596 and PR #597.
Changes
StartupDialogLayoutComponentandStartupDialogContentComponent.動機
前のPRで作成したUIコンポーネント(サイドメニュー #596 とインスペクションリスト #597)を、完全なダイアログレイアウトに組み立てます。このPRは、PR #596 と PR #597 で導入されたコンポーネントに依存しています。
変更内容
StartupDialogLayoutComponentとStartupDialogContentComponentを追加しました。