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

DashboardSettings: Slight design tweak to fix page toolbar padding and align design (#33575)

Browse Source 
* DashboardSettings: Slight design tweak to fix page toolbar padding and align design

* Fixed font weight

* Removed comment

* Update
This commit is contained in:
Torkel Ödegaard 2021-04-30 17:21:18 +02:00 committed by GitHub
parent 65673857b6
commit 9b60f8c404
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@ import { AnnotationsSettings } from './AnnotationsSettings';
import { LinksSettings } from './LinksSettings'; import { LinksSettings } from './LinksSettings';
import { VersionsSettings } from './VersionsSettings'; import { VersionsSettings } from './VersionsSettings';
import { JsonEditorSettings } from './JsonEditorSettings'; import { JsonEditorSettings } from './JsonEditorSettings';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaThemeV2 } from '@grafana/data';
import { locationService } from '@grafana/runtime'; import { locationService } from '@grafana/runtime';
export interface Props { export interface Props {
@ -145,7 +145,7 @@ export class DashboardSettings extends PureComponent<Props> {
const currentPage = pages.find((page) => page.id === editview) ?? pages[0]; const currentPage = pages.find((page) => page.id === editview) ?? pages[0];
const canSaveAs = contextSrv.hasEditPermissionInFolders; const canSaveAs = contextSrv.hasEditPermissionInFolders;
const canSave = dashboard.meta.canSave; const canSave = dashboard.meta.canSave;
const styles = getStyles(config.theme); const styles = getStyles(config.theme2);
return ( return (
<div className="dashboard-settings"> <div className="dashboard-settings">
@ -183,23 +183,24 @@ export class DashboardSettings extends PureComponent<Props> {
} }
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => ({ const getStyles = stylesFactory((theme: GrafanaThemeV2) => ({
scrollInner: css` scrollInner: css`
min-width: 100%; min-width: 100%;
min-height: 100%; min-height: 100%;
display: flex;
`, `,
settingsWrapper: css` settingsWrapper: css`
background: ${theme.colors.bg1}; margin: ${theme.spacing(2)};
display: flex; display: flex;
min-height: 100%; flex-grow: 1;
width: 100%;
`, `,
settingsContent: css` settingsContent: css`
flex-grow: 1; flex-grow: 1;
min-width: 0;
height: 100%; height: 100%;
padding: 32px; padding: 32px;
max-width: 1100px; border: 1px solid ${theme.colors.border.weak};
background: ${theme.colors.background.primary};
border-radius: ${theme.shape.borderRadius()};
`, `,
settingsContentFullWidth: css` settingsContentFullWidth: css`
flex-grow: 1; flex-grow: 1;

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

@ -21,10 +21,9 @@
} }
.dashboard-settings__aside { .dashboard-settings__aside {
padding: 32px 0 0 32px;
background: $dashboard-bg;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: $spacer;
} }
.dashboard-settings__aside-header { .dashboard-settings__aside-header {
@ -56,14 +55,26 @@
.dashboard-settings__nav-item { .dashboard-settings__nav-item {
padding: 8px 40px 8px 8px; padding: 8px 40px 8px 8px;
color: $text-color; color: $text-color-weak;
font-size: $font-size-md; font-size: $font-size-md;
line-height: 20px; line-height: 20px;
position: relative;
@include left-brand-border; @include left-brand-border;
&.active { &.active {
@include left-brand-border-gradient(); color: $text-color;
background: $panel-bg; font-weight: $font-weight-semi-bold;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
border-radius: 4px;
background: $brand-gradient-vertical;
}
} }
.gicon { .gicon {