IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-10 07:35:45 -06:00
Code Issues Packages Projects Releases Wiki Activity

PageToolbar: add bottom padding (#34602)

Browse Source 
* fix(pagetoolbar): pad elements top and bottom to keep vertical align and wrapper padding

* fix(sidemenu): prevent mobile sidemenu squashing dashboard, vertically align mobile sidemenu icon

* fix(dashboardsettings): prevent subheader overlap

* fix(pagetoolbar): center align all toolbar elements vertically

* refactor(pagetoolbar): combine vertical paddings to bring back original padding values

* refactor: update padding values for components that use PageToolbar

* fix(playlists): update Empty cta link route to prevent 404

* test(dashboard): update snapshot
This commit is contained in:
Jack Westbrook 2021-05-26 10:49:39 +02:00 committed by GitHub
parent 987bffe482
commit ad3b0b2272
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 61 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
View File

@ -54,14 +54,13 @@ export const PageToolbar: FC<Props> = React.memo(
return (
<div className={mainStyle}>
<div className={styles.toolbarLeft}>
{pageIcon && !onGoBack && (
<div className={styles.pageIcon}>
<Icon name={pageIcon} size="lg" />
</div>
)}
{onGoBack && (
<div className={styles.goBackButton}>
<div className={styles.pageIcon}>
<IconButton
name="arrow-left"
tooltip="Go back (Esc)"
@ -73,26 +72,24 @@ export const PageToolbar: FC<Props> = React.memo(
/>
</div>
)}
<div className={styles.titleWrapper}>
{parent && onClickParent && (
<button onClick={onClickParent} className={cx(styles.titleLink, styles.parentLink)}>
<button onClick={onClickParent} className={cx(styles.titleText, styles.parentLink)}>
{parent} <span className={styles.parentIcon}>/</span>
</button>
)}
{onClickTitle && (
<button onClick={onClickTitle} className={styles.titleLink}>
<button onClick={onClickTitle} className={styles.titleText}>
{title}
</button>
)}
{!onClickTitle && <div className={styles.titleText}>{title}</div>}
</div>
{leftItems?.map((child, index) => (
<div className={styles.leftActionItem} key={index}>
{child}
</div>
))}
</div>
<div className={styles.spacer}></div>
<div className={styles.spacer} />
{React.Children.toArray(children)
.filter(Boolean)
.map((child, index) => {
@ -114,7 +111,7 @@ const getStyles = (theme: GrafanaTheme2) => {
const titleStyles = `
font-size: ${typography.size.lg};
padding-left: ${spacing(1)};
padding: ${spacing(0.5, 1, 0.5, 1)};
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@ -131,71 +128,51 @@ const getStyles = (theme: GrafanaTheme2) => {
return {
toolbar: css`
display: flex;
align-items: center;
background: ${theme.colors.background.canvas};
justify-content: flex-end;
flex-wrap: wrap;
padding: ${theme.spacing(1, 2, 0, 2)};
`,
toolbarLeft: css`
display: flex;
flex-grow: 1;
min-width: 0;
flex-wrap: wrap;
justify-content: flex-end;
padding: ${theme.spacing(1.5, 2)};
`,
spacer: css`
flex-grow: 1;
`,
pageIcon: css`
padding-top: ${spacing(1)};
align-items: center;
display: none;
@media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
display: flex;
align-items: center;
}
`,
titleWrapper: css`
display: flex;
align-items: center;
padding-top: ${spacing(1)};
padding-right: ${spacing(1)};
min-width: 0;
overflow: hidden;
`,
goBackButton: css`
position: relative;
top: 8px;
`,
parentIcon: css`
margin-left: 4px;
margin-left: ${theme.spacing(0.5)};
`,
titleText: css`
${titleStyles};
`,
titleLink: css`
${titleStyles};
`,
parentLink: css`
display: none;
padding-right: 0;
@media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
display: inline-block;
display: unset;
}
`,
actionWrapper: css`
padding-left: ${spacing(1)};
padding-top: ${spacing(1)};
padding: ${spacing(0.5, 0, 0.5, 1)};
`,
leftActionItem: css`
display: none;
height: 40px;
position: relative;
top: 5px;
align-items: center;
padding-left: ${spacing(0.5)};
@media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
align-items: center;
display: flex;
padding-left: ${spacing(0.5)};
}
`,
};

2
public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
View File

@ -151,7 +151,7 @@ const getStyles = (theme: GrafanaTheme2) => {
background: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.weak};
border-radius: ${theme.shape.borderRadius()};
margin: ${theme.spacing(2)};
margin: ${theme.spacing(0, 2, 2)};
overflow: hidden;
flex: 1;
`,

2
public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
View File

@ -185,7 +185,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
display: flex;
`,
settingsWrapper: css`
margin: ${theme.spacing(2)};
margin: ${theme.spacing(0, 2, 2)};
display: flex;
flex-grow: 1;
`,

2
public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx
View File

@ -67,7 +67,7 @@ const getStyles = (theme: GrafanaTheme) => {
display: flex;
flex: 1 1 0;
flex-direction: column;
padding: ${theme.spacing.md} 0 0 0;
padding: 0;
`,
optionsWrapper: css`
flex-grow: 1;

2
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
View File

@ -526,7 +526,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
`,
panelToolbar: css`
display: flex;
padding: ${paneSpacing} 0 ${paneSpacing} ${paneSpacing};
padding: 0 0 ${paneSpacing} ${paneSpacing};
justify-content: space-between;
flex-wrap: wrap;
`,

9
public/app/features/dashboard/containers/DashboardPage.tsx
View File

@ -289,7 +289,8 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
render() {
const { dashboard, isInitSlow, initError, isPanelEditorOpen, queryParams, theme } = this.props;
const { editPanel, viewPanel, scrollTop, updateScrollTop } = this.state;
const styles = getStyles(theme);
const kioskMode = getKioskMode(queryParams.kiosk);
const styles = getStyles(theme, kioskMode);
if (!dashboard) {
if (isInitSlow) {
@ -302,7 +303,6 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
// Only trigger render when the scroll has moved by 25
const approximateScrollTop = Math.round(scrollTop / 25) * 25;
const inspectPanel = this.getInspectPanel();
const kioskMode = getKioskMode(queryParams.kiosk);
return (
<div className={styles.dashboardContainer}>
@ -372,7 +372,8 @@ const mapDispatchToProps = {
/*
* Styles
*/
export const getStyles = stylesFactory((theme: GrafanaTheme2) => {
export const getStyles = stylesFactory((theme: GrafanaTheme2, kioskMode) => {
const contentPadding = kioskMode !== KioskMode.Full ? theme.spacing(0, 2, 2) : theme.spacing(2);
return {
dashboardContainer: css`
position: absolute;
@ -391,7 +392,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2) => {
display: flex;
`,
dashboardContent: css`
padding: ${theme.spacing(2)};
padding: ${contentPadding};
flex-basis: 100%;
flex-grow: 1;
`,

4
public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
View File

@ -128,7 +128,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1`
updateAfterMountMs={500}
>
<div
className="css-50qyg5"
className="css-1xodasp"
>
<div
aria-label="Dashboard submenu"
@ -507,7 +507,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
updateAfterMountMs={500}
>
<div
className="css-50qyg5"
className="css-1xodasp"
>
<div
aria-label="Dashboard submenu"

2
public/app/features/playlist/PlaylistPage.tsx
View File

@ -32,7 +32,7 @@ export const PlaylistPage: FC<Props> = ({ navModel }) => {
<EmptyListCTA
title="There are no playlists created yet"
buttonIcon="plus"
buttonLink="playlists/create"
buttonLink="playlists/new"
buttonTitle="Create Playlist"
proTip="You can use playlists to cycle dashboards on TVs without user control"
proTipLink="http://docs.grafana.org/reference/playlist/"

2
public/sass/components/_dashboard_settings.scss
View File

@ -49,8 +49,6 @@
.dashboard-settings__subheader {
color: $text-muted;
font-style: italic;
position: relative;
top: -$space-lg;
}
.dashboard-settings__nav-item {

4
public/sass/components/_sidemenu.scss
View File

@ -207,7 +207,7 @@ li.sidemenu-org-switcher {
background: $side-menu-bg-mobile;
height: auto;
box-shadow: $side-menu-shadow;
position: relative;
position: absolute;
z-index: $zindex-sidemenu;
}
@ -233,7 +233,7 @@ li.sidemenu-org-switcher {
}
.sidemenu__logo_small_breakpoint {
padding: 13px;
padding: 16px 13px;
display: flex;
flex-direction: row;
justify-content: space-between;