mirror of https://github.com/grafana/grafana
Torkel Ödegaard
9 years ago
parent
5e1f1c0989
commit
7b0eb6d0bb
@ -0,0 +1,42 @@ |
||||
<div class="dash-row-options"> |
||||
|
||||
<div class="tabbed-view-header"> |
||||
<h2 class="tabbed-view-title"> |
||||
Row Options |
||||
</h2> |
||||
|
||||
<button class="tabbed-view-close-btn" ng-click="ctrl.onClose()"> |
||||
<i class="fa fa-remove"></i> |
||||
</button> |
||||
</div> |
||||
|
||||
<br> |
||||
|
||||
<div class="gf-form-group"> |
||||
<div class="gf-form-inline"> |
||||
|
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-6">Title</span> |
||||
<input type="text" class="gf-form-input max-width-14" ng-model='ctrl.row.title'></input> |
||||
</div> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-6">Height</span> |
||||
<input type="text" class="gf-form-input max-width-8" ng-model='ctrl.row.height'></input> |
||||
</div> |
||||
<gf-form-switch class="gf-form" label="Show Title" tooltip="Check to always show row title" checked="ctrl.row.showTitle"> |
||||
</gf-form-switch> |
||||
</div> |
||||
</div> |
||||
|
||||
<h5 class="section-heading">Row Templating</h5> |
||||
|
||||
<div class="gf-form-group"> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label">Repeat Row</span> |
||||
<div class="gf-form-select-wrapper max-width-10"> |
||||
<select class="gf-form-input" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list"> |
||||
<option value=""></option> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,24 @@ |
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import _ from 'lodash'; |
||||
|
||||
import {coreModule} from 'app/core/core'; |
||||
|
||||
export class RowOptionsCtrl { |
||||
} |
||||
|
||||
export function rowOptionsDirective() { |
||||
return { |
||||
restrict: 'E', |
||||
templateUrl: 'public/app/features/dashboard/row/options.html', |
||||
controller: RowOptionsCtrl, |
||||
bindToController: true, |
||||
controllerAs: 'ctrl', |
||||
scope: { |
||||
row: "=", |
||||
onClose: "&" |
||||
}, |
||||
}; |
||||
} |
||||
|
||||
coreModule.directive('dashRowOptions', rowOptionsDirective); |
||||
@ -1,95 +1,75 @@ |
||||
<!-- <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-header" ng-if="ctrl.dashboard.editMode"> |
||||
<div class="gf-form gf-form--grow dropdown"> |
||||
<a class="btn gf-form-btn btn-inverse dropdown-toggle" data-toggle="dropdown"> |
||||
<span>{{ctrl.row.title}}</span> |
||||
<i class="fa fa-caret-down"></i> |
||||
</a> |
||||
|
||||
<div class="dash-row-content"> |
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> |
||||
<li> |
||||
<a ng-click="ctrl.showOptions = !ctrl.showOptions">Options</a> |
||||
</li> |
||||
<li class="dropdown-submenu"> |
||||
<a href="javascript:void(0);">Height</a> |
||||
<ul class="dropdown-menu"> |
||||
<li><a ng-click="ctrl.setHeight('25px')">25 px</a></li> |
||||
<li><a ng-click="ctrl.setHeight('100px')">100 px</a></li> |
||||
<li><a ng-click="ctrl.setHeight('150px')">150 px</a></li> |
||||
<li><a ng-click="ctrl.setHeight('200px')">200 px</a></li> |
||||
<li><a ng-click="ctrl.setHeight('250px')">250 px</a></li> |
||||
<li><a ng-click="ctrl.setHeight('300px')">300 px</a></li> |
||||
<li><a ng-click="ctrl.setHeight('350px')">350 px</a></li> |
||||
<li><a ng-click="ctrl.setHeight('450px')">450 px</a></li> |
||||
<li><a ng-click="ctrl.setHeight('500px')">500 px</a></li> |
||||
<li><a ng-click="ctrl.setHeight('600px')">600 px</a></li> |
||||
<li><a ng-click="ctrl.setHeight('700px')">700 px</a></li> |
||||
</ul> |
||||
</li> |
||||
<li class="dropdown-submenu"> |
||||
<a href="javascript:void(0);">Move</a> |
||||
<ul class="dropdown-menu"> |
||||
<li><a ng-click="ctrl.Move('up')">Up</a></li> |
||||
<li><a ng-click="ctrl.Move('down')">Down</a></li> |
||||
<li><a ng-click="ctrl.Move('top')">To Top</a></li> |
||||
<li><a ng-click="ctrl.Move('bottom')">To Bottom</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a ng-click="ctrl.deleteRow()">Delete</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<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"> |
||||
Add Panel <i class="fa fa-plus"></i> |
||||
</label> |
||||
|
||||
<label class="btn gf-form-btn btn-inverse"> |
||||
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="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 ng-if="ctrl.showOptions"> |
||||
<dash-row-options row="ctrl.row" on-close="ctrl.showOptions = false;"></dash-row-options> |
||||
</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="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 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 ui-on-drag-enter="ctrl.onDragEnter($data)"> |
||||
<plugin-component type="panel" class="panel-margin"> |
||||
</plugin-component> |
||||
</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 ui-on-drag-enter="ctrl.onDragEnter($data)"> |
||||
<plugin-component type="panel" class="panel-margin"> |
||||
</plugin-component> |
||||
</div> |
||||
|
||||
<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="ctrl.onDrop($data)" data-drop="true"> |
||||
<div class="panel-container" style="background: transparent"> |
||||
<div style="text-align: center"> |
||||
<em>Drop here</em> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="ctrl.onDrop($data)" data-drop="true"> |
||||
<div class="panel-container" style="background: transparent"> |
||||
<div style="text-align: center"> |
||||
<em>Drop here</em> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="clearfix"></div> |
||||
</div> |
||||
<div class="clearfix"></div> |
||||
</div> |
||||
|
||||
|
||||
Loading…
Reference in new issue