Michael Mainguy
f9abfbc8ff
- Create ColumnSettings component with collapsible panel and organized column groups - Implement localStorage persistence for column visibility preferences across sessions - Add default visible columns: expand, url, start time, total response time, data rate, content-length - Group columns by category: Basic, Connection, Timing, Performance, Advanced - Provide bulk actions: Show All, Hide All, Reset to Defaults - Add conditional rendering for all table headers and cells based on visibility state - Update RequestRowDetails to dynamically calculate colSpan based on visible columns - Create responsive grid layout for column settings with hover effects - Use CSS modules with App.css variables for consistent theming - Implement type-safe column management with proper TypeScript interfaces Features: - 🎛️ Gear icon toggle button for easy access to column settings - 📁 Logical grouping of related columns for better organization - 💾 Automatic persistence of user preferences in localStorage - 🎯 Clean default view showing only essential columns - 🔧 Flexible customization allowing users to show exactly what they need - 📱 Responsive design that adapts to different screen sizes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
125 lines
2.6 KiB
CSS
125 lines
2.6 KiB
CSS
/* Column Settings component styles using CSS variables from App.module.css */
|
|
|
|
.columnSettings {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.toggleButton {
|
|
background: var(--color-bg-secondary);
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-text);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-base);
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.toggleButton:hover {
|
|
background: var(--color-bg-hover);
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.panel {
|
|
background: var(--color-bg-secondary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-lg);
|
|
margin-top: var(--spacing-sm);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.panelHeader {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.panelHeader h3 {
|
|
margin: 0;
|
|
color: var(--color-text-highlight);
|
|
font-size: var(--font-size-lg);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.bulkActions {
|
|
display: flex;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.bulkButton {
|
|
background: var(--color-bg-light);
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-text);
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-sm);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.bulkButton:hover {
|
|
background: var(--color-primary);
|
|
color: white;
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.columnGroups {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.columnGroup {
|
|
background: var(--color-bg-light);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.groupTitle {
|
|
margin: 0 0 var(--spacing-md) 0;
|
|
color: var(--color-text-highlight);
|
|
font-size: var(--font-size-md);
|
|
font-weight: bold;
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.columnList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.columnItem {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
cursor: pointer;
|
|
padding: var(--spacing-xs);
|
|
border-radius: var(--radius-sm);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.columnItem:hover {
|
|
background-color: var(--color-bg-hover);
|
|
}
|
|
|
|
.checkbox {
|
|
accent-color: var(--color-primary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.columnLabel {
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
} |