Skip to content

Commit 3be9e8e

Browse files
committed
Merge branch 'dash-edit-mode' of github.com:grafana/grafana into dash-edit-mode
2 parents 2fbe8cd + d9f99eb commit 3be9e8e

File tree

2 files changed

+90
-14
lines changed

2 files changed

+90
-14
lines changed

public/app/features/dashboard/row/options.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="dash-row-options">
2-
<div class="gf-form-group section">
2+
<div class="gf-form section">
33
<!-- <h5 class="section&#45;heading">Options</h5> -->
44
<div class="gf-form-inline">
55
<div class="gf-form">
@@ -23,7 +23,7 @@
2323
</div>
2424
</div>
2525

26-
<div class="gf-form-group section">
26+
<div class="gf-form section">
2727
<!-- <h5 class="section&#45;heading">Row Templating</h5> -->
2828

2929
<div class="gf-form">

public/sass/pages/_dashboard.scss

Lines changed: 88 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,13 @@ div.flot-text {
216216
margin-right: $panel-margin;
217217
margin-left: 0;
218218

219+
&:hover {
220+
.dash-row-header-actions {
221+
display: block;
222+
opacity: 0;
223+
animation: fadeIn 150ms linear 100ms forwards;
224+
}
225+
}
219226

220227
.h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem }
221228
.h2 { font-size: 2.4rem; line-height: 3.5rem; }
@@ -267,6 +274,9 @@ div.flot-text {
267274
.dash-row-header-action-show-options {
268275
color: $link-color;
269276
}
277+
.dash-row-header {
278+
border-bottom: none;
279+
}
270280
}
271281

272282
.dash-row-show-add-panel {
@@ -276,6 +286,9 @@ div.flot-text {
276286
.dash-row-header-action--add-panel {
277287
color: $link-color;
278288
}
289+
.dash-row-header {
290+
border-bottom: none;
291+
}
279292
}
280293

281294
.dash-row-show-title {
@@ -302,21 +315,55 @@ div.flot-text {
302315
.dash-edit-mode {
303316
.dash-row-header {
304317
display: flex;
305-
&:hover {
306-
.dash-row-header-actions {
307-
display: block;
308-
}
318+
border-bottom: 1px solid $dark-4;
319+
border-right: 1px solid $dark-4;
320+
margin-right: 0;
321+
.dash-row-header-actions {
322+
display: block;
309323
}
310324
}
325+
.dash-row-show-add-panel {
326+
.dash-row-header {
327+
border-bottom: none;
328+
}
329+
}
330+
.dash-row-show-options {
331+
.dash-row-header {
332+
border-bottom: none;
333+
}
334+
}
335+
.dash-row-header::after {
336+
content: ' ';
337+
border-top: 1px solid $dark-4;
338+
width: 15px;
339+
position: relative;
340+
}
311341
.dash-row {
312-
border-left: 1px solid $dark-4;
342+
margin-bottom: $spacer*2;
313343
}
314344
.dash-row-header-title {
345+
border-left: 1px solid $dark-4;
346+
}
347+
.dash-row-header-title::before {
348+
content: ' ';
315349
border-top: 1px solid $dark-4;
350+
width: 15px;
351+
position: absolute;
352+
margin: -9px 0 0 -9px;
316353
}
317354
.panels-wrapper {
318-
margin-left: $panel-margin;
355+
padding: $panel-margin*2 $panel-margin 0 $panel-margin*2;
356+
border-left: 1px solid $dark-4;
357+
border-right: 1px solid $dark-4;
319358
}
359+
.panels-wrapper::after {
360+
content: ' ';
361+
border-bottom: 1px solid $dark-4;
362+
width: 15px;
363+
position: absolute;
364+
margin: 0 0 0 -12px;
365+
}
366+
320367
.add-row-panel-hint {
321368
display: block;
322369
}
@@ -339,18 +386,33 @@ div.flot-text {
339386
}
340387

341388
.dash-row-options {
342-
background: $panel-bg;
343-
border: $panel-border;
344-
margin: 0 0 $panel-margin*2 $panel-margin*2;
345-
padding: $spacer*1.5;
389+
border-left: $panel-border;
390+
border-bottom: $panel-border;
391+
border-right: $panel-border;
392+
margin: 0 0 $panel-margin*2 0;
393+
padding: $panel-margin*2;
394+
box-shadow: 0px 3px 7px -3px $black;
346395
}
347396

348397
.dash-row-add-panel {
349-
margin: 0;
398+
border-left: $panel-border;
399+
border-bottom: $panel-border;
400+
border-right: $panel-border;
401+
margin: 0 0 $panel-margin*2 0;
350402
padding: $panel-margin*2;
351403
// display: flex;
352404
// align-items: flex-start;
353405
// position: relative;
406+
box-shadow: 0px 3px 7px -3px $black;
407+
}
408+
409+
.dash-edit-mode {
410+
.dash-row-options {
411+
margin-bottom: 0;
412+
}
413+
.dash-row-add-panel {
414+
margin-bottom: 0;
415+
}
354416
}
355417

356418
.add-panel-panels-scroll {
@@ -383,8 +445,22 @@ div.flot-text {
383445
text-overflow: ellipsis;
384446
overflow: hidden;
385447
white-space: nowrap;
448+
font-size: $font-size-sm;
386449
}
387450

388451
.add-panel-item-img {
389-
width: 3rem;
452+
width: 2rem;
390453
}
454+
455+
// Animations
456+
457+
@keyframes fadeIn {
458+
from {
459+
opacity: 0;
460+
}
461+
462+
to {
463+
opacity: 1;
464+
}
465+
}
466+

0 commit comments

Comments
 (0)