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

wip: adding general tab for react panel edit mode

Browse Source
This commit is contained in:
Torkel Ödegaard
2018-11-14 17:57:37 +01:00
parent fade3c47ca
commit 159c5cdb63
5 changed files with 89 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/app/features/panel/GeneralTabCtrl.ts Normal file
View File

@@ -0,0 +1,23 @@
import coreModule from 'app/core/core_module';
import { DashboardModel } from '../dashboard/dashboard_model';
export class GeneralTabCtrl {
panelCtrl: any;
/** @ngInject */
constructor($scope) {
this.panelCtrl = $scope.ctrl;
}
}
/** @ngInject */
export function generalTab() {
'use strict';
return {
restrict: 'E',
templateUrl: 'public/app/features/panel/partials/general_tab.html',
controller: GeneralTabCtrl,
};
}
coreModule.directive('panelGeneralTab', generalTab);

4
public/app/features/panel/panel_ctrl.ts
View File

@@ -12,6 +12,8 @@ import {
sharePanel as sharePanelUtil,
} from 'app/features/dashboard/utils/panel';
import { generalTab } from './GeneralTabCtrl';
import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants';
export class PanelCtrl {
@@ -91,7 +93,7 @@ export class PanelCtrl {
initEditMode() {
this.editorTabs = [];
this.addEditorTab('General', 'public/app/partials/panelgeneral.html');
this.addEditorTab('General', generalTab);
this.editModeInitiated = true;
this.events.emit('init-edit-mode', null);

37
public/app/features/panel/partials/general_tab.html Normal file
View File

@@ -0,0 +1,37 @@
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Info</h5>
<div class="gf-form">
<span class="gf-form-label width-7">Title</span>
<input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title'></input>
</div>
<div class="gf-form gf-form--v-stretch">
<span class="gf-form-label width-7">Description</span>
<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.panel.description" placeholder="Panel description, supports markdown & links"></textarea>
</div>
<gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Repeat</h5>
<div class="gf-form">
<span class="gf-form-label width-9">For each value of</span>
<dash-repeat-option panel="ctrl.panel"></dash-repeat-option>
</div>
<div class="gf-form" ng-show="ctrl.panel.repeat">
<span class="gf-form-label width-9">Direction</span>
<select class="gf-form-input" ng-model="ctrl.panel.repeatDirection" ng-options="f.value as f.text for f in [{value: 'v', text: 'Vertical'}, {value: 'h', text: 'Horizontal'}]">
<option value=""></option>
</select>
</div>
<div class="gf-form" ng-show="ctrl.panel.repeat && ctrl.panel.repeatDirection == 'h'">
<span class="gf-form-label width-9">Min width</span>
<select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]">
<option value=""></option>
</select>
</div>
</div>
<panel-links-editor panel="ctrl.panel"></panel-links-editor>