IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 16:15:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

PanelEdit: Always have bottom border to make sections easier to see when expanded (#35565)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-06-14 12:41:09 +02:00 committed by GitHub
parent 75ff02a9fb
commit 7599ab8217
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
View File

@ -54,7 +54,6 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
const boxStyles = cx(
{
[styles.box]: true,
[styles.boxExpanded]: isExpanded,
[styles.boxNestedExpanded]: isNested && isExpanded,
},
className,
@ -93,13 +92,7 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
const getStyles = (theme: GrafanaTheme2) => {
return {
box: css`
border-bottom: 1px solid ${theme.colors.border.weak};
&:last-child {
border-bottom: none;
}
`,
boxExpanded: css`
border-bottom: 0;
border-top: 1px solid ${theme.colors.border.weak};
`,
boxNestedExpanded: css`
margin-bottom: ${theme.spacing(2)};

30
public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
View File

@ -7,14 +7,16 @@ import {
VariableSuggestionsScope,
DynamicConfigValue,
ConfigOverrideRule,
GrafanaTheme2,
} from '@grafana/data';
import { Container, fieldMatchersUI, ValuePicker } from '@grafana/ui';
import { fieldMatchersUI, useStyles2, ValuePicker } from '@grafana/ui';
import { OptionPaneRenderProps } from './types';
import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
import { DynamicConfigValueEditor } from './DynamicConfigValueEditor';
import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv';
import { OverrideCategoryTitle } from './OverrideCategoryTitle';
import { css } from '@emotion/css';
export function getFieldOverrideCategories(props: OptionPaneRenderProps): OptionsPaneCategoryDescriptor[] {
const categories: OptionsPaneCategoryDescriptor[] = [];
@ -208,7 +210,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
id: 'add button',
customRender: function renderAddButton() {
return (
<Container padding="md" key="Add override">
<AddOverrideButtonContainer key="Add override">
<ValuePicker
icon="plus"
label="Add field override"
@ -222,22 +224,12 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
.map<SelectableValue<string>>((i) => ({ label: i.name, value: i.id, description: i.description }))}
onChange={(value) => onOverrideAdd(value)}
/>
</Container>
</AddOverrideButtonContainer>
);
},
})
);
// <FeatureInfoBox
// title="Overrides"
// url={getDocsLink(DocsId.FieldConfigOverrides)}
// className={css`
// margin: ${theme.spacing.md};
// `}
// >
// Field override rules give you fine-grained control over how your data is displayed.
// </FeatureInfoBox>
return categories;
}
@ -257,3 +249,15 @@ function getOverrideProperties(registry: FieldConfigOptionsRegistry) {
};
});
}
function AddOverrideButtonContainer({ children }: { children: React.ReactNode }) {
const styles = useStyles2(getBorderTopStyles);
return <div className={styles}>{children}</div>;
}
function getBorderTopStyles(theme: GrafanaTheme2) {
return css({
borderTop: `1px solid ${theme.colors.border.weak}`,
padding: `${theme.spacing(2)}`,
});
}