IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Loki: Replace hardcoded css values (#57770)

Browse Source 
* replace hardcoded margin/padding in getLogRowStyles.ts

* replace hardcoded margin/padding in LogDetails.tsx

* replace hardcoded values in LogDetailsRow.tsx

* replace hardcoded values in LogLabels.tsx

* replace hardcoded values in LogLabelStats.tsx

* replace hardcoded values in LogLabelStatsRow.tsx

* replace hardcoded values in LogRowContext.tsx

* replace hardcoded values in LogRowMessage.tsx

* replace hardcoded values

* remove forced theme spacing values
This commit is contained in:
Gareth Dawson 2022-11-04 15:18:55 +00:00 committed by GitHub
parent 4758bbcb61
commit 4749f45fe8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 32 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/logs/components/LogDetails.tsx
View File

@ -126,7 +126,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
name="question-circle"
size="xs"
className={css`
margin-left: 4px;
margin-left: ${theme.spacing(0.5)};
`}
/>
</Tooltip>

7
public/app/features/logs/components/LogDetailsRow.tsx
View File

@ -57,9 +57,9 @@ const getStyles = (theme: GrafanaTheme2) => {
position: absolute;
top: 0px;
justify-content: center;
border-radius: 20px;
width: 26px;
height: 26px;
border-radius: ${theme.shape.borderRadius(10)};
width: ${theme.spacing(3.25)};
height: ${theme.spacing(3.25)};
`,
wrapLine: css`
label: wrapLine;
@ -67,6 +67,7 @@ const getStyles = (theme: GrafanaTheme2) => {
`,
};
};
class UnThemedLogDetailsRow extends PureComponent<Props, State> {
state: State = {
showFieldsStats: false,

2
public/app/features/logs/components/LogLabelStats.tsx
View File

@ -39,7 +39,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
`,
logsStatsBody: css`
label: logs-stats__body;
padding: 5px 0;
padding: 5px 0px;
`,
};
});

10
public/app/features/logs/components/LogLabelStatsRow.tsx
View File

@ -28,23 +28,23 @@ const getStyles = (theme: GrafanaTheme2) => ({
logsStatsRowCount: css`
label: logs-stats-row__count;
text-align: right;
margin-left: 0.5em;
margin-left: ${theme.spacing(0.75)};
`,
logsStatsRowPercent: css`
label: logs-stats-row__percent;
text-align: right;
margin-left: 0.5em;
width: 3em;
margin-left: ${theme.spacing(0.75)};
width: ${theme.spacing(4.5)};
`,
logsStatsRowBar: css`
label: logs-stats-row__bar;
height: 4px;
height: ${theme.spacing(0.5)};
overflow: hidden;
background: ${theme.colors.text.disabled};
`,
logsStatsRowInnerBar: css`
label: logs-stats-row__innerbar;
height: 4px;
height: ${theme.spacing(0.5)};
overflow: hidden;
background: ${theme.colors.primary.main};
`,

6
public/app/features/logs/components/LogLabels.tsx
View File

@ -53,10 +53,10 @@ const getStyles = (theme: GrafanaTheme2) => {
logsLabel: css`
label: logs-label;
display: flex;
padding: 0 2px;
padding: ${theme.spacing(0, 0.25)};
background-color: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(1)};
margin: 1px 4px 0 0;
margin: ${theme.spacing(0.125, 0.5, 0, 0)};
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@ -64,7 +64,7 @@ const getStyles = (theme: GrafanaTheme2) => {
logsLabelValue: css`
label: logs-label__value;
display: inline-block;
max-width: 20em;
max-width: ${theme.spacing(25)};
text-overflow: ellipsis;
overflow: hidden;
`,

18
public/app/features/logs/components/LogRowContext.tsx
View File

@ -49,7 +49,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
top: 100%;
`
: css`
margin-top: 20px;
margin-top: ${theme.spacing(2.5)};
`;
return {
width: css`
@ -61,22 +61,22 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
z-index: ${theme.zIndex.dropdown};
overflow: hidden;
background: ${theme.colors.background.primary};
box-shadow: 0 0 10px ${theme.v1.palette.black};
box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
border: 1px solid ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(2)};
font-family: ${theme.typography.fontFamily};
`,
header: css`
height: ${headerHeight}px;
padding: 0 10px;
padding: ${theme.spacing(0, 1.25)};
display: flex;
align-items: center;
background: ${theme.colors.background.canvas};
`,
top: css`
border-radius: 0 0 ${theme.shape.borderRadius(2)} ${theme.shape.borderRadius(2)};
box-shadow: 0 0 10px ${theme.v1.palette.black};
clip-path: inset(0px -10px -10px -10px);
box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
clip-path: inset(0px -${theme.spacing(1.25)} -${theme.spacing(1.25)} -${theme.spacing(1.25)});
`,
title: css`
position: absolute;
@ -87,8 +87,8 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
background: ${theme.colors.background.secondary};
border: 1px solid ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(2)} ${theme.shape.borderRadius(2)} 0 0;
box-shadow: 0 0 10px ${theme.v1.palette.black};
clip-path: inset(-10px -10px 0px -10px);
box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
clip-path: inset(-${theme.spacing(1.25)} -${theme.spacing(1.25)} 0px -${theme.spacing(1.25)});
font-family: ${theme.typography.fontFamily};
display: flex;
@ -107,11 +107,11 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
display: flex;
`,
headerButton: css`
margin-left: 8px;
margin-left: ${theme.spacing(1)};
`,
logs: css`
height: ${logsHeight}px;
padding: 10px;
padding: ${theme.spacing(1.25)};
font-family: ${theme.typography.fontFamilyMonospace};
.scrollbar-view {

6
public/app/features/logs/components/LogRowMessage.tsx
View File

@ -64,18 +64,18 @@ const getStyles = (theme: GrafanaTheme2, showContextButton: boolean, isInDashboa
position: absolute;
top: 0;
bottom: auto;
height: 36px;
height: ${theme.spacing(4.5)};
background: ${theme.colors.background.primary};
box-shadow: ${theme.shadows.z3};
padding: ${theme.spacing(0, 0, 0, 0.5)};
z-index: 100;
visibility: hidden;
width: ${showContextButton ? '80px' : '40px'};
width: ${showContextButton ? theme.spacing(10) : theme.spacing(5)};
`,
logRowMenuCell: css`
position: absolute;
right: ${isInDashboard ? '40px' : `calc(75px + ${theme.spacing()} + ${showContextButton ? '80px' : '40px'})`};
margin-top: -1px;
margin-top: -${theme.spacing(0.125)};
`,
};
};

12
public/app/features/logs/components/getLogRowStyles.ts
View File

@ -83,7 +83,7 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
`,
logsRowLevel: css`
label: logs-row__level;
max-width: 10px;
max-width: ${theme.spacing(1.25)};
cursor: default;
&::after {
content: '';
@ -92,7 +92,7 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
top: 1px;
bottom: 1px;
width: 3px;
left: 4px;
left: ${theme.spacing(0.5)};
background-color: ${logColor};
}
`,
@ -130,8 +130,8 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
label: logs-row-details-table;
border: 1px solid ${theme.colors.border.medium};
padding: 0 ${theme.spacing(1)} ${theme.spacing(1)};
border-radius: 3px;
margin: 20px 8px 20px 16px;
border-radius: ${theme.shape.borderRadius(1.5)};
margin: ${theme.spacing(2.5)} ${theme.spacing(1)} ${theme.spacing(2.5)} ${theme.spacing(2)};
cursor: default;
`,
logDetailsTable: css`
@ -146,8 +146,8 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
label: logs-row-details__icon;
position: relative;
color: ${theme.v1.palette.gray3};
padding-top: 6px;
padding-left: 6px;
padding-top: ${theme.spacing(0.75)};
padding-left: ${theme.spacing(0.75)};
`,
logDetailsLabel: css`
label: logs-row-details__label;