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

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

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

@ -21,10 +21,9 @@
}
.dashboard-settings__aside {
padding: 32px 0 0 32px;
background: $dashboard-bg;
display: flex;
flex-direction: column;
margin-top: $spacer;
}
.dashboard-settings__aside-header {
@ -56,14 +55,26 @@
.dashboard-settings__nav-item {
padding: 8px 40px 8px 8px;
color: $text-color;
color: $text-color-weak;
font-size: $font-size-md;
line-height: 20px;
position: relative;
@include left-brand-border;
&.active {
@include left-brand-border-gradient();
background: $panel-bg;
color: $text-color;
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 {