feat(blame): add search functionality to blame dialog
This update introduces a search bar to the blame dialog, allowing users to filter blame lines based on their input. The search highlights matching text segments, improving the usability of the blame feature for navigating large files. - Implemented a search bar for filtering blame lines - Added visual feedback for matched search terms - Enhanced overall user experience in the blame dialog
This commit is contained in:
+45
@@ -3120,6 +3120,45 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.blame-search-bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 38px;
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
background: #111321;
|
||||
}
|
||||
.blame-search-bar svg {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
color: var(--color-ink-faint);
|
||||
pointer-events: none;
|
||||
}
|
||||
.blame-search-bar input {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
padding: 0 34px;
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: 6px;
|
||||
background: #0b0e18;
|
||||
color: var(--color-ink);
|
||||
font-size: 12px;
|
||||
}
|
||||
.blame-search-clear {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-ink-faint);
|
||||
}
|
||||
.blame-search-clear svg {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.blame-column-headers {
|
||||
grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
|
||||
}
|
||||
@@ -3233,6 +3272,12 @@
|
||||
.blame-group:hover .blame-line-code {
|
||||
background: #151a2b;
|
||||
}
|
||||
.blame-search-hit {
|
||||
padding: 0 1px;
|
||||
border-radius: 3px;
|
||||
background: rgba(240,182,72,0.28);
|
||||
color: #f3d487;
|
||||
}
|
||||
|
||||
.global-search-body {
|
||||
display: grid;
|
||||
|
||||
Reference in New Issue
Block a user