mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
5a4f690807
* WIP: initial commit to transition to new edit mode * More old edit cleanup * Minor update * Refactoring url edit/fullscreen state to simplify logic, now seperate states * Fixed tests and part of the explore integration * Updated snapshot * Fix alert rule links * Fixed issue going back from explore * Updated snapshots * Fixes and changes * Fixed bridge srv issue * Fixed add panel issue * Removed console log * Removed render * Tests: fixes e2e smoketest * Make description optional * Fixed typings * e2e fixes * removed import * updated snapshot Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>
176 lines
2.8 KiB
SCSS
176 lines
2.8 KiB
SCSS
.panel-editor-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.panel-wrapper {
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
&--view {
|
|
flex: 1 1 0;
|
|
height: 90%;
|
|
margin: 0 $dashboard-padding;
|
|
padding-top: $dashboard-padding;
|
|
}
|
|
}
|
|
|
|
.panel-editor-container__editor {
|
|
margin-top: $space-lg;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: 1 1 0;
|
|
position: relative;
|
|
min-height: 0;
|
|
}
|
|
|
|
.panel-editor__right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
background: $input-bg;
|
|
margin: 0 20px 0 84px;
|
|
width: calc(100% - 84px);
|
|
border-radius: 3px;
|
|
box-shadow: $panel-editor-shadow;
|
|
min-height: 0;
|
|
}
|
|
|
|
.panel-editor__close {
|
|
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl);
|
|
position: absolute;
|
|
left: 11px;
|
|
top: 5px;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
i {
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.panel-editor__scroll {
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
min-height: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel-editor__content {
|
|
padding: 16px;
|
|
}
|
|
|
|
.panel-in-fullscreen {
|
|
.sidemenu {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-container {
|
|
padding: 0;
|
|
}
|
|
|
|
.submenu-controls {
|
|
padding: 0 $dashboard-padding $space-sm $dashboard-padding;
|
|
}
|
|
|
|
.search-container {
|
|
left: 0 !important;
|
|
}
|
|
}
|
|
|
|
.panel-editor-container__resizer {
|
|
position: relative;
|
|
margin-top: -3px;
|
|
}
|
|
|
|
.panel-editor-resizer__handle {
|
|
position: relative;
|
|
display: block;
|
|
background: $vertical-resize-handle-bg;
|
|
width: 150px;
|
|
margin-left: -75px;
|
|
height: 6px;
|
|
cursor: ns-resize;
|
|
border-radius: 3px;
|
|
margin: 0 auto;
|
|
|
|
&::before {
|
|
content: ' ';
|
|
position: absolute;
|
|
left: 10px;
|
|
right: 10px;
|
|
top: 2px;
|
|
border-top: 2px dotted $vertical-resize-handle-dots;
|
|
}
|
|
|
|
&:hover::before {
|
|
border-color: $vertical-resize-handle-dots-hover;
|
|
}
|
|
}
|
|
|
|
.panel-editor-tabs {
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 44px;
|
|
left: 20px;
|
|
align-items: flex-start;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 10px;
|
|
bottom: 10px;
|
|
left: 21px;
|
|
width: 2px;
|
|
background: $panel-editor-tabs-line-color;
|
|
}
|
|
}
|
|
|
|
.panel-editor-tabs__item {
|
|
margin-bottom: 25px;
|
|
position: relative;
|
|
z-index: 1;
|
|
text-align: center;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.panel-editor-tabs__link {
|
|
display: inline-block;
|
|
|
|
&.active {
|
|
position: relative;
|
|
}
|
|
|
|
.gicon {
|
|
height: 44px;
|
|
width: 53px;
|
|
margin-right: 5px;
|
|
transition: transform 0.1s ease 0.1s;
|
|
|
|
&:hover {
|
|
filter: $panel-editor-side-menu-shadow;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ds-picker {
|
|
position: relative;
|
|
min-width: 200px;
|
|
max-width: 300px;
|
|
}
|