f7d928506a
- Implemented popup.html for user interface with search functionality and request display. - Developed popup.js to manage search items, matched requests, and clipboard operations. - Created mergeConflictManager.js for automated git operations in specified repositories. - Added projects.txt to maintain a list of relevant projects. - Introduced pushReleaseBranches.js for managing release branches across multiple projects. - Developed releasePrepper.js to prepare projects for release with branch management. - Created stashUpdater.js to update git origins for projects. - Added updatedProjects.txt to track projects that have been updated.
3.5 KiB
3.5 KiB
Feature Flags Modal – RBC Style
Overview
This modal allows users to view, add, toggle, and remove feature flags stored in session storage. It is styled to match the RBC Direct Investing modal design, with a professional, modern look and clear sectioning.
🆕 New Layout (as of July 2025)
1. Header
- Title:
Feature Flags Manager - Large, bold, and visually separated from the rest of the modal.
2. Add New Feature Flags (Top Section)
- Header:
Add New Feature Flags - Always at the top, right below the main title.
- Allows adding multiple new feature flags before saving.
- Each new flag row includes:
- Checkbox (default: checked)
- Text input for flag name
- Remove button
- "+ Add Another Feature Flag" button for more rows
- Section is visually separated with a border below.
3. Existing Feature Flags
- Header:
Existing Feature Flags - Appears below the new flags section.
- Flags are displayed in a two-column grid.
- Each flag is shown as a card with:
- Checkbox (toggle on/off)
- Flag name
- Delete (×) button
- Cards have hover and focus effects for clarity.
4. Action Buttons (Footer)
- Buttons:
Cancel(secondary),Save Changes(primary) - Right-aligned, styled to match RBC's button system
- Cancel closes the modal without saving
- Save applies all changes and reloads the page
5. Close Button
- Top-right corner (×), styled as a circular icon
- Closes the modal and overlay
6. Overlay
- Dimmed, blurred background overlay for focus
🎨 Styling Details
- Colors: RBC blue (
#006ac3), hover blue (#0051a5), error red (#d32f2f), backgrounds (#fafafa,#f3f7f8) - Typography: System font stack, clear hierarchy
- Spacing: Generous padding, grid layout, rounded corners
- Accessibility: High contrast, focus states, large click targets
🛠️ Usage
- The modal is generated and injected by the
rbc-di-featureflags.jsbookmarklet. - All changes are saved to
sessionStorageunder therbc_di_sessionkey. - Use the provided script to generate a bookmarklet for browser use.
📋 Example Structure
┌─────────────────────────────────────┐
│ Feature Flags Manager │ ← Main Header
├─────────────────────────────────────┤
│ Add New Feature Flags │ ← New section (top)
│ [+] Add Another Feature Flag │
├─────────────────────────────────────┤
│ Existing Feature Flags │ ← New header
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Flag 1 [×] │ │ Flag 2 [×] │ │
│ └─────────────┘ └─────────────┘ │
├─────────────────────────────────────┤
│ [Cancel] [Save Changes] │
└─────────────────────────────────────┘
✅ Improvements Over Previous Version
- New flags section is always visible and prioritized
- Existing flags are clearly separated and labeled
- Modern, accessible, and brand-consistent design
- All actions (add, remove, toggle, save, cancel) are visually clear and easy to use