public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

(cherry picked from commit 8ced249c91)

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
This commit is contained in:
Grot (@grafanabot)
2021-05-27 18:38:55 +02:00
committed by GitHub
co-authored by Jack Westbrook
parent ed29c58d8b
commit 5bf678bcf0
2 changed files with 86 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+37 -30
View File
@@ -136,38 +136,40 @@ export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard })
const copiedPanelPlugins = useMemo(() => getCopiedPanelPlugins(), []); const copiedPanelPlugins = useMemo(() => getCopiedPanelPlugins(), []);
return ( return (
<div className={cx('panel-container', styles.wrapper)}> <div className={styles.wrapper}>
<AddPanelWidgetHandle onCancel={onCancelAddPanel} onBack={addPanelView ? onBack : undefined} styles={styles}> <div className={cx('panel-container', styles.callToAction)}>
{addPanelView ? 'Add panel from panel library' : 'Add panel'} <AddPanelWidgetHandle onCancel={onCancelAddPanel} onBack={addPanelView ? onBack : undefined} styles={styles}>
</AddPanelWidgetHandle> {addPanelView ? 'Add panel from panel library' : 'Add panel'}
{addPanelView ? ( </AddPanelWidgetHandle>
<LibraryPanelsSearch onClick={onAddLibraryPanel} variant={LibraryPanelsSearchVariant.Tight} showPanelFilter /> {addPanelView ? (
) : ( <LibraryPanelsSearch onClick={onAddLibraryPanel} variant={LibraryPanelsSearchVariant.Tight} showPanelFilter />
<div className={styles.actionsWrapper}> ) : (
<div className={styles.actionsRow}> <div className={styles.actionsWrapper}>
<div onClick={() => onCreateNewPanel()} aria-label={selectors.pages.AddDashboard.addNewPanel}> <div className={styles.actionsRow}>
<Icon name="file-blank" size="xl" /> <div onClick={() => onCreateNewPanel()} aria-label={selectors.pages.AddDashboard.addNewPanel}>
Add an empty panel <Icon name="file-blank" size="xl" />
</div> Add an empty panel
<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 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>
</div> </div>
); );
}; };
@@ -213,7 +215,12 @@ const getStyles = (theme: GrafanaTheme) => {
`; `;
return { return {
// wrapper is used to make sure box-shadow animation isn't cut off in dashboard page
wrapper: css` wrapper: css`
height: 100%;
padding-top: ${theme.spacing.xs};
`,
callToAction: css`
overflow: hidden; overflow: hidden;
outline: 2px dotted transparent; outline: 2px dotted transparent;
outline-offset: 2px; outline-offset: 2px;
public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
+49 -44
View File
@@ -2,60 +2,65 @@
exports[`Render should render component 1`] = ` exports[`Render should render component 1`] = `
<div <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 <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 <div
className="css-l02n0m" className="css-gxxmom"
> >
<div <div
aria-label="Add new panel" className="css-l02n0m"
onClick={[Function]}
> >
<Icon <div
name="file-blank" aria-label="Add new panel"
size="xl" onClick={[Function]}
/> >
Add an empty panel <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>
<div <div
onClick={[Function]} className="css-l02n0m"
> >
<Icon <div
name="wrap-text" onClick={[Function]}
size="xl" >
/> <Icon
Add a new row name="book-open"
</div> size="xl"
</div> />
<div Add a panel from the panel library
className="css-l02n0m" </div>
>
<div
onClick={[Function]}
>
<Icon
name="book-open"
size="xl"
/>
Add a panel from the panel library
</div> </div>
</div> </div>
</div> </div>