feat: header menu align support #5256
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the WalkthroughThis pull request introduces a new feature for header menu alignment across multiple packages. A new type Changes
Sequence DiagramsequenceDiagram
participant User
participant PreferencesDrawer
participant HeaderComponent
participant MenuComponent
User->>PreferencesDrawer: Select menu alignment
PreferencesDrawer->>HeaderComponent: Update menuAlign preference
HeaderComponent->>MenuComponent: Apply alignment class
MenuComponent-->>HeaderComponent: Render with specified alignment
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/locales/src/langs/en-US/preferences.json (1)
141-145: LGTM with a minor suggestion for consistency.The translations for menu alignment options are clear and follow a logical order. However, consider capitalizing "Menu" in the
menuAligntranslation to match the capitalization pattern used in other preference labels (e.g., "Show Header", "Global Search").- "menuAlign": "Menu Align", + "menuAlign": "Menu Alignment",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (9)
packages/@core/base/typings/src/app.d.ts(2 hunks)packages/@core/preferences/src/config.ts(1 hunks)packages/@core/preferences/src/types.ts(2 hunks)packages/@core/ui-kit/menu-ui/src/components/menu.vue(2 hunks)packages/effects/layouts/src/basic/header/header.vue(2 hunks)packages/effects/layouts/src/widgets/preferences/blocks/layout/header.vue(3 hunks)packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue(3 hunks)packages/locales/src/langs/en-US/preferences.json(1 hunks)packages/locales/src/langs/zh-CN/preferences.json(1 hunks)
🔇 Additional comments (18)
packages/effects/layouts/src/widgets/preferences/blocks/layout/header.vue (5)
2-6: Nicely scoped import block.
The new type imports, especially LayoutHeaderMenuAlignType, are clearly defined and improve type safety.
12-12: Clean component reference.
The import of ToggleItem is straightforward and encourages reusable UI components.
18-19: Accurate usage of typed models.
Defining the headerMenuAlign model with the LayoutHeaderMenuAlignType ensures consistency and type safety for this feature.
40-53: Comprehensive options array.
Providing well-labeled menu alignment options (start, center, end) makes configuration intuitive and user-friendly.
67-73: Clear integration with ToggleItem.
Binding headerMenuAlign to this toggle control appropriately exposes the alignment setting. The disabling logic also aligns well with headerEnable.
packages/@core/base/typings/src/app.d.ts (2)
41-41: New alignment type looks solid.
Defining LayoutHeaderMenuAlignType with 'start' | 'center' | 'end' is a clear and concise approach that reflects all needed states.
99-99: Updated export block.
Exporting LayoutHeaderMenuAlignType ensures it can be easily consumed across various modules.
packages/@core/preferences/src/config.ts (1)
49-49: Logical default value.
Setting menuAlign: 'start' as the default is sensible. It aligns with typical LTR-based layouts while still allowing flexibility for customization.
packages/effects/layouts/src/basic/header/header.vue (2)
136-139: Effective dynamic class binding.
The choice to bind the class to preferences.header.menuAlign cleanly toggles alignment without complicating the template.
172-184: Maintainable alignment styles.
The dedicated SCSS blocks (.menu-align-start, .menu-align-center, .menu-align-end) organize alignment handling neatly and keep it readable.
packages/@core/preferences/src/types.ts (2)
8-8: Import looks good.
The new LayoutHeaderMenuAlignType import is consistent with the usage in this file.
108-109: Property addition is clear and well annotated.
The menuAlign property provides a straightforward way to customize the header menu alignment. No issues detected.
packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue (3)
7-7: Import and usage alignment.
The imported LayoutHeaderMenuAlignType is used consistently across the new model definitions in this file, matching the overall design for alignment handling.
98-99: Model naming and usage.
Defining the model as headerMenuAlign is clear and semantically aligned with its purpose. Ensure consistent usage in all header-related components.
323-323: Binding aligns well with the new model.
The v-model:header-menu-align="headerMenuAlign" properly exposes the alignment setting to the Header component. Looks good.
packages/@core/ui-kit/menu-ui/src/components/menu.vue (2)
335-335: Conditional class binding is correct.
Using is('menu-align', mode === 'horizontal') ensures the .is-menu-align class only applies when needed. This keeps the logic focused and prevents unwanted styling in vertical modes.
427-430: New CSS class approach is straightforward.
Defining .is-menu-align and then applying justify-content: var(--menu-align, start); provides a clear way of dynamically controlling alignment. No issues found.
packages/locales/src/langs/zh-CN/preferences.json (1)
141-145: Localization keys are well-formed.
The new entries for menu alignment (left, right, center) are consistent with the rest of the JSON structure. Good job maintaining clarity in the naming convention.
|
* feat: header menu align support * fix: typo
Description
在偏好中添加顶部菜单的对齐方式设置
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
Localization
Configuration
menuAlignproperty in default preferences