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

AddPanelWidget: Add padding to prevent top being cut off (#34806)

Browse Source 
* fix(dashboardpage): add padding so add panel chrome isnt cut off

* fix(addpanelwidget): introduce wrapping element to cater for pulsate animation offset

* refactor(addpanelwidget): use spacing.xs rather than spacing.sm

* test(addpanelwidget): update snapshot
This commit is contained in:
Jack Westbrook
2021-05-27 15:28:09 +02:00
committed by GitHub
parent ec3f8ce04c
commit 8ced249c91
2 changed files with 86 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
View File

@@ -136,38 +136,40 @@ export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard })
const copiedPanelPlugins = useMemo(() => getCopiedPanelPlugins(), []);
return (
<div className={cx('panel-container', styles.wrapper)}>
<AddPanelWidgetHandle onCancel={onCancelAddPanel} onBack={addPanelView ? onBack : undefined} styles={styles}>
{addPanelView ? 'Add panel from panel library' : 'Add panel'}
</AddPanelWidgetHandle>
{addPanelView ? (
<LibraryPanelsSearch onClick={onAddLibraryPanel} variant={LibraryPanelsSearchVariant.Tight} showPanelFilter />
) : (
<div className={styles.actionsWrapper}>
<div className={styles.actionsRow}>
<div onClick={() => onCreateNewPanel()} aria-label={selectors.pages.AddDashboard.addNewPanel}>
<Icon name="file-blank" size="xl" />
Add an empty panel
</div>
<div onClick={onCreateNewRow}>
<Icon name="wrap-text" size="xl" />
Add a new row
</div>
</div>
<div className={styles.actionsRow}>
<div onClick={() => setAddPanelView(true)}>
<Icon name="book-open" size="xl" />
Add a panel from the panel library
</div>
{copiedPanelPlugins.length === 1 && (
<div onClick={() => onPasteCopiedPanel(copiedPanelPlugins[0])}>
<Icon name="clipboard-alt" size="xl" />
Paste panel from clipboard
<div className={styles.wrapper}>
<div className={cx('panel-container', styles.callToAction)}>
<AddPanelWidgetHandle onCancel={onCancelAddPanel} onBack={addPanelView ? onBack : undefined} styles={styles}>
{addPanelView ? 'Add panel from panel library' : 'Add panel'}
</AddPanelWidgetHandle>
{addPanelView ? (
<LibraryPanelsSearch onClick={onAddLibraryPanel} variant={LibraryPanelsSearchVariant.Tight} showPanelFilter />
) : (
<div className={styles.actionsWrapper}>
<div className={styles.actionsRow}>
<div onClick={() => onCreateNewPanel()} aria-label={selectors.pages.AddDashboard.addNewPanel}>
<Icon name="file-blank" size="xl" />
Add an empty panel
</div>
)}
<div onClick={onCreateNewRow}>
<Icon name="wrap-text" size="xl" />
Add a new row
</div>
</div>
<div className={styles.actionsRow}>
<div onClick={() => setAddPanelView(true)}>
<Icon name="book-open" size="xl" />
Add a panel from the panel library
</div>
{copiedPanelPlugins.length === 1 && (
<div onClick={() => onPasteCopiedPanel(copiedPanelPlugins[0])}>
<Icon name="clipboard-alt" size="xl" />
Paste panel from clipboard
</div>
)}
</div>
</div>
</div>
)}
)}
</div>
</div>
);
};
@@ -213,7 +215,12 @@ const getStyles = (theme: GrafanaTheme) => {
`;
return {
// wrapper is used to make sure box-shadow animation isn't cut off in dashboard page
wrapper: css`
height: 100%;
padding-top: ${theme.spacing.xs};
`,
callToAction: css`
overflow: hidden;
outline: 2px dotted transparent;
outline-offset: 2px;

93
public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
View File

@@ -2,60 +2,65 @@
exports[`Render should render component 1`] = `
<div
className="panel-container css-e4b3m6"
className="css-1q8dxo2"
>
<AddPanelWidgetHandle
onCancel={[Function]}
styles={
Object {
"actionsRow": "css-l02n0m",
"actionsWrapper": "css-gxxmom",
"backButton": "css-1cdxa9p",
"headerRow": "css-3sdqvi",
"noMargin": "css-u023fv",
"wrapper": "css-e4b3m6",
}
}
>
Add panel
</AddPanelWidgetHandle>
<div
className="css-gxxmom"
className="panel-container css-e4b3m6"
>
<AddPanelWidgetHandle
onCancel={[Function]}
styles={
Object {
"actionsRow": "css-l02n0m",
"actionsWrapper": "css-gxxmom",
"backButton": "css-1cdxa9p",
"callToAction": "css-e4b3m6",
"headerRow": "css-3sdqvi",
"noMargin": "css-u023fv",
"wrapper": "css-1q8dxo2",
}
}
>
Add panel
</AddPanelWidgetHandle>
<div
className="css-l02n0m"
className="css-gxxmom"
>
<div
aria-label="Add new panel"
onClick={[Function]}
className="css-l02n0m"
>
<Icon
name="file-blank"
size="xl"
/>
Add an empty panel
<div
aria-label="Add new panel"
onClick={[Function]}
>
<Icon
name="file-blank"
size="xl"
/>
Add an empty panel
</div>
<div
onClick={[Function]}
>
<Icon
name="wrap-text"
size="xl"
/>
Add a new row
</div>
</div>
<div
onClick={[Function]}
className="css-l02n0m"
>
<Icon
name="wrap-text"
size="xl"
/>
Add a new row
</div>
</div>
<div
className="css-l02n0m"
>
<div
onClick={[Function]}
>
<Icon
name="book-open"
size="xl"
/>
Add a panel from the panel library
<div
onClick={[Function]}
>
<Icon
name="book-open"
size="xl"
/>
Add a panel from the panel library
</div>
</div>
</div>
</div>