IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dash-edit-mode' of github.com:grafana/grafana into dash-edit-mode

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-10-29 11:51:18 +02:00
commit 3be9e8e022
2 changed files with 90 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/features/dashboard/row/options.html
View File

@ -1,5 +1,5 @@
<div class="dash-row-options">
<div class="gf-form-group section">
<div class="gf-form section">
<!-- <h5 class="section&#45;heading">Options</h5> -->
<div class="gf-form-inline">
<div class="gf-form">
@ -23,7 +23,7 @@
</div>
</div>
<div class="gf-form-group section">
<div class="gf-form section">
<!-- <h5 class="section&#45;heading">Row Templating</h5> -->
<div class="gf-form">

100
public/sass/pages/_dashboard.scss
View File

@ -216,6 +216,13 @@ div.flot-text {
margin-right: $panel-margin;
margin-left: 0;
&:hover {
.dash-row-header-actions {
display: block;
opacity: 0;
animation: fadeIn 150ms linear 100ms forwards;
}
}
.h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem }
.h2 { font-size: 2.4rem; line-height: 3.5rem; }
@ -267,6 +274,9 @@ div.flot-text {
.dash-row-header-action-show-options {
color: $link-color;
}
.dash-row-header {
border-bottom: none;
}
}
.dash-row-show-add-panel {
@ -276,6 +286,9 @@ div.flot-text {
.dash-row-header-action--add-panel {
color: $link-color;
}
.dash-row-header {
border-bottom: none;
}
}
.dash-row-show-title {
@ -302,21 +315,55 @@ div.flot-text {
.dash-edit-mode {
.dash-row-header {
display: flex;
&:hover {
.dash-row-header-actions {
display: block;
}
border-bottom: 1px solid $dark-4;
border-right: 1px solid $dark-4;
margin-right: 0;
.dash-row-header-actions {
display: block;
}
}
.dash-row-show-add-panel {
.dash-row-header {
border-bottom: none;
}
}
.dash-row-show-options {
.dash-row-header {
border-bottom: none;
}
}
.dash-row-header::after {
content: ' ';
border-top: 1px solid $dark-4;
width: 15px;
position: relative;
}
.dash-row {
border-left: 1px solid $dark-4;
margin-bottom: $spacer*2;
}
.dash-row-header-title {
border-left: 1px solid $dark-4;
}
.dash-row-header-title::before {
content: ' ';
border-top: 1px solid $dark-4;
width: 15px;
position: absolute;
margin: -9px 0 0 -9px;
}
.panels-wrapper {
margin-left: $panel-margin;
padding: $panel-margin*2 $panel-margin 0 $panel-margin*2;
border-left: 1px solid $dark-4;
border-right: 1px solid $dark-4;
}
.panels-wrapper::after {
content: ' ';
border-bottom: 1px solid $dark-4;
width: 15px;
position: absolute;
margin: 0 0 0 -12px;
}
.add-row-panel-hint {
display: block;
}
@ -339,18 +386,33 @@ div.flot-text {
}
.dash-row-options {
background: $panel-bg;
border: $panel-border;
margin: 0 0 $panel-margin*2 $panel-margin*2;
padding: $spacer*1.5;
border-left: $panel-border;
border-bottom: $panel-border;
border-right: $panel-border;
margin: 0 0 $panel-margin*2 0;
padding: $panel-margin*2;
box-shadow: 0px 3px 7px -3px $black;
}
.dash-row-add-panel {
margin: 0;
border-left: $panel-border;
border-bottom: $panel-border;
border-right: $panel-border;
margin: 0 0 $panel-margin*2 0;
padding: $panel-margin*2;
// display: flex;
// align-items: flex-start;
// position: relative;
box-shadow: 0px 3px 7px -3px $black;
}
.dash-edit-mode {
.dash-row-options {
margin-bottom: 0;
}
.dash-row-add-panel {
margin-bottom: 0;
}
}
.add-panel-panels-scroll {
@ -383,8 +445,22 @@ div.flot-text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: $font-size-sm;
}
.add-panel-item-img {
width: 3rem;
width: 2rem;
}
// Animations
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}