rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-07-08 22:45:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(dev-tools)/adds sorting on columns with verticle borders (#8238)

Browse Source
This commit is contained in:
sachin-thakur-bruno
2026-06-12 17:58:22 +05:30
committed by GitHub
parent 7a24b1924d
commit e7e6cdfa51
5 changed files with 382 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
packages/bruno-app/src/components/Devtools/Console/NetworkTab/StyledWrapper.js
View File

@@ -69,13 +69,22 @@ const StyledWrapper = styled.div`
height: 100%;
overflow: hidden;
min-height: 0; /* Important for proper flex behavior */
position: relative;
}
.col-separator {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: ${(props) => props.theme.console.border};
pointer-events: none;
z-index: 2;
}
.requests-header {
display: grid;
grid-template-columns: 80px 80px 150px 1fr 100px 80px 80px;
gap: 12px;
padding: 4px 16px;
padding: 0;
background: ${(props) => props.theme.console.headerBg};
border-bottom: 1px solid ${(props) => props.theme.console.border};
font-size: 10px;
@@ -83,6 +92,39 @@ const StyledWrapper = styled.div`
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
.header-cell {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
padding: 4px 8px;
cursor: pointer;
user-select: none;
&:first-child {
padding-left: 16px;
}
&:last-child {
padding-right: 16px;
}
&:hover {
color: ${(props) => props.theme.console.messageColor};
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
svg {
flex-shrink: 0;
}
}
}
.requests-list {
@@ -94,9 +136,7 @@ const StyledWrapper = styled.div`
.request-row {
display: grid;
grid-template-columns: 80px 80px 150px 1fr 100px 80px 80px;
gap: 12px;
padding: 2px 16px;
padding: 0;
cursor: pointer;
transition: background-color 0.1s ease;
font-size: ${(props) => props.theme.font.size.sm};
@@ -107,12 +147,19 @@ const StyledWrapper = styled.div`
}
&.selected {
padding-left: 13px;
background: ${(props) => props.theme.console.logHoverBg};
border-left: 3px solid ${(props) => props.theme.console.checkboxColor};
box-shadow: inset 3px 0 0 ${(props) => props.theme.console.checkboxColor};
}
}
.request-method {
padding: 2px 8px 2px 16px;
}
.request-status {
padding: 2px 8px;
}
.method-badge {
display: inline-flex;
align-items: center;
@@ -128,6 +175,7 @@ const StyledWrapper = styled.div`
}
.request-domain {
padding: 2px 8px;
color: ${(props) => props.theme.console.messageColor};
overflow: hidden;
text-overflow: ellipsis;
@@ -135,6 +183,7 @@ const StyledWrapper = styled.div`
}
.request-path {
padding: 2px 8px;
color: ${(props) => props.theme.console.messageColor};
overflow: hidden;
text-overflow: ellipsis;
@@ -143,19 +192,26 @@ const StyledWrapper = styled.div`
}
.request-time {
padding: 2px 8px;
color: ${(props) => props.theme.console.timestampColor};
font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: ${(props) => props.theme.font.size.xs};
}
.request-duration {
padding: 2px 8px;
color: ${(props) => props.theme.console.messageColor};
font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: ${(props) => props.theme.font.size.xs};
text-align: right;
}
.text-right {
text-align: right;
}
.request-size {
padding: 2px 8px;
color: ${(props) => props.theme.console.messageColor};
font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: ${(props) => props.theme.font.size.xs};