Skip to content

Commit 81b96c2

Browse files
GurinderRawalaGurinderRawala
committed
dashboard style changes (#179)
1 parent 732f208 commit 81b96c2

File tree

9 files changed

+196
-92
lines changed

9 files changed

+196
-92
lines changed

‎packages/grafana-data/src/themes/createColors.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
220220
};
221221

222222
background = {
223-
primary: '#FAFAFA',
223+
primary: '#FFFFFF',
224224
canvas: '#FFFFFF',
225225
secondary: '#FAFAFA',
226226
};

‎packages/grafana-data/src/themes/createShape.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export interface ThemeShapeInput {
1919
}
2020

2121
export function createShape(options: ThemeShapeInput): ThemeShape {
22-
const baseBorderRadius = options.borderRadius ?? 2;
22+
const baseBorderRadius = options.borderRadius ?? 6;
2323

2424
const radius = {
2525
default: '2px',

‎packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx

+37-36
Original file line numberDiff line numberDiff line change
@@ -277,42 +277,43 @@ const useTimeOption = (raw: RawTimeRange, quickOptions: TimeOption[]): TimeOptio
277277

278278
const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRanges, isContainerTall, isFullscreen) => {
279279
return {
280-
container: css`
281-
background: ${theme.colors.background.primary};
282-
box-shadow: ${theme.shadows.z3};
283-
position: absolute;
284-
z-index: ${theme.zIndex.dropdown};
285-
width: ${isFullscreen ? '546px' : '262px'};
286-
top: 116%;
287-
border-radius: 2px;
288-
border: 1px solid ${theme.colors.border.weak};
289-
${isReversed ? 'left' : 'right'}: 0;
290-
`,
291-
body: css`
292-
display: flex;
293-
flex-direction: row-reverse;
294-
height: ${isContainerTall ? '281px' : '217px'};
295-
`,
296-
leftSide: css`
297-
display: flex;
298-
flex-direction: column;
299-
border-right: ${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`};
300-
width: ${!hideQuickRanges ? '50%' : '100%'};
301-
overflow: auto;
302-
order: ${isReversed ? 1 : 0};
303-
`,
304-
rightSide: css`
305-
width: ${isFullscreen ? '50%' : '100%'}; !important;
306-
border-right: ${isReversed ? `1px solid ${theme.colors.border.weak}` : 'none'};
307-
display: flex;
308-
flex-direction: column;
309-
`,
310-
timeRangeFilter: css`
311-
padding: ${theme.spacing(1)};
312-
`,
313-
spacing: css`
314-
margin-top: 16px;
315-
`,
280+
container: css({
281+
background: theme.colors.background.primary,
282+
boxShadow: theme.shadows.z3,
283+
width: `${isFullscreen ? '546px' : '262px'}`,
284+
borderRadius: '6px',
285+
border: `1px solid ${theme.colors.border.weak}`,
286+
[`${isReversed ? 'left' : 'right'}`]: 0,
287+
}),
288+
body: css({
289+
display: 'flex',
290+
flexDirection: 'row-reverse',
291+
height: `${isContainerTall ? '281px' : '217px'}`,
292+
maxHeight: '100vh',
293+
'& button': {
294+
borderRadius: '6px',
295+
},
296+
}),
297+
leftSide: css({
298+
display: 'flex',
299+
flexDirection: 'column',
300+
borderRight: `${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`}`,
301+
width: `${!hideQuickRanges ? '60%' : '100%'}`,
302+
overflow: 'hidden',
303+
order: isReversed ? 1 : 0,
304+
}),
305+
rightSide: css({
306+
width: `${isFullscreen ? '40%' : '100%'}; !important`,
307+
borderRight: isReversed ? `1px solid ${theme.colors.border.weak}` : 'none',
308+
display: 'flex',
309+
flexDirection: 'column',
310+
}),
311+
timeRangeFilter: css({
312+
padding: theme.spacing(1),
313+
}),
314+
spacing: css({
315+
marginTop: '16px',
316+
}),
316317
};
317318
});
318319

‎packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx

+39-38
Original file line numberDiff line numberDiff line change
@@ -166,43 +166,44 @@ export const TimePickerFooter = (props: Props) => {
166166

167167
const getStyle = stylesFactory((theme: GrafanaTheme2) => {
168168
return {
169-
container: css`
170-
border-top: 1px solid ${theme.colors.border.weak};
171-
padding: 11px;
172-
display: flex;
173-
flex-direction: row;
174-
justify-content: space-between;
175-
align-items: center;
176-
height: 60px;
177-
`,
178-
editContainer: css`
179-
border-top: 1px solid ${theme.colors.border.weak};
180-
padding: 11px;
181-
justify-content: space-between;
182-
align-items: center;
183-
padding: 7px;
184-
`,
185-
spacer: css`
186-
margin-left: 7px;
187-
`,
188-
timeSettingContainer: css`
189-
padding-top: ${theme.spacing(1)};
190-
`,
191-
fiscalYearField: css`
192-
margin-bottom: 0px;
193-
`,
194-
timeZoneContainer: css`
195-
display: flex;
196-
flex-direction: row;
197-
justify-content: space-between;
198-
align-items: center;
199-
flex-grow: 1;
200-
`,
201-
timeZone: css`
202-
display: flex;
203-
flex-direction: row;
204-
align-items: baseline;
205-
flex-grow: 1;
206-
`,
169+
container: css({
170+
borderTop: `1px solid ${theme.colors.border.weak}`,
171+
padding: '11px',
172+
display: 'flex',
173+
flexDirection: 'row',
174+
justifyContent: 'space-between',
175+
alignItems: 'center',
176+
'& button': {
177+
borderRadius: '6px',
178+
},
179+
}),
180+
editContainer: css({
181+
borderTop: `1px solid ${theme.colors.border.weak}`,
182+
padding: '11px',
183+
justifyContent: 'space-between',
184+
alignItems: 'center',
185+
}),
186+
spacer: css({
187+
marginLeft: '7px',
188+
}),
189+
timeSettingContainer: css({
190+
paddingTop: theme.spacing(1),
191+
}),
192+
fiscalYearField: css({
193+
marginBottom: 0,
194+
}),
195+
timeZoneContainer: css({
196+
display: 'flex',
197+
flexDirection: 'row',
198+
justifyContent: 'space-between',
199+
alignItems: 'center',
200+
flexGrow: 1,
201+
}),
202+
timeZone: css({
203+
display: 'flex',
204+
flexDirection: 'row',
205+
alignItems: 'baseline',
206+
flexGrow: 1,
207+
}),
207208
};
208209
});

‎public/app/features/dashboard/dashgrid/DashboardGrid.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,8 @@ export class Component extends PureComponent<Props> {
153153
this.gridWidth = gridWidth;
154154
}
155155

156+
console.log('this.props.dashboard.panels', config.theme2.shape.radius.default);
157+
156158
for (const panel of this.props.dashboard.panels) {
157159
const panelClasses = classNames({ 'react-grid-item--fullscreen': panel.isViewing });
158160

‎public/microfrontends/fn_dashboard/index.html

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
1-
<!doctype html><html lang="en"><head><title>CodeRabbit Micro-frontend</title><base href="/"/></head><body class="theme-light app-grafana"><div id="grafanaRoot"></div><script nonce="">window.fnData = {
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>CodeRabbit Micro-frontend</title>
5+
<base href="/" />
6+
</head>
7+
8+
<body class="theme-light app-grafana">
9+
<div id="grafanaRoot"></div>
10+
<script nonce="">
11+
window.fnData = {
212
themePaths: {
3-
light: '../../../public/build/grafana.light.919a2bf9d8d520de3b33.css',
4-
dark: '../../../public/build/grafana.dark.341ec2d9d1b948e9351a.css',
13+
light: '../../../public/build/grafana.light.f8726a58109a7bb444b7.css',
14+
dark: '../../../public/build/grafana.dark.64551cb66c1119442933.css',
515
},
616
};</script><script nonce="" src="../../../public/build/runtime.e887ee410b04048b93bb.js"></script><script nonce="" src="../../../public/build/9767.5d11687466af2e323217.js"></script><script nonce="" src="../../../public/build/6510.3c0ff62c6be1dabb1076.js"></script><script nonce="" src="../../../public/build/736.a7c1a735dcc89552444b.js"></script><script nonce="" src="../../../public/build/3880.2244b9f025ace4c25949.js"></script><script nonce="" src="../../../public/build/4000.3d7b8c06970ead030ece.js"></script><script nonce="" src="../../../public/build/4161.5d0fee404a7937384676.js"></script><script nonce="" src="../../../public/build/6406.78c224d72f4c255d0cd7.js"></script><script nonce="" src="../../../public/build/2253.8557a4046de15bdfe5f5.js"></script><script nonce="" src="../../../public/build/8200.4f6046fffc2bc4c0e99c.js"></script><script nonce="" src="../../../public/build/9334.3f47b65f852b47933f4e.js"></script><script nonce="" src="../../../public/build/5670.1b6e072b061193be2b12.js"></script><script nonce="" src="../../../public/build/2954.fb78b2a299991850d30f.js"></script><script nonce="" src="../../../public/build/8629.d45179333f04e81d2640.js"></script><script nonce="" src="../../../public/build/5446.061625ba71ddd711a34f.js"></script><script nonce="" src="../../../public/build/fn_dashboard.51fd59d60567e892f3c0.js"></script></body></html>

‎public/sass/_variables.generated.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -132,9 +132,9 @@ $headings-line-height: 1.5 !default;
132132

133133
$border-width: 1px !default;
134134

135-
$border-radius: 2px !default;
136-
$border-radius-lg: 6px !default;
137-
$border-radius-sm: 2px !default;
135+
$border-radius: 6px !default;
136+
$border-radius-lg: 18px !default;
137+
$border-radius-sm: 6px !default;
138138

139139
// Page
140140

‎public/sass/_variables.light.generated.scss

+10-10
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ $gray-7: #fbfbfb;
5858
$white: #ffffff;
5959

6060
$layer0: #FFFFFF;
61-
$layer1: #FAFAFA;
61+
$layer1: #FFFFFF;
6262
$layer2: #FAFAFA;
6363

6464
$divider: rgba(45, 51, 62, 0.12);
@@ -128,7 +128,7 @@ $hr-border-color: $gray-4 !default;
128128

129129
// Panel
130130
// -------------------------
131-
$panel-bg: #FAFAFA;
131+
$panel-bg: #FFFFFF;
132132
$panel-border: 1px solid rgba(45, 51, 62, 0.12);
133133
$panel-header-hover-bg: rgba(45, 51, 62, 0.12);
134134
$panel-box-shadow: none;
@@ -145,7 +145,7 @@ $divider-border-color: $gray-2;
145145
$tight-form-func-bg: #FAFAFA;
146146
$tight-form-func-highlight-bg: #f5f5f5;
147147

148-
$modal-backdrop-bg: #FAFAFA;
148+
$modal-backdrop-bg: #FFFFFF;
149149
$code-tag-bg: $gray-6;
150150
$code-tag-border: $gray-4;
151151

@@ -170,8 +170,8 @@ $scrollbarBorder: $gray-7;
170170
// -------------------------
171171
$table-bg-accent: #FAFAFA;
172172
$table-border: rgba(45, 51, 62, 0.30);
173-
$table-bg-odd: rgb(245, 245, 245);
174-
$table-bg-hover: rgb(237, 237, 237);
173+
$table-bg-odd: rgb(249, 249, 249);
174+
$table-bg-hover: rgb(242, 242, 242);
175175

176176
// Buttons
177177
// -------------------------
@@ -207,7 +207,7 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
207207

208208
// Forms
209209
// -------------------------
210-
$input-bg: #FAFAFA;
210+
$input-bg: #FFFFFF;
211211
$input-bg-disabled: rgba(45, 51, 62, 0.04);
212212

213213
$input-color: #101828;
@@ -229,7 +229,7 @@ $typeahead-selected-color: $yellow;
229229

230230
// Dropdowns
231231
// -------------------------
232-
$dropdownBackground: #FAFAFA;
232+
$dropdownBackground: #FFFFFF;
233233
$dropdownBorder: rgba(45, 51, 62, 0.12);
234234
$dropdownDividerTop: rgba(45, 51, 62, 0.12);
235235
$dropdownDividerBottom: rgba(45, 51, 62, 0.12);
@@ -263,7 +263,7 @@ $side-menu-header-color: #e9edf2;
263263

264264
// Menu dropdowns
265265
// -------------------------
266-
$menu-dropdown-bg: #FAFAFA;
266+
$menu-dropdown-bg: #FFFFFF;
267267
$menu-dropdown-hover-bg: rgba(45, 51, 62, 0.12);
268268
$menu-dropdown-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
269269

@@ -289,7 +289,7 @@ $tooltipArrowColor: #FAFAFA;
289289
$tooltipBackgroundError: #E0226E;
290290
$tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2);
291291

292-
$popover-bg: #FAFAFA;
292+
$popover-bg: #FFFFFF;
293293
$popover-color: #101828;
294294
$popover-border-color: rgba(45, 51, 62, 0.12);
295295
$popover-header-bg: #FAFAFA;
@@ -305,7 +305,7 @@ $popover-error-bg: $btn-danger-bg;
305305
$popover-help-bg: $tooltipBackground;
306306
$popover-help-color: $tooltipColor;
307307

308-
$popover-code-bg: #FAFAFA;
308+
$popover-code-bg: #FFFFFF;
309309
$popover-code-boxshadow: 0 0 5px $gray60;
310310

311311
// images

‎public/sass/pages/_dashboard.scss

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
.panel {
2+
height: 100%;
3+
}
4+
5+
.panel-height-helper {
6+
display: block;
7+
height: 100%;
8+
}
9+
10+
.panel-container {
11+
background-color: $panel-bg;
12+
border: $panel-border;
13+
position: relative;
14+
border-radius: 6px;
15+
height: 100%;
16+
width: 100%;
17+
display: flex;
18+
flex-direction: column;
19+
flex: 1 1 0;
20+
box-shadow: $panel-box-shadow;
21+
22+
&--transparent {
23+
background-color: transparent;
24+
border: 1px solid transparent;
25+
box-shadow: none;
26+
}
27+
28+
&:hover {
29+
.panel-menu-toggle {
30+
visibility: visible;
31+
transition: opacity 0.1s ease-in 0.2s;
32+
opacity: 1;
33+
}
34+
}
35+
36+
&--is-editing {
37+
height: auto;
38+
}
39+
40+
&--absolute {
41+
position: absolute;
42+
}
43+
}
44+
45+
.panel-content {
46+
padding: $panel-padding;
47+
width: 100%;
48+
flex-grow: 1;
49+
contain: strict;
50+
height: calc(100% - #{$panel-header-height});
51+
52+
&--no-padding {
53+
padding: 0;
54+
}
55+
}
56+
57+
div.flot-text {
58+
color: $text-color !important;
59+
}
60+
61+
.dashboard-solo {
62+
.footer,
63+
.sidemenu {
64+
display: none;
65+
}
66+
}
67+
68+
.template-variable {
69+
color: $variable;
70+
}
71+
72+
.panel-solo {
73+
position: fixed;
74+
bottom: 0;
75+
right: 0;
76+
margin: 0;
77+
left: 0;
78+
top: 0;
79+
width: '100%';
80+
height: '100%';
81+
82+
.panel-container {
83+
border: none;
84+
}
85+
86+
.panel-menu-toggle,
87+
.panel-menu {
88+
display: none;
89+
}
90+
}

0 commit comments

Comments
 (0)