Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 81b96c2

Browse files
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 37 additions & 36 deletions
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

Lines changed: 39 additions & 38 deletions
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

Lines changed: 2 additions & 0 deletions
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

Lines changed: 13 additions & 3 deletions
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

Lines changed: 3 additions & 3 deletions
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

Lines changed: 10 additions & 10 deletions
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

Lines changed: 90 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /