mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(ux): trying to simplify display rules for edit mode / row actions
This commit is contained in:
Torkel Ödegaard
parent
3be9e8e022
commit
591f6536f8
@ -1,35 +1,49 @@
|
||||
<div class="dash-row-header">
|
||||
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
|
||||
<span class="dash-row-collapse-toggle pointer">
|
||||
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
|
||||
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
|
||||
</span>
|
||||
<span ng-class="ctrl.row.titleSize">{{ctrl.row.title}}</span>
|
||||
</a>
|
||||
<div ng-if="ctrl.dashboard.editMode">
|
||||
<div class="dash-row-header">
|
||||
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
|
||||
<span class="dash-row-collapse-toggle pointer">
|
||||
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
|
||||
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
|
||||
</span>
|
||||
<span ng-class="ctrl.row.titleSize">{{ctrl.row.title}}</span>
|
||||
</a>
|
||||
|
||||
<div class="dash-row-header-spacer">
|
||||
<div class="dash-row-header-spacer">
|
||||
</div>
|
||||
|
||||
<div class="dash-row-header-actions">
|
||||
<a class="pointer dash-row-header-action-add-panel" ng-click="ctrl.showAddPanel()">
|
||||
Add Panel
|
||||
<i class="fa fa-plus" ng-hide="ctrl.dropView===1"></i>
|
||||
<i class="fa fa-remove" ng-show="ctrl.dropView===1"></i>
|
||||
</a>
|
||||
<a class="pointer dash-row-header-action-show-options" ng-click="ctrl.showRowOptions()">
|
||||
Row Options
|
||||
<i class="fa fa-cog" ng-hide="ctrl.dropView===2"></i>
|
||||
<i class="fa fa-remove" ng-show="ctrl.dropView===2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dash-row-header-actions">
|
||||
<a class="pointer dash-row-header-action-add-panel" ng-click="ctrl.showAddPanel()">
|
||||
Add Panel
|
||||
<i class="fa fa-plus" ng-hide="ctrl.dropView===1"></i>
|
||||
<i class="fa fa-remove" ng-show="ctrl.dropView===1"></i>
|
||||
</a>
|
||||
<a class="pointer dash-row-header-action-show-options" ng-click="ctrl.showRowOptions()">
|
||||
Row Options
|
||||
<i class="fa fa-cog" ng-hide="ctrl.dropView===2"></i>
|
||||
<i class="fa fa-remove" ng-show="ctrl.dropView===2"></i>
|
||||
</a>
|
||||
<div ng-if="ctrl.dropView === 1">
|
||||
<dash-row-add-panel row-ctrl="ctrl"></dash-row-add-panel>
|
||||
</div>
|
||||
|
||||
<div ng-if="ctrl.dropView === 2">
|
||||
<dash-row-options row-ctrl="ctrl"></dash-row-options>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="ctrl.dropView === 1">
|
||||
<dash-row-add-panel row-ctrl="ctrl"></dash-row-add-panel>
|
||||
</div>
|
||||
|
||||
<div ng-if="ctrl.dropView === 2">
|
||||
<dash-row-options row-ctrl="ctrl"></dash-row-options>
|
||||
<div ng-if="!ctrl.dashboard.editMode && ctrl.row.showTitle">
|
||||
<div class="dash-row-header">
|
||||
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
|
||||
<span class="dash-row-collapse-toggle pointer">
|
||||
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
|
||||
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
|
||||
</span>
|
||||
<span ng-class="ctrl.row.titleSize">{{ctrl.row.title}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panels-wrapper" ng-if="!ctrl.row.collapse">
|
||||
|
||||
@ -84,6 +84,7 @@ export class DashRowCtrl {
|
||||
}
|
||||
|
||||
showAddPanel() {
|
||||
this.row.collapse = false;
|
||||
this.dropView = this.dropView === 1 ? 0 : 1;
|
||||
}
|
||||
|
||||
@ -104,11 +105,8 @@ export function rowDirective($rootScope) {
|
||||
row: "=",
|
||||
},
|
||||
link: function(scope, element) {
|
||||
scope.$watchGroup(['ctrl.row.collapse', 'ctrl.row.height', 'ctrl.row.showTitle', 'ctrl.dropView'], function() {
|
||||
scope.$watchGroup(['ctrl.row.height'], function() {
|
||||
element.css({minHeight: scope.ctrl.row.collapse ? '5px' : scope.ctrl.row.height});
|
||||
element.toggleClass('dash-row-show-title', scope.ctrl.row.showTitle === true);
|
||||
element.toggleClass('dash-row-show-options', scope.ctrl.dropView === 2);
|
||||
element.toggleClass('dash-row-show-add-panel', scope.ctrl.dropView === 1);
|
||||
});
|
||||
|
||||
$rootScope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
|
||||
|
||||
@ -73,6 +73,7 @@
|
||||
@import "components/query_part";
|
||||
@import "components/jsontree";
|
||||
@import "components/edit_sidemenu.scss";
|
||||
@import "components/row.scss";
|
||||
|
||||
// PAGES
|
||||
@import "pages/login";
|
||||
|
||||
216
public/sass/components/_row.scss
Normal file
216
public/sass/components/_row.scss
Normal file
@ -0,0 +1,216 @@
|
||||
|
||||
.dash-row {
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dash-row-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-right: $panel-margin;
|
||||
margin-left: 0;
|
||||
|
||||
.h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem }
|
||||
.h2 { font-size: 2.4rem; line-height: 3.5rem; }
|
||||
.h3 { font-size: 2.0rem; line-height: 3rem;}
|
||||
.h4 { font-size: 1.7rem; }
|
||||
.h5 { font-size: 1.4rem; }
|
||||
.h6 { font-size: 1rem }
|
||||
}
|
||||
|
||||
.dash-row-header-title {
|
||||
padding: 0.6rem;
|
||||
flex-grow: 1;
|
||||
|
||||
.dash-row-collapse-toggle {
|
||||
padding: 0 2px;
|
||||
font-size: $font-size-xs;
|
||||
color: $text-muted;
|
||||
position: relative;
|
||||
left: -3px;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dash-row-collapse-toggle {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-header-actions {
|
||||
position: absolute;
|
||||
color: $text-muted;
|
||||
font-size: $font-size-sm;
|
||||
bottom: 5px;
|
||||
right: 1rem;
|
||||
a {
|
||||
color: $text-muted;
|
||||
padding-left: 1rem;
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-header-add-panel {
|
||||
padding: 0.7rem;
|
||||
i {
|
||||
font-size: 0.9rem;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 1px;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-header-spacer {
|
||||
flex: 50;
|
||||
}
|
||||
|
||||
.panels-wrapper {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dash-edit-mode {
|
||||
.dash-row-header {
|
||||
display: flex;
|
||||
border-bottom: 1px solid $dark-4;
|
||||
border-right: 1px solid $dark-4;
|
||||
margin-right: 0;
|
||||
}
|
||||
.dash-row-header::after {
|
||||
content: ' ';
|
||||
border-top: 1px solid $dark-4;
|
||||
width: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.dash-row {
|
||||
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 {
|
||||
padding: $panel-margin*2 $panel-margin 0 $panel-margin;
|
||||
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;
|
||||
bottom: 0;
|
||||
}
|
||||
.add-row-panel-hint {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-options-close-btn {
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom;
|
||||
i {
|
||||
font-size: 120%;
|
||||
}
|
||||
color: $text-color;
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-options {
|
||||
background: $panel-bg;
|
||||
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 {
|
||||
background: $panel-bg;
|
||||
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;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dash-edit-mode {
|
||||
.dash-row-options {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.dash-row-add-panel {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.add-panel-panels-scroll {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.add-panel-panels {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.add-panel-item {
|
||||
background: $input-label-bg;
|
||||
border: $panel-border;
|
||||
padding: $spacer;
|
||||
min-width: 9rem;
|
||||
max-width: 9rem;
|
||||
text-align: center;
|
||||
margin: $gf-form-margin;
|
||||
cursor: pointer;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8)
|
||||
}
|
||||
}
|
||||
|
||||
.add-panel-item-name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.add-panel-item-img {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
// Animations
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -200,267 +200,3 @@ div.flot-text {
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Dashboard row
|
||||
//
|
||||
|
||||
.dash-row {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dash-row-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
display: none;
|
||||
flex-direction: row;
|
||||
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; }
|
||||
.h3 { font-size: 2.0rem; line-height: 3rem;}
|
||||
.h4 { font-size: 1.7rem; }
|
||||
.h5 { font-size: 1.4rem; }
|
||||
.h6 { font-size: 1rem }
|
||||
}
|
||||
|
||||
.dash-row-header-title {
|
||||
padding: 0.6rem;
|
||||
|
||||
.dash-row-collapse-toggle {
|
||||
padding: 0 2px;
|
||||
font-size: $font-size-xs;
|
||||
color: $text-muted;
|
||||
position: relative;
|
||||
left: -3px;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dash-row-collapse-toggle {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-header-actions {
|
||||
position: absolute;
|
||||
display: none;
|
||||
color: $text-muted;
|
||||
font-size: $font-size-sm;
|
||||
bottom: 5px;
|
||||
right: 1rem;
|
||||
a {
|
||||
color: $text-muted;
|
||||
padding-left: 1rem;
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-show-options {
|
||||
.dash-row-header-actions {
|
||||
display: block;
|
||||
}
|
||||
.dash-row-header-action-show-options {
|
||||
color: $link-color;
|
||||
}
|
||||
.dash-row-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-show-add-panel {
|
||||
.dash-row-header-actions {
|
||||
display: block;
|
||||
}
|
||||
.dash-row-header-action--add-panel {
|
||||
color: $link-color;
|
||||
}
|
||||
.dash-row-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-show-title {
|
||||
.dash-row-header {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-header-add-panel {
|
||||
padding: 0.7rem;
|
||||
i {
|
||||
font-size: 0.9rem;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 1px;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-header-spacer {
|
||||
flex: 50;
|
||||
}
|
||||
|
||||
.dash-edit-mode {
|
||||
.dash-row-header {
|
||||
display: flex;
|
||||
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 {
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-options-close-btn {
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom;
|
||||
i {
|
||||
font-size: 120%;
|
||||
}
|
||||
color: $text-color;
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-options {
|
||||
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 {
|
||||
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 {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.add-panel-panels {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.add-panel-item {
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
padding: $spacer;
|
||||
min-width: 9rem;
|
||||
max-width: 9rem;
|
||||
text-align: center;
|
||||
margin: $gf-form-margin;
|
||||
cursor: pointer;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8)
|
||||
}
|
||||
}
|
||||
|
||||
.add-panel-item-name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.add-panel-item-img {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
// Animations
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user