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

Reduce spacing for Explore/Logs switches (#44935)

Browse Source
This commit is contained in:
Kristina 2022-02-08 08:21:34 -06:00 committed by GitHub
parent 6a7a486c6f
commit c5f0701707
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/components/Switch/Switch.tsx
View File

@ -47,12 +47,11 @@ export interface InlineSwitchProps extends Props {
}
export const InlineSwitch = React.forwardRef<HTMLInputElement, InlineSwitchProps>(
({ transparent, showLabel, label, value, id, ...props }, ref) => {
({ transparent, className, showLabel, label, value, id, ...props }, ref) => {
const theme = useTheme2();
const styles = getSwitchStyles(theme, transparent);
return (
<div className={styles.inlineContainer}>
<div className={cx(styles.inlineContainer, className)}>
{showLabel && (
<label
htmlFor={id}

45
public/app/features/explore/Logs.tsx
View File

@ -316,24 +316,43 @@ class UnthemedLogs extends PureComponent<Props, State> {
) : undefined}
<div className={styles.logOptions} ref={this.topLogsRef}>
<InlineFieldRow>
<InlineField label="Time" transparent>
<InlineSwitch value={showTime} onChange={this.onChangeTime} transparent id="show-time" />
<InlineField label="Time" className={styles.horizontalInlineLabel} transparent>
<InlineSwitch
value={showTime}
onChange={this.onChangeTime}
className={styles.horizontalInlineSwitch}
transparent
id="show-time"
/>
</InlineField>
<InlineField label="Unique labels" transparent>
<InlineSwitch value={showLabels} onChange={this.onChangeLabels} transparent id="unique-labels" />
<InlineField label="Unique labels" className={styles.horizontalInlineLabel} transparent>
<InlineSwitch
value={showLabels}
onChange={this.onChangeLabels}
className={styles.horizontalInlineSwitch}
transparent
id="unique-labels"
/>
</InlineField>
<InlineField label="Wrap lines" transparent>
<InlineSwitch value={wrapLogMessage} onChange={this.onChangewrapLogMessage} transparent id="wrap-lines" />
<InlineField label="Wrap lines" className={styles.horizontalInlineLabel} transparent>
<InlineSwitch
value={wrapLogMessage}
onChange={this.onChangewrapLogMessage}
className={styles.horizontalInlineSwitch}
transparent
id="wrap-lines"
/>
</InlineField>
<InlineField label="Prettify JSON" transparent>
<InlineField label="Prettify JSON" className={styles.horizontalInlineLabel} transparent>
<InlineSwitch
value={prettifyLogMessage}
onChange={this.onChangePrettifyLogMessage}
className={styles.horizontalInlineSwitch}
transparent
id="prettify"
/>
</InlineField>
<InlineField label="Dedup" transparent>
<InlineField label="Dedup" className={styles.horizontalInlineLabel} transparent>
<RadioButtonGroup
options={Object.values(LogsDedupStrategy).map((dedupType) => ({
label: capitalize(dedupType),
@ -452,8 +471,16 @@ const getStyles = (theme: GrafanaTheme2, wrapLogMessage: boolean) => {
headerButton: css`
margin: ${theme.spacing(0.5, 0, 0, 1)};
`,
horizontalInlineLabel: css`
> label {
margin-right: 0;
}
`,
horizontalInlineSwitch: css`
padding: 0 ${theme.spacing(1)} 0 0;
`,
radioButtons: css`
margin: 0 ${theme.spacing(1)};
margin: 0;
`,
logsSection: css`
display: flex;