feat(Tab): improve AllowDrag function #5684
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
Reviewer's Guide by SourceryThis pull request introduces drag-and-drop functionality to the Tab component, simplifies rendering logic, and updates styles and JavaScript for better drag-and-drop support. The changes include enabling drag-and-drop via a new Sequence diagram for Tab drag and dropsequenceDiagram
participant User
participant Tab.razor.js
participant Tab.razor
User->>Tab.razor.js: Drags tab item
activate Tab.razor.js
Tab.razor.js->>Tab.razor.js: Adds 'tab-dragging' class to tab
Tab.razor.js->>Tab.razor.js: Adds 'tab-drag' class to dragged item
Tab.razor.js->>Tab.razor.js: Sets data transfer effect to 'move'
deactivate Tab.razor.js
User->>Tab.razor.js: Drops tab item
activate Tab.razor.js
Tab.razor.js->>Tab.razor.js: Removes 'tab-dragging' class from tab
Tab.razor.js->>Tab.razor.js: Removes 'tab-drag' class from dragged item
Tab.razor.js->>Tab.razor: Calls DragItemCallback with origin and current indices
activate Tab.razor
Tab.razor->>Tab.razor: Updates tab order
deactivate Tab.razor
deactivate Tab.razor.js
File-Level Changes
Assessment against linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey @ArgoZhang - I've reviewed your changes - here's some feedback:
Overall Comments:
- Consider adding a comment explaining why
DraggableStringis nullable. - The drag and drop functionality might benefit from a dedicated demo showcasing its capabilities more explicitly.
Here's what I looked at during the review
- 🟢 General issues: all looks good
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟢 Complexity: all looks good
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #5684 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 654 654
Lines 29705 29689 -16
Branches 4219 4213 -6
=========================================
- Hits 29705 29689 -16 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Link issues
fixes #5683
Summary By Copilot
This pull request includes several changes to enhance the tab component in the
BootstrapBlazorproject. The main changes include adding drag-and-drop functionality to tabs, simplifying the rendering logic, and updating the styles and JavaScript for better drag-and-drop support.Enhancements to tab functionality:
src/BootstrapBlazor.Server/Components/Samples/Tabs.razor: Added theAllowDragattribute to enable drag-and-drop functionality for tabs withTabStyle.ChromeandTabStyle.Capsule. [1] [2]Simplification of rendering logic:
src/BootstrapBlazor/Components/Tab/Tab.razor: Consolidated the rendering methods for tab headers by removingRenderDisabledHeaderByStyleandRenderHeaderByStyle, and using a more genericRenderHeadermethod. [1] [2] [3] [4]JavaScript updates for drag-and-drop:
src/BootstrapBlazor/Components/Tab/Tab.razor.js: Updated the selectors and logic to support the new drag-and-drop functionality, including handling draggable elements and ensuring proper item selection during drag events. [1] [2] [3] [4]Styling updates for drag-and-drop:
src/BootstrapBlazor/Components/Tab/Tab.razor.scss: Adjusted styles to improve the visual feedback during drag-and-drop operations, including animations and pointer events handling. [1] [2] [3] [4]Codebase simplification:
src/BootstrapBlazor/Components/Tab/Tab.razor.cs: Simplified theDraggableStringproperty and removed redundant methods related to tab header rendering. [1] [2] [3]Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
New Features: