mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
progress on rows as panelsW
This commit is contained in:
Torkel Ödegaard
79
public/app/core/components/row_ctrl.ts
Normal file
79
public/app/core/components/row_ctrl.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
///<reference path="../../headers/common.d.ts" />
|
||||
|
||||
import _ from 'lodash';
|
||||
|
||||
export class DashboardRowCtrl {
|
||||
static template = `
|
||||
<a class="dashboard-row__title pointer" ng-click="ctrl.toggle()">
|
||||
<span class="dashboard-row__title-text">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>
|
||||
</a>
|
||||
<a class="dashboard-row__settings pointer">
|
||||
<i class="fa fa-cog"></i>
|
||||
</a>
|
||||
<div class="dashboard-row__drag panel-drag-handle" ng-if="ctrl.isCollapsed">
|
||||
</div>
|
||||
`;
|
||||
|
||||
dashboard: any;
|
||||
panel: any;
|
||||
isCollapsed: boolean;
|
||||
|
||||
constructor(private $rootScope) {
|
||||
console.log(this);
|
||||
this.panel.hiddenPanels = this.panel.hiddenPanels || [];
|
||||
this.isCollapsed = this.panel.hiddenPanels.length > 0;
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if (this.isCollapsed) {
|
||||
let panelIndex = _.indexOf(this.dashboard.panels, this.panel);
|
||||
|
||||
for (let child of this.panel.hiddenPanels) {
|
||||
this.dashboard.panels.splice(panelIndex+1, 0, child);
|
||||
child.y = this.panel.y+1;
|
||||
console.log('restoring child', child);
|
||||
}
|
||||
|
||||
this.panel.hiddenPanels = [];
|
||||
this.isCollapsed = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.isCollapsed = true;
|
||||
let foundRow = false;
|
||||
|
||||
for (let i = 0; i < this.dashboard.panels.length; i++) {
|
||||
let panel = this.dashboard.panels[i];
|
||||
|
||||
if (panel === this.panel) {
|
||||
console.log('found row');
|
||||
foundRow = true;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!foundRow) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (panel.type === 'row') {
|
||||
break;
|
||||
}
|
||||
|
||||
this.panel.hiddenPanels.push(panel);
|
||||
console.log('hiding child', panel.id);
|
||||
}
|
||||
|
||||
for (let hiddenPanel of this.panel.hiddenPanels) {
|
||||
this.dashboard.removePanel(hiddenPanel, false);
|
||||
}
|
||||
}
|
||||
|
||||
link(scope, elem) {
|
||||
elem.addClass('dashboard-row');
|
||||
|
||||
scope.$watch('ctrl.isCollapsed', () => {
|
||||
elem.toggleClass('dashboard-row--collapse', this.isCollapsed);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,62 +6,7 @@ import _ from 'lodash';
|
||||
import config from 'app/core/config';
|
||||
import coreModule from 'app/core/core_module';
|
||||
import {UnknownPanelCtrl} from 'app/plugins/panel/unknown/module';
|
||||
|
||||
export class PanelRow {
|
||||
static template = `
|
||||
<h2 class="panel-header">Row</h2>
|
||||
<a ng-click="ctrl.collapse()">Collapse</a>
|
||||
`;
|
||||
|
||||
dashboard: any;
|
||||
panel: any;
|
||||
|
||||
constructor(private $rootScope) {
|
||||
console.log(this);
|
||||
this.panel.hiddenPanels = this.panel.hiddenPanels || [];
|
||||
}
|
||||
|
||||
collapse() {
|
||||
if (this.panel.hiddenPanels.length > 0) {
|
||||
let panelIndex = _.indexOf(this.dashboard.panels, this.panel);
|
||||
|
||||
for (let child of this.panel.hiddenPanels) {
|
||||
this.dashboard.panels.splice(panelIndex+1, 0, child);
|
||||
child.y = this.panel.y+1;
|
||||
console.log('restoring child', child);
|
||||
}
|
||||
|
||||
this.panel.hiddenPanels = [];
|
||||
return;
|
||||
}
|
||||
|
||||
let foundRow = false;
|
||||
for (let i = 0; i < this.dashboard.panels.length; i++) {
|
||||
let panel = this.dashboard.panels[i];
|
||||
|
||||
if (panel === this.panel) {
|
||||
console.log('found row');
|
||||
foundRow = true;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!foundRow) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (panel.type === 'row') {
|
||||
break;
|
||||
}
|
||||
|
||||
this.panel.hiddenPanels.push(panel);
|
||||
console.log('hiding child', panel.id);
|
||||
}
|
||||
|
||||
for (let hiddenPanel of this.panel.hiddenPanels) {
|
||||
this.dashboard.removePanel(hiddenPanel, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
import {DashboardRowCtrl} from '../components/row_ctrl';
|
||||
|
||||
/** @ngInject **/
|
||||
function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $templateCache) {
|
||||
@@ -113,10 +58,10 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
|
||||
function loadPanelComponentInfo(scope, attrs) {
|
||||
if (scope.panel.type === 'row') {
|
||||
return $q.when({
|
||||
name: 'panel-row',
|
||||
name: 'dashboard-row',
|
||||
bindings: {dashboard: "=", panel: "="},
|
||||
attrs: {dashboard: "ctrl.dashboard", panel: "panel"},
|
||||
Component: PanelRow,
|
||||
Component: DashboardRowCtrl,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ export interface Panel {
|
||||
title: string;
|
||||
}
|
||||
|
||||
export const CELL_HEIGHT = 60;
|
||||
export const CELL_HEIGHT = 30;
|
||||
export const CELL_VMARGIN = 15;
|
||||
|
||||
export class DashboardModel {
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
<!-- <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 | interpolateTemplateVars:this}}</span> -->
|
||||
<!-- </a> -->
|
||||
<!-- </div> -->
|
||||
<!-- -->
|
||||
<!-- <dash-grid ng-if="!ctrl.row.collapse" row="ctrl.row" dashboard="ctrl.dashboard"></dash-grid> -->
|
||||
<!-- -->
|
||||
<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 | interpolateTemplateVars:this}}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Row</h2>
|
||||
|
||||
@@ -1,52 +1,55 @@
|
||||
|
||||
.dash-row {
|
||||
display: block;
|
||||
.dashboard-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
|
||||
&--collapse {
|
||||
.dash-row-header {
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
margin-bottom: $panel-margin*2;
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
margin-bottom: $panel-margin*2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $panel-bg;
|
||||
.dashboard-row__chevron {
|
||||
color: $link-color;
|
||||
}
|
||||
.dashboard-row__settings {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dash-row-header {
|
||||
.dashboard-row__title {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-right: $panel-margin;
|
||||
margin-left: 0;
|
||||
|
||||
.h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem; font-weight: 300; }
|
||||
.h2 { font-size: 2.4rem; line-height: 3.5rem; font-weight: 300; }
|
||||
.h3 { font-size: 2.0rem; line-height: 3rem; font-weight: 300;}
|
||||
.h4 { font-size: 1.7rem; font-weight: 300;}
|
||||
.h5 { font-size: 1.4rem; font-weight: 300;}
|
||||
.h6 { font-size: 1rem; font-weight: 300; }
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
//text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dash-row-header-title {
|
||||
padding: 0.6rem;
|
||||
flex-grow: 1;
|
||||
.dashboard-row__chevron {
|
||||
padding: 0 2px;
|
||||
font-size: $font-size-xs;
|
||||
color: $text-muted;
|
||||
position: relative;
|
||||
left: -3px;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.dash-row-collapse-toggle {
|
||||
padding: 0 2px;
|
||||
font-size: $font-size-xs;
|
||||
color: $text-muted;
|
||||
position: relative;
|
||||
left: -3px;
|
||||
top: -1px;
|
||||
}
|
||||
.dashboard-row__settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dash-row-collapse-toggle {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
.dashboard-row__title-text {
|
||||
padding-left: 0.6rem;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.panels-wrapper {
|
||||
|
||||
Reference in New Issue
Block a user