Add beeper-config controls #4557
Conversation
WalkthroughBulk "Enable All" and "Disable All" controls were added for both DShot and Analog beeper condition checkboxes in the configuration tab. This includes new localized strings, UI buttons, CSS styling, and JavaScript event handlers to toggle all relevant checkboxes at once, without modifying existing logic or data structures. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI (HTML/JS)
participant Checkbox Group
User->>UI (HTML/JS): Click "Enable All" or "Disable All" button
UI (HTML/JS)->>Checkbox Group: Set all checkboxes to checked/unchecked
UI (HTML/JS)->>Checkbox Group: Trigger change events for all checkboxes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested labels
Suggested reviewers
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
Documentation and Community
|
![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)
locales/en/messages.json (1)
1713-1718: Consider keepingconfiguration*keys in lexicographic order
Current insertion (configurationBeeperEnableAll,configurationBeeperDisableAll) precedesconfiguration3d, whereas ASCII ordering would place"configuration3d"before any"configurationB..."keys. If the surrounding block is normally sorted, swap the positions to maintain consistency.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
locales/en/messages.json(1 hunks)src/css/tabs/configuration.less(1 hunks)src/js/tabs/configuration.js(2 hunks)src/tabs/configuration.html(2 hunks)
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: mituritsyn
PR: betaflight/betaflight-configurator#4526
File: src/js/gui.js:43-43
Timestamp: 2025-06-20T12:35:49.283Z
Learning: In the Betaflight Configurator codebase, tabs in `defaultCloudBuildTabOptions` are conditionally displayed based on firmware build options. The logic in `serial_backend.js` checks `FC.CONFIG.buildOptions` and only adds tabs to `GUI.allowedTabs` if the firmware was built with support for that feature.
Learnt from: haslinghuis
PR: betaflight/betaflight-configurator#4532
File: src/js/VirtualFC.js:234-234
Timestamp: 2025-06-27T22:06:49.210Z
Learning: In the betaflight-configurator codebase, the VirtualFC.js AUX_CONFIG array must stay synchronized with the betaflight firmware's msp_box.c definitions to ensure proper auxiliary mode functionality. Changes to mode names should follow the firmware source code even if it potentially breaks backward compatibility with saved presets.
Learnt from: haslinghuis
PR: betaflight/betaflight-configurator#4532
File: src/js/VirtualFC.js:234-234
Timestamp: 2025-06-27T22:06:49.210Z
Learning: In the betaflight-configurator codebase, the VirtualFC.js AUX_CONFIG array must stay synchronized with the betaflight firmware's msp_box.c definitions to ensure proper auxiliary mode functionality. Changes to mode names should follow the firmware source code even if it potentially breaks backward compatibility with saved presets.
src/js/tabs/configuration.js (3)
Learnt from: mituritsyn
PR: #4526
File: src/js/gui.js:43-43
Timestamp: 2025-06-20T12:35:49.283Z
Learning: In the Betaflight Configurator codebase, tabs in defaultCloudBuildTabOptions are conditionally displayed based on firmware build options. The logic in serial_backend.js checks FC.CONFIG.buildOptions and only adds tabs to GUI.allowedTabs if the firmware was built with support for that feature.
Learnt from: haslinghuis
PR: #4532
File: src/js/VirtualFC.js:234-234
Timestamp: 2025-06-27T22:06:49.210Z
Learning: In the betaflight-configurator codebase, the VirtualFC.js AUX_CONFIG array must stay synchronized with the betaflight firmware's msp_box.c definitions to ensure proper auxiliary mode functionality. Changes to mode names should follow the firmware source code even if it potentially breaks backward compatibility with saved presets.
Learnt from: haslinghuis
PR: #4532
File: src/js/VirtualFC.js:234-234
Timestamp: 2025-06-27T22:06:49.210Z
Learning: In the betaflight-configurator codebase, the VirtualFC.js AUX_CONFIG array must stay synchronized with the betaflight firmware's msp_box.c definitions to ensure proper auxiliary mode functionality. Changes to mode names should follow the firmware source code even if it potentially breaks backward compatibility with saved presets.
locales/en/messages.json (1)
Learnt from: haslinghuis
PR: #4490
File: locales/en/messages.json:1534-1545
Timestamp: 2025-05-26T11:37:09.758Z
Learning: In the Betaflight Configurator repository, only English messages should be added directly to locales/en/messages.json; other language translations are handled via Crowdin automation and should not be manually updated in PRs.
src/tabs/configuration.html (4)
Learnt from: haslinghuis
PR: #4532
File: src/js/VirtualFC.js:234-234
Timestamp: 2025-06-27T22:06:49.210Z
Learning: In the betaflight-configurator codebase, the VirtualFC.js AUX_CONFIG array must stay synchronized with the betaflight firmware's msp_box.c definitions to ensure proper auxiliary mode functionality. Changes to mode names should follow the firmware source code even if it potentially breaks backward compatibility with saved presets.
Learnt from: haslinghuis
PR: #4532
File: src/js/VirtualFC.js:234-234
Timestamp: 2025-06-27T22:06:49.210Z
Learning: In the betaflight-configurator codebase, the VirtualFC.js AUX_CONFIG array must stay synchronized with the betaflight firmware's msp_box.c definitions to ensure proper auxiliary mode functionality. Changes to mode names should follow the firmware source code even if it potentially breaks backward compatibility with saved presets.
Learnt from: mituritsyn
PR: #4526
File: src/js/gui.js:43-43
Timestamp: 2025-06-20T12:35:49.283Z
Learning: In the Betaflight Configurator codebase, tabs in defaultCloudBuildTabOptions are conditionally displayed based on firmware build options. The logic in serial_backend.js checks FC.CONFIG.buildOptions and only adds tabs to GUI.allowedTabs if the firmware was built with support for that feature.
Learnt from: haslinghuis
PR: #4490
File: locales/en/messages.json:1534-1545
Timestamp: 2025-05-26T11:37:09.758Z
Learning: In the Betaflight Configurator repository, only English messages should be added directly to locales/en/messages.json; other language translations are handled via Crowdin automation and should not be manually updated in PRs.
🔇 Additional comments (6)
locales/en/messages.json (1)
1713-1718: Localization keys look correct and follow existing JSON style
Keys, values, trailing commas, and indentation all match the file’s prevailing conventions.src/css/tabs/configuration.less (1)
138-160: LGTM! Clean CSS implementation for beeper controls.The styling follows good CSS practices with proper flexbox layout, consistent button appearance, and appropriate interactive states. The scoping within
.tab-configurationensures the styles won't conflict with other components.src/tabs/configuration.html (2)
406-409: LGTM! Well-structured button group for DShot beeper controls.The HTML follows good semantic practices with proper button elements, type attributes, and CSS classes for both styling and JavaScript event binding.
426-429: LGTM! Consistent implementation for analog beeper controls.The button group maintains the same structure and pattern as the DShot beeper controls, ensuring UI consistency across the configuration tab.
src/js/tabs/configuration.js (2)
120-131: LGTM! Well-implemented DShot beeper toggle functionality.The event handlers properly scope to the DShot beeper section and trigger change events to ensure existing validation logic is executed. The implementation follows consistent patterns with the rest of the codebase.
659-670: LGTM! Consistent analog beeper toggle implementation.The handlers maintain the same pattern as the DShot beeper controls while properly scoping to the analog beeper section. Triggering change events ensures data consistency with existing logic.
src/css/tabs/configuration.less
Outdated
| padding: 0.15rem 0.5rem; | ||
| font-size: 10px; | ||
| border: 1px solid #ccc; | ||
| background: #f5f5f5; |
There was a problem hiding this comment.
Best to use the existing color variables instead of hard set colors - it looks off in dark mode the variables automatically switch between light and dark
--surface-50: hsl(0, 0%, 100%);
--surface-100: hsl(0, 0%, 98%);
--surface-200: hsl(0, 0%, 95%);
--surface-300: hsl(0, 0%, 92%);
--surface-400: hsl(0, 0%, 84%);
--surface-500: hsl(0, 0%, 75%);
--surface-600: hsl(0, 0%, 65%);
--surface-700: hsl(0, 0%, 55%);
--surface-800: hsl(0, 0%, 40%);
--surface-900: hsl(0, 0%, 30%);
--surface-950: hsl(0, 0%, 20%);
Works correctly otherwise
haslinghuis
force-pushed
the
beeper-config
branch
from
0c82ccf to
01f301d
Compare
|
|
Preview URL: https://01f301d2.betaflight-configurator.pages.dev |
Summary by CodeRabbit
New Features
Style
Localization