Editable in fast filters#1567
Conversation
- Replace checkbox with slide toggle for better visual feedback - Add "Quick edit" column header aligned with "where" label - Add info icon with tooltip explaining the feature - Show quick edit column only when conditions exist - Support dark theme styling Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace checkbox with slide toggle showing lock/edit icons inside - Add animated help popup showing chip vs editable input comparison - Toggle animation shows text being typed to demonstrate editability - Reduce quick edit column width for better layout Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
|
There was a problem hiding this comment.
Pull request overview
This pull request enhances the saved filters dialog by replacing a checkbox with a more visually appealing slide toggle and adding an informative help menu with animations to demonstrate the "quick edit" feature for fast filters.
Changes:
- Replaced checkbox with "Editable" label with a Material slide toggle featuring custom lock/edit icons
- Added a "Quick edit" header section with an info icon that opens an animated help menu demonstrating the feature
- Updated grid layout (reduced last column from 120px to 100px) to accommodate the more compact toggle design
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| saved-filters-dialog.component.ts | Added imports for MatMenuModule, MatSlideToggleModule, and MatTooltipModule to support new UI components |
| saved-filters-dialog.component.html | Added "Quick edit" header with animated help menu and replaced checkbox with slide toggle including tooltips |
| saved-filters-dialog.component.css | Added extensive styling for quick edit header, animated help menu demo, slide toggle customization with icons, and adjusted grid layout; removed checkbox-specific styles |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .quick-edit-toggle ::ng-deep .mdc-switch__handle::after { | ||
| font-family: 'Material Icons'; | ||
| content: 'lock'; | ||
| font-size: 16px; | ||
| position: absolute; | ||
| color: #fff; | ||
| } | ||
|
|
||
| /* Add edit icon when checked */ | ||
| .quick-edit-toggle.mat-mdc-slide-toggle-checked ::ng-deep .mdc-switch__handle::after { | ||
| content: 'edit'; | ||
| font-size: 16px; | ||
| color: #fff; | ||
| } |
There was a problem hiding this comment.
The Material Icons font family is being used to add icons to the slide toggle using CSS pseudo-elements. This approach relies on the Material Icons font being loaded and available. Consider verifying that the font is loaded, or use a more robust approach like Angular Material's mat-icon component with content projection if the icons don't render correctly. The Material Icons font might not render reliably across all browsers or font loading scenarios.
| <div class="quick-edit-header" *ngIf="hasSelectedFilters"> | ||
| <span class="quick-edit-title">Quick edit</span> | ||
| <mat-icon class="quick-edit-info-icon" | ||
| [matMenuTriggerFor]="quickEditHelpMenu"> |
There was a problem hiding this comment.
The info icon lacks proper accessibility attributes. Consider adding aria-label or aria-describedby to the mat-icon element to provide context for screen reader users about what the info icon does (e.g., "Show help for quick edit feature"). Additionally, consider adding role="button" and keyboard event handlers to make it fully keyboard accessible.
| [matMenuTriggerFor]="quickEditHelpMenu"> | |
| [matMenuTriggerFor]="quickEditHelpMenu" | |
| role="button" | |
| tabindex="0" | |
| aria-label="Show help for quick edit feature"> |
| class="quick-edit-toggle" | ||
| [checked]="dynamicColumn === value.key" | ||
| [matTooltip]="dynamicColumn === value.key ? 'Disable editing' : 'Enable editing'" | ||
| matTooltipPosition="above" |
There was a problem hiding this comment.
The slide toggle replaces a checkbox that had a visible "Editable" label. The new implementation only has a tooltip, which reduces discoverability and accessibility. Users must hover to understand the toggle's purpose, and tooltip text is not accessible to screen readers in the same way as visible labels. Consider adding a visible label or aria-label to maintain the same level of accessibility and usability as the previous implementation.
| matTooltipPosition="above" | |
| matTooltipPosition="above" | |
| [attr.aria-label]="dynamicColumn === value.key ? 'Disable editing for ' + value.key : 'Enable editing for ' + value.key" |
| /* Animated example */ | ||
| .quick-edit-animated-example { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 16px; | ||
| } | ||
|
|
||
| .example-toggle-animated { | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| .toggle-track { | ||
| width: 36px; | ||
| height: 20px; | ||
| border-radius: 10px; | ||
| background-color: rgba(0, 0, 0, 0.25); | ||
| position: relative; | ||
| animation: toggleTrack 3s ease-in-out infinite; | ||
| } | ||
|
|
||
| .toggle-thumb { | ||
| width: 16px; | ||
| height: 16px; | ||
| border-radius: 50%; | ||
| background-color: #fff; | ||
| position: absolute; | ||
| top: 2px; | ||
| left: 2px; | ||
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); | ||
| animation: toggleThumb 3s ease-in-out infinite; | ||
| } | ||
|
|
||
| @keyframes toggleTrack { | ||
| 0%, 40% { | ||
| background-color: rgba(0, 0, 0, 0.25); | ||
| } | ||
| 50%, 90% { | ||
| background-color: #C177FC; | ||
| } | ||
| 100% { | ||
| background-color: rgba(0, 0, 0, 0.25); | ||
| } | ||
| } | ||
|
|
||
| @keyframes toggleThumb { | ||
| 0%, 40% { | ||
| left: 2px; | ||
| } | ||
| 50%, 90% { | ||
| left: 18px; | ||
| } | ||
| 100% { | ||
| left: 2px; | ||
| } | ||
| } | ||
|
|
||
| .example-filter-animated { | ||
| position: relative; | ||
| height: 36px; | ||
| min-width: 110px; | ||
| margin-top: 4px; | ||
| } | ||
|
|
||
| .example-chip-animated { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| background-color: rgba(0, 0, 0, 0.08); | ||
| border-radius: 16px; | ||
| padding: 5px 12px; | ||
| font-size: 12px; | ||
| color: rgba(0, 0, 0, 0.7); | ||
| white-space: nowrap; | ||
| animation: chipFade 3s ease-in-out infinite; | ||
| } | ||
|
|
||
| .example-editable-animated { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 4px; | ||
| background-color: transparent; | ||
| border: 1px solid #C177FC; | ||
| border-radius: 4px; | ||
| padding: 8px 8px 4px 8px; | ||
| opacity: 0; | ||
| animation: editableFade 3s ease-in-out infinite; | ||
| } | ||
|
|
||
| .example-editable-label { | ||
| position: absolute; | ||
| top: -8px; | ||
| left: 8px; | ||
| font-size: 10px; | ||
| color: #C177FC; | ||
| background-color: #fff; | ||
| padding: 0 4px; | ||
| } | ||
|
|
||
| .example-editable-value { | ||
| font-size: 12px; | ||
| color: rgba(0, 0, 0, 0.87); | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .typing-text::after { | ||
| content: 'active'; | ||
| animation: typeText 3s ease-in-out infinite; | ||
| } | ||
|
|
||
| @keyframes typeText { | ||
| 0%, 40% { | ||
| content: ''; | ||
| } | ||
| 45% { | ||
| content: 'p'; | ||
| } | ||
| 50% { | ||
| content: 'pe'; | ||
| } | ||
| 55% { | ||
| content: 'pen'; | ||
| } | ||
| 60% { | ||
| content: 'pend'; | ||
| } | ||
| 65% { | ||
| content: 'pendi'; | ||
| } | ||
| 70%, 90% { | ||
| content: 'pending'; | ||
| } | ||
| 100% { | ||
| content: ''; | ||
| } | ||
| } | ||
|
|
||
| .example-typing-cursor { | ||
| font-size: 12px; | ||
| color: #C177FC; | ||
| font-weight: 300; | ||
| animation: cursorBlink 0.5s step-end infinite; | ||
| } | ||
|
|
||
| @keyframes cursorBlink { | ||
| 0%, 50% { | ||
| opacity: 1; | ||
| } | ||
| 51%, 100% { | ||
| opacity: 0; | ||
| } | ||
| } | ||
|
|
||
| @keyframes chipFade { | ||
| 0%, 40% { | ||
| opacity: 1; | ||
| } | ||
| 50%, 90% { | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| @keyframes editableFade { | ||
| 0%, 40% { | ||
| opacity: 0; | ||
| } | ||
| 50%, 90% { | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| opacity: 0; | ||
| } | ||
| } |
There was a problem hiding this comment.
The animations use the infinite keyword, which means they will run continuously as long as the help menu is open. This could impact performance if the menu stays open for extended periods. Consider adding animation-play-state controls or limiting the animation to run only a few times (e.g., using animation-iteration-count: 3) before stopping, which would reduce CPU usage while still demonstrating the feature effectively.
3 participants
No description provided.