Skip to content

Commit 9f8fd55

Browse files
jacovinusjacovinus
authored
Merge pull request #623 from metrico/fix/traces_scrollbar
fix: dataview scrollbar
2 parents e2bd866 + 2e2a463 commit 9f8fd55

File tree

2 files changed

+155
-155
lines changed

2 files changed

+155
-155
lines changed

Diff for: ‎packages/main/src/components/DataViews/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function DataViews(props: any) {
2525
if (viewsMemo.length > 0) {
2626
return (
2727
<ThemeProvider theme={theme}>
28-
<DataviewsContainer>
28+
<DataviewsContainer theme={theme}>
2929
<PluginRenderer section={"Data Views"} localProps={props} />
3030
{!isCardinality && viewsMemo?.map((dv: any, index: any) => (
3131
<DataViewItem

Diff for: ‎packages/main/src/components/DataViews/styled.ts

+154-154
Original file line numberDiff line numberDiff line change
@@ -1,192 +1,192 @@
11
import styled from "@emotion/styled";
22
import { CircularProgress } from "@mui/material";
3-
3+
import { QrynTheme } from "@ui/theme/types";
44
export const DataViewStyled = styled.div`
5-
background: ${({ theme }: any) => theme.background};
6-
border: 1px solid ${({ theme }: any) => theme.accentNeutral};
7-
margin: 5px;
8-
padding: 6px;
9-
overflow-y: auto;
10-
overflow-x: hidden;
11-
position: relative;
12-
flex: 1;
13-
border-radius: 3px;
5+
background: ${({ theme }: any) => theme.background};
6+
border: 1px solid ${({ theme }: any) => theme.accentNeutral};
7+
margin: 5px;
8+
padding: 6px;
9+
overflow-y: auto;
10+
overflow-x: hidden;
11+
position: relative;
12+
flex: 1;
13+
border-radius: 3px;
1414
15-
&::-webkit-scrollbar {
16-
width: 5px;
17-
}
18-
&::-webkit-scrollbar-corner {
19-
background: transparent;
20-
}
15+
&::-webkit-scrollbar {
16+
width: 5px;
17+
}
18+
&::-webkit-scrollbar-corner {
19+
background: transparent;
20+
}
2121
22-
&::-webkit-scrollbar-thumb {
23-
border-radius: 5px;
24-
background: ${({ theme }: any) => theme.alphaPlusNeutral};
25-
}
22+
&::-webkit-scrollbar-thumb {
23+
border-radius: 5px;
24+
background: ${({ theme }: any) => theme.alphaPlusNeutral};
25+
}
2626
`;
2727

2828
export const EmptyViewContainer = styled.div`
29-
display: flex;
30-
align-items: center;
31-
justify-content: center;
32-
flex: 1;
33-
height: 100%;
34-
font-size: 0.75em;
35-
letter-spacing: 1px;
36-
padding: 30px;
37-
color: ${({ theme }: any) => theme.lightContrast};
38-
background: ${({ theme }: any) => theme.background};
39-
text-align: center;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
flex: 1;
33+
height: 100%;
34+
font-size: 0.75em;
35+
letter-spacing: 1px;
36+
padding: 30px;
37+
color: ${({ theme }: any) => theme.lightContrast};
38+
background: ${({ theme }: any) => theme.background};
39+
text-align: center;
4040
`;
4141

4242
export const DataViewHeader = styled.div`
43-
display: flex;
44-
align-items: center;
45-
font-size: 10px;
46-
font-family: monospace;
47-
margin: 0px 10px;
48-
color: ${({ theme }: any) => theme.contrast};
49-
span {
50-
background: ${({ theme }: any) => theme.deep};
51-
padding: 4px;
52-
border-radius: 4px;
53-
border: 1px solid ${({ theme }: any) => theme.accentNeutral};
54-
margin: 0px 5px;
5543
display: flex;
5644
align-items: center;
57-
justify-content: center;
58-
}
45+
font-size: 10px;
46+
font-family: monospace;
47+
margin: 0px 10px;
48+
color: ${({ theme }: any) => theme.contrast};
49+
span {
50+
background: ${({ theme }: any) => theme.deep};
51+
padding: 4px;
52+
border-radius: 4px;
53+
border: 1px solid ${({ theme }: any) => theme.accentNeutral};
54+
margin: 0px 5px;
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
58+
}
5959
`;
6060

6161
export const DataViewCont = styled.div`
62-
display: flex;
63-
min-height: min-content;
64-
flex-direction: column;
65-
height: 100%;
62+
display: flex;
63+
min-height: min-content;
64+
flex-direction: column;
65+
height: 100%;
6666
`;
6767

6868
export const Loader = styled(CircularProgress)`
69-
position: absolute;
70-
top: 50px;
71-
left: 0;
72-
right: 0;
73-
margin: auto;
69+
position: absolute;
70+
top: 50px;
71+
left: 0;
72+
right: 0;
73+
margin: auto;
7474
`;
7575

76-
export const DataviewsContainer = styled.div`
77-
overflow-y: auto;
78-
margin: 2px;
79-
display: flex;
80-
flex-direction: column;
81-
flex: 1;
82-
max-height: 100vh;
83-
&::-webkit-scrollbar {
84-
background: transparent;
85-
}
86-
::-webkit-scrollbar-corner {
87-
background: transparent;
88-
}
89-
&::-webkit-scrollbar-thumb {
90-
background: transparent;
91-
}
76+
export const DataviewsContainer = styled.div<{ theme: QrynTheme }>`
77+
overflow-y: auto;
78+
margin: 2px;
79+
display: flex;
80+
flex-direction: column;
81+
flex: 1;
82+
max-height: 100vh;
83+
&::-webkit-scrollbar {
84+
background: ${({ theme }) => theme.background};
85+
}
86+
::-webkit-scrollbar-corner {
87+
background: transparent;
88+
}
89+
&::-webkit-scrollbar-thumb {
90+
background: ${({ theme }) => theme.accentNeutral};
91+
}
9292
`;
9393

9494
export const ViewHeaderStyled = styled.div`
95-
display: flex;
96-
align-items: center;
97-
color: ${({ theme }: any) => theme.contrast};
98-
font-size: 12px;
99-
.header-actions {
100-
justify-self: flex-end;
101-
.header-icon {
102-
padding: 1px 2px;
103-
margin: 0px 2px;
104-
border-radius: 3px;
105-
cursor: pointer;
106-
color: ${({ theme }: any) => theme.contrast};
107-
&:hover {
108-
background: ${({ theme }: any) => theme.neutral};
109-
}
110-
}
111-
}
112-
.view-header-info {
11395
display: flex;
114-
flex: 1;
11596
align-items: center;
116-
padding:4px;
117-
padding-bottom:8px;
118-
span {
119-
margin: 0px 3px;
120-
.exp {
121-
font-family: monospace;
122-
}
97+
color: ${({ theme }: any) => theme.contrast};
98+
font-size: 12px;
99+
.header-actions {
100+
justify-self: flex-end;
101+
.header-icon {
102+
padding: 1px 2px;
103+
margin: 0px 2px;
104+
border-radius: 3px;
105+
cursor: pointer;
106+
color: ${({ theme }: any) => theme.contrast};
107+
&:hover {
108+
background: ${({ theme }: any) => theme.neutral};
109+
}
110+
}
111+
}
112+
.view-header-info {
113+
display: flex;
114+
flex: 1;
115+
align-items: center;
116+
padding: 4px;
117+
padding-bottom: 8px;
118+
span {
119+
margin: 0px 3px;
120+
.exp {
121+
font-family: monospace;
122+
}
123+
}
123124
}
124-
}
125125
`;
126126

127127
export const LabelChip = styled.div`
128-
margin: 0px 2px;
129-
padding: 2px;
130-
font-size: 10px;
131-
border: 1px solid ${({ theme }: any) => theme.accentNeutral};
132-
border-radius: 3px;
128+
margin: 0px 2px;
129+
padding: 2px;
130+
font-size: 10px;
131+
border: 1px solid ${({ theme }: any) => theme.accentNeutral};
132+
border-radius: 3px;
133133
`;
134134

135135
export const HeadLabelsCont = styled.div`
136-
display: flex;
137-
align-items: center;
138-
margin: 0px 12px;
139-
flex: 1;
140-
max-width: 450px;
141-
overflow-x: auto;
142-
&::-webkit-scrollbar {
143-
width: 5px;
144-
height: 5px;
145-
}
146-
&::-webkit-scrollbar-corner {
147-
background: transparent;
148-
}
149-
&::-webkit-scrollbar-thumb {
150-
border-radius: 5px;
151-
background: ${({ theme }: any) => theme.alphaPlusNeutral};
152-
}
136+
display: flex;
137+
align-items: center;
138+
margin: 0px 12px;
139+
flex: 1;
140+
max-width: 450px;
141+
overflow-x: auto;
142+
&::-webkit-scrollbar {
143+
width: 5px;
144+
height: 5px;
145+
}
146+
&::-webkit-scrollbar-corner {
147+
background: transparent;
148+
}
149+
&::-webkit-scrollbar-thumb {
150+
border-radius: 5px;
151+
background: ${({ theme }: any) => theme.alphaPlusNeutral};
152+
}
153153
`;
154154

155155
export const StyledInfoContent = styled.div`
156-
background: ${({ theme }: any) => theme.shadow};
157-
color: ${({ theme }: any) => theme.contrast};
158-
display: flex;
159-
flex-direction: column;
160-
padding: 20px;
161-
div {
162-
width: 100%;
163-
overflow-wrap: break-word;
164-
font-family: monospace;
165-
}
166-
p {
167-
padding: 10px;
168-
font-size: 12px;
156+
background: ${({ theme }: any) => theme.shadow};
157+
color: ${({ theme }: any) => theme.contrast};
169158
display: flex;
170-
flex: 1;
171-
align-items: center;
172-
flex-wrap: wrap;
173-
span.label {
174-
background: ${({ theme }: any) => theme.accentNeutral};
175-
color: ${({ theme }: any) => theme.shadow};
176-
margin: 2px;
177-
padding: 2px;
178-
border-radius: 2px;
179-
}
180-
}
181-
h4 {
182-
margin-bottom: 20px;
183-
padding-bottom: 4px;
184-
border-bottom: 1px solid ${({ theme }: any) => theme.accentNeutral};
185-
}
186-
pre {
187-
font-family: monospace;
188-
}
189-
small {
190-
font-size: 10px;
191-
}
159+
flex-direction: column;
160+
padding: 20px;
161+
div {
162+
width: 100%;
163+
overflow-wrap: break-word;
164+
font-family: monospace;
165+
}
166+
p {
167+
padding: 10px;
168+
font-size: 12px;
169+
display: flex;
170+
flex: 1;
171+
align-items: center;
172+
flex-wrap: wrap;
173+
span.label {
174+
background: ${({ theme }: any) => theme.accentNeutral};
175+
color: ${({ theme }: any) => theme.shadow};
176+
margin: 2px;
177+
padding: 2px;
178+
border-radius: 2px;
179+
}
180+
}
181+
h4 {
182+
margin-bottom: 20px;
183+
padding-bottom: 4px;
184+
border-bottom: 1px solid ${({ theme }: any) => theme.accentNeutral};
185+
}
186+
pre {
187+
font-family: monospace;
188+
}
189+
small {
190+
font-size: 10px;
191+
}
192192
`;

0 commit comments

Comments
 (0)