IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

using gf-form in row header

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-10-25 10:47:13 +02:00
parent d1cc890ed3
commit 8a715cd122
5 changed files with 78 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
public/app/features/dashboard/row/row.html
View File

@ -1,71 +1,82 @@
<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>
<div class="dash-row-resize-handle">
</div>
</div>
<div class="dash-row-content">
<div class="dash-row-header pointer" ng-if="ctrl.dashboard.editMode">
<div class="dash-row-header-title" ng-bind="ctrl.row.title | interpolateTemplateVars:this"></div>
<div class="dash-row-header-settings dropdown">
<a class="pointer dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-plus-circle"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
<li class="dropdown-submenu">
<a href="javascript:void(0);">Add Panel</a>
<ul class="dropdown-menu">
<li bindonce ng-repeat="(key, value) in ctrl.panelPlugins">
<a ng-click="ctrl.addPanelDefault(key)" bo-text="value.name"></a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="javascript:void(0);">Set height</a>
<ul class="dropdown-menu">
<li><a ng-click="setHeight('25px')">25 px</a></li>
<li><a ng-click="setHeight('100px')">100 px</a></li>
<li><a ng-click="setHeight('150px')">150 px</a></li>
<li><a ng-click="setHeight('200px')">200 px</a></li>
<li><a ng-click="setHeight('250px')">250 px</a></li>
<li><a ng-click="setHeight('300px')">300 px</a></li>
<li><a ng-click="setHeight('350px')">350 px</a></li>
<li><a ng-click="setHeight('450px')">450 px</a></li>
<li><a ng-click="setHeight('500px')">500 px</a></li>
<li><a ng-click="setHeight('600px')">600 px</a></li>
<li><a ng-click="setHeight('700px')">700 px</a></li>
</ul>
</li>
<!-- <li class="dropdown&#45;submenu"> -->
<!-- <a href="javascript:void(0);">Move</a> -->
<!-- <ul class="dropdown&#45;menu"> -->
<!-- <li><a ng&#45;click="moveRow('up')">Up</a></li> -->
<!-- <li><a ng&#45;click="moveRow('down')">Down</a></li> -->
<!-- <li><a ng&#45;click="moveRow('top')">To top</a></li> -->
<!-- <li><a ng&#45;click="moveRow('bottom')">To Bottom</a></li> -->
<!-- </ul> -->
<!-- </li> -->
<li>
<a ng-click="ctrl.editRow()">Row options</a>
</li>
<li>
<a ng-click="ctrl.deleteRow()">Delete row</a>
</li>
</ul>
</div>
<div class="dash-row-header-chevron" ng-click="ctrl.row.collapse = !ctrl.row.collapse">
<div class="dash-row-header" ng-if="ctrl.dashboard.editMode">
<div class="gf-form gf-form--grow">
<input class="gf-form-input width-10" ng-model="ctrl.row.title"></input>
<label class="btn gf-form-btn btn-inverse">
Row Options <i class="fa fa-caret-down"></i>
</label>
<label class="btn gf-form-btn btn-inverse">
Add Panel <i class="fa fa-plus"></i>
</label>
<!-- <div class="dash&#45;row&#45;header&#45;settings dropdown"> -->
<!-- <a class="pointer dropdown&#45;toggle" data&#45;toggle="dropdown"> -->
<!-- <i class="fa fa&#45;plus&#45;circle"></i> -->
<!-- </a> -->
<!-- <ul class="dropdown&#45;menu dropdown&#45;menu&#45;right" role="menu" aria&#45;labelledby="drop1"> -->
<!-- <li class="dropdown&#45;submenu"> -->
<!-- <a href="javascript:void(0);">Add Panel</a> -->
<!-- <ul class="dropdown&#45;menu"> -->
<!-- <li bindonce ng&#45;repeat="(key, value) in ctrl.panelPlugins"> -->
<!-- <a ng&#45;click="ctrl.addPanelDefault(key)" bo&#45;text="value.name"></a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </li> -->
<!-- <li class="dropdown&#45;submenu"> -->
<!-- <a href="javascript:void(0);">Set height</a> -->
<!-- <ul class="dropdown&#45;menu"> -->
<!-- <li><a ng&#45;click="setHeight('25px')">25 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('100px')">100 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('150px')">150 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('200px')">200 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('250px')">250 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('300px')">300 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('350px')">350 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('450px')">450 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('500px')">500 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('600px')">600 px</a></li> -->
<!-- <li><a ng&#45;click="setHeight('700px')">700 px</a></li> -->
<!-- </ul> -->
<!-- </li> -->
<!-- <!&#45;&#45; <li class="dropdown&#38;#45;submenu"> &#45;&#45;> -->
<!-- <!&#45;&#45; <a href="javascript:void(0);">Move</a> &#45;&#45;> -->
<!-- <!&#45;&#45; <ul class="dropdown&#38;#45;menu"> &#45;&#45;> -->
<!-- <!&#45;&#45; <li><a ng&#38;#45;click="moveRow('up')">Up</a></li> &#45;&#45;> -->
<!-- <!&#45;&#45; <li><a ng&#38;#45;click="moveRow('down')">Down</a></li> &#45;&#45;> -->
<!-- <!&#45;&#45; <li><a ng&#38;#45;click="moveRow('top')">To top</a></li> &#45;&#45;> -->
<!-- <!&#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">
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
</a>
</div>
</div>
</div>
<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>
</div>

8
public/app/features/dashboard/row/row.ts
View File

@ -1,6 +1,9 @@
///<reference path="../../../headers/common.d.ts" />
import _ from 'lodash';
import $ from 'jquery';
import angular from 'angular';
import config from 'app/core/config';
import {coreModule, appEvents} from 'app/core/core';
@ -12,6 +15,7 @@ export class DashRowCtrl {
/** @ngInject */
constructor(private $scope, private $rootScope, private $timeout) {
this.panelPlugins = config.panels;
this.row.title = this.row.title || 'Row title';
}
onDrop(panelId, dropTarget) {
@ -32,6 +36,10 @@ export class DashRowCtrl {
this.$rootScope.$broadcast('render');
}
onDragEnter(data) {
console.log('drag enter', data);
}
addPanel(panel) {
this.dashboard.addPanel(panel, this.row);
this.$timeout(() => {

2
public/sass/_variables.scss
View File

@ -161,7 +161,7 @@ $table-sm-cell-padding: .3rem !default;
// Forms
$input-padding-x: .75rem !default;
$input-padding-y: .6rem !default;
$input-line-height: 1.42rem !default;
$input-line-height: 1.35rem !default;
$input-btn-border-width: 1px;
$input-border-radius: 0 $border-radius $border-radius 0 !default;

5
public/sass/components/_gf-form.scss
View File

@ -62,7 +62,7 @@ $gf-form-margin: 0.25rem;
&--grow {
flex-grow: 1;
min-height: 2.70rem;
min-height: 2.60rem;
}
}
@ -196,6 +196,9 @@ $gf-form-margin: 0.25rem;
margin-right: $gf-form-margin;
line-height: $input-line-height;
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-grow: 0;

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

@ -210,7 +210,7 @@ div.flot-text {
}
.dash-row-handle-column {
width: 2rem;
min-width: 1.5rem;
background: $input-label-bg;
display: flex;
flex-direction: column;
@ -235,8 +235,8 @@ div.flot-text {
flex-direction: row;
text-align: left;
align-items: center;
background: $input-label-bg;
margin-right: $panel-margin;
margin-left: $gf-form-margin;
}
.dash-row-header-title {