Skip to content

N
nexpie-grafana-theme
Commit 8a715cd1 by Torkel Ödegaard
Options

using gf-form in row header

parent d1cc890e
Showing with 78 additions and 56 deletions
public/app/features/dashboard/row/row.html
<div class="dash-row-handle-column" ng-if="ctrl.dashboard.editMode"> <div class="dash-row-handle-column" ng-show="ctrl.dashboard.editMode">
<div class="dash-row-move-handle"> <div class="dash-row-move-handle">
</div> </div>
<div class="dash-row-resize-handle"> <div class="dash-row-resize-handle">
</div> </div>
</div> </div>
<div class="dash-row-content"> <div class="dash-row-content">
<div class="dash-row-header pointer" ng-if="ctrl.dashboard.editMode"> <div class="dash-row-header" ng-if="ctrl.dashboard.editMode">
<div class="dash-row-header-title" ng-bind="ctrl.row.title | interpolateTemplateVars:this"></div> <div class="gf-form gf-form--grow">
<div class="dash-row-header-settings dropdown"> <input class="gf-form-input width-10" ng-model="ctrl.row.title"></input>
<a class="pointer dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-plus-circle"></i> <label class="btn gf-form-btn btn-inverse">
</a> Row Options <i class="fa fa-caret-down"></i>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1"> </label>
<li class="dropdown-submenu">
<a href="javascript:void(0);">Add Panel</a> <label class="btn gf-form-btn btn-inverse">
<ul class="dropdown-menu"> Add Panel <i class="fa fa-plus"></i>
<li bindonce ng-repeat="(key, value) in ctrl.panelPlugins"> </label>
<a ng-click="ctrl.addPanelDefault(key)" bo-text="value.name"></a>
</li>
</ul> <!-- <div class="dash&#45;row&#45;header&#45;settings dropdown"> -->
</li> <!-- <a class="pointer dropdown&#45;toggle" data&#45;toggle="dropdown"> -->
<li class="dropdown-submenu"> <!-- <i class="fa fa&#45;plus&#45;circle"></i> -->
<a href="javascript:void(0);">Set height</a> <!-- </a> -->
<ul class="dropdown-menu"> <!-- <ul class="dropdown&#45;menu dropdown&#45;menu&#45;right" role="menu" aria&#45;labelledby="drop1"> -->
<li><a ng-click="setHeight('25px')">25 px</a></li> <!-- <li class="dropdown&#45;submenu"> -->
<li><a ng-click="setHeight('100px')">100 px</a></li> <!-- <a href="javascript:void(0);">Add Panel</a> -->
<li><a ng-click="setHeight('150px')">150 px</a></li> <!-- <ul class="dropdown&#45;menu"> -->
<li><a ng-click="setHeight('200px')">200 px</a></li> <!-- <li bindonce ng&#45;repeat="(key, value) in ctrl.panelPlugins"> -->
<li><a ng-click="setHeight('250px')">250 px</a></li> <!-- <a ng&#45;click="ctrl.addPanelDefault(key)" bo&#45;text="value.name"></a> -->
<li><a ng-click="setHeight('300px')">300 px</a></li> <!-- </li> -->
<li><a ng-click="setHeight('350px')">350 px</a></li> <!-- </ul> -->
<li><a ng-click="setHeight('450px')">450 px</a></li> <!-- </li> -->
<li><a ng-click="setHeight('500px')">500 px</a></li> <!-- <li class="dropdown&#45;submenu"> -->
<li><a ng-click="setHeight('600px')">600 px</a></li> <!-- <a href="javascript:void(0);">Set height</a> -->
<li><a ng-click="setHeight('700px')">700 px</a></li> <!-- <ul class="dropdown&#45;menu"> -->
</ul> <!-- <li><a ng&#45;click="setHeight('25px')">25 px</a></li> -->
</li> <!-- <li><a ng&#45;click="setHeight('100px')">100 px</a></li> -->
<!-- <li class="dropdown&#45;submenu"> --> <!-- <li><a ng&#45;click="setHeight('150px')">150 px</a></li> -->
<!-- <a href="javascript:void(0);">Move</a> --> <!-- <li><a ng&#45;click="setHeight('200px')">200 px</a></li> -->
<!-- <ul class="dropdown&#45;menu"> --> <!-- <li><a ng&#45;click="setHeight('250px')">250 px</a></li> -->
<!-- <li><a ng&#45;click="moveRow('up')">Up</a></li> --> <!-- <li><a ng&#45;click="setHeight('300px')">300 px</a></li> -->
<!-- <li><a ng&#45;click="moveRow('down')">Down</a></li> --> <!-- <li><a ng&#45;click="setHeight('350px')">350 px</a></li> -->
<!-- <li><a ng&#45;click="moveRow('top')">To top</a></li> --> <!-- <li><a ng&#45;click="setHeight('450px')">450 px</a></li> -->
<!-- <li><a ng&#45;click="moveRow('bottom')">To Bottom</a></li> --> <!-- <li><a ng&#45;click="setHeight('500px')">500 px</a></li> -->
<!-- </ul> --> <!-- <li><a ng&#45;click="setHeight('600px')">600 px</a></li> -->
<!-- </li> --> <!-- <li><a ng&#45;click="setHeight('700px')">700 px</a></li> -->
<li> <!-- </ul> -->
<a ng-click="ctrl.editRow()">Row options</a> <!-- </li> -->
</li> <!-- <!&#45;&#45; <li class="dropdown&#38;#45;submenu"> &#45;&#45;> -->
<li> <!-- <!&#45;&#45; <a href="javascript:void(0);">Move</a> &#45;&#45;> -->
<a ng-click="ctrl.deleteRow()">Delete row</a> <!-- <!&#45;&#45; <ul class="dropdown&#38;#45;menu"> &#45;&#45;> -->
</li> <!-- <!&#45;&#45; <li><a ng&#38;#45;click="moveRow('up')">Up</a></li> &#45;&#45;> -->
</ul> <!-- <!&#45;&#45; <li><a ng&#38;#45;click="moveRow('down')">Down</a></li> &#45;&#45;> -->
</div> <!-- <!&#45;&#45; <li><a ng&#38;#45;click="moveRow('top')">To top</a></li> &#45;&#45;> -->
<div class="dash-row-header-chevron" ng-click="ctrl.row.collapse = !ctrl.row.collapse"> <!-- <!&#45;&#45; <li><a ng&#38;#45;click="moveRow('bottom')">To Bottom</a></li> &#45;&#45;> -->
<!-- <!&#45;&#45; </ul> &#45;&#45;> -->
<!-- <!&#45;&#45; </li> &#45;&#45;> -->
<!-- <li> -->
<!-- <a ng&#45;click="ctrl.editRow()">Row options</a> -->
<!-- </li> -->
<!-- <li> -->
<!-- <a ng&#45;click="ctrl.deleteRow()">Delete row</a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<div class="gf-form-label gf-form-label--grow text-right" ng-click="ctrl.row.collapse = !ctrl.row.collapse">
<a class="pointer"> <a class="pointer">
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i> <i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i> <i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
</a> </a>
</div> </div>
</div> </div>
</div>
<div class="panels-wrapper" ng-if="!ctrl.row.collapse"> <div class="panels-wrapper" ng-if="!ctrl.row.collapse">
<div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width> <div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width ui-on-drag-enter="ctrl.onDragEnter($data)">
<plugin-component type="panel" class="panel-margin"> <plugin-component type="panel" class="panel-margin">
</plugin-component> </plugin-component>
</div> </div>
......
public/app/features/dashboard/row/row.ts
///<reference path="../../../headers/common.d.ts" /> ///<reference path="../../../headers/common.d.ts" />
import _ from 'lodash'; import _ from 'lodash';
import $ from 'jquery';
import angular from 'angular';
import config from 'app/core/config'; import config from 'app/core/config';
import {coreModule, appEvents} from 'app/core/core'; import {coreModule, appEvents} from 'app/core/core';
...@@ -12,6 +15,7 @@ export class DashRowCtrl { ...@@ -12,6 +15,7 @@ export class DashRowCtrl {
/** @ngInject */ /** @ngInject */
constructor(private $scope, private $rootScope, private $timeout) { constructor(private $scope, private $rootScope, private $timeout) {
this.panelPlugins = config.panels; this.panelPlugins = config.panels;
this.row.title = this.row.title || 'Row title';
} }
onDrop(panelId, dropTarget) { onDrop(panelId, dropTarget) {
...@@ -32,6 +36,10 @@ export class DashRowCtrl { ...@@ -32,6 +36,10 @@ export class DashRowCtrl {
this.$rootScope.$broadcast('render'); this.$rootScope.$broadcast('render');
} }
onDragEnter(data) {
console.log('drag enter', data);
}
addPanel(panel) { addPanel(panel) {
this.dashboard.addPanel(panel, this.row); this.dashboard.addPanel(panel, this.row);
this.$timeout(() => { this.$timeout(() => {
......
public/sass/_variables.scss
...@@ -161,7 +161,7 @@ $table-sm-cell-padding: .3rem !default; ...@@ -161,7 +161,7 @@ $table-sm-cell-padding: .3rem !default;
// Forms // Forms
$input-padding-x: .75rem !default; $input-padding-x: .75rem !default;
$input-padding-y: .6rem !default; $input-padding-y: .6rem !default;
$input-line-height: 1.42rem !default; $input-line-height: 1.35rem !default;
$input-btn-border-width: 1px; $input-btn-border-width: 1px;
$input-border-radius: 0 $border-radius $border-radius 0 !default; $input-border-radius: 0 $border-radius $border-radius 0 !default;
......
public/sass/components/_gf-form.scss
...@@ -62,7 +62,7 @@ $gf-form-margin: 0.25rem; ...@@ -62,7 +62,7 @@ $gf-form-margin: 0.25rem;
&--grow { &--grow {
flex-grow: 1; flex-grow: 1;
min-height: 2.70rem; min-height: 2.60rem;
} }
} }
...@@ -196,6 +196,9 @@ $gf-form-margin: 0.25rem; ...@@ -196,6 +196,9 @@ $gf-form-margin: 0.25rem;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
line-height: $input-line-height; line-height: $input-line-height;
font-size: $font-size-sm; font-size: $font-size-sm;
box-shadow: none;
border: $input-btn-border-width solid transparent;
@include border-radius($label-border-radius-sm);
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
......
public/sass/pages/_dashboard.scss
...@@ -210,7 +210,7 @@ div.flot-text { ...@@ -210,7 +210,7 @@ div.flot-text {
} }
.dash-row-handle-column { .dash-row-handle-column {
width: 2rem; min-width: 1.5rem;
background: $input-label-bg; background: $input-label-bg;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -235,8 +235,8 @@ div.flot-text { ...@@ -235,8 +235,8 @@ div.flot-text {
flex-direction: row; flex-direction: row;
text-align: left; text-align: left;
align-items: center; align-items: center;
background: $input-label-bg;
margin-right: $panel-margin; margin-right: $panel-margin;
margin-left: $gf-form-margin;
} }
.dash-row-header-title { .dash-row-header-title {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment