Skip to content

N
nexpie-grafana-theme
Commit da9c8c81 by Torkel Ödegaard
Options

progress on rows as panelsW

parent a0bb5886
Showing with 128 additions and 104 deletions
public/app/core/components/row_ctrl.ts 0 → 100644
///<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);
});
}
}
public/app/core/directives/plugin_component.ts
...@@ -6,62 +6,7 @@ import _ from 'lodash'; ...@@ -6,62 +6,7 @@ import _ from 'lodash';
import config from 'app/core/config'; import config from 'app/core/config';
import coreModule from 'app/core/core_module'; import coreModule from 'app/core/core_module';
import {UnknownPanelCtrl} from 'app/plugins/panel/unknown/module'; import {UnknownPanelCtrl} from 'app/plugins/panel/unknown/module';
import {DashboardRowCtrl} from '../components/row_ctrl';
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);
}
}
}
/** @ngInject **/ /** @ngInject **/
function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $templateCache) { function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $templateCache) {
...@@ -113,10 +58,10 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ ...@@ -113,10 +58,10 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
function loadPanelComponentInfo(scope, attrs) { function loadPanelComponentInfo(scope, attrs) {
if (scope.panel.type === 'row') { if (scope.panel.type === 'row') {
return $q.when({ return $q.when({
name: 'panel-row', name: 'dashboard-row',
bindings: {dashboard: "=", panel: "="}, bindings: {dashboard: "=", panel: "="},
attrs: {dashboard: "ctrl.dashboard", panel: "panel"}, attrs: {dashboard: "ctrl.dashboard", panel: "panel"},
Component: PanelRow, Component: DashboardRowCtrl,
}); });
} }
......
public/app/features/dashboard/model.ts
...@@ -20,7 +20,7 @@ export interface Panel { ...@@ -20,7 +20,7 @@ export interface Panel {
title: string; title: string;
} }
export const CELL_HEIGHT = 60; export const CELL_HEIGHT = 30;
export const CELL_VMARGIN = 15; export const CELL_VMARGIN = 15;
export class DashboardModel { export class DashboardModel {
......
public/app/features/dashboard/row/row.html
<!-- <div class="dash&#45;row&#45;header"> --> <div class="dash-row-header">
<!-- <a class="dash&#45;row&#45;header&#45;title" ng&#45;click="ctrl.toggleCollapse()"> --> <a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
<!-- <span class="dash&#45;row&#45;collapse&#45;toggle pointer"> --> <span class="dash-row-collapse-toggle pointer">
<!-- <i class="fa fa&#45;chevron&#45;down" ng&#45;show="!ctrl.row.collapse"></i> --> <i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
<!-- <i class="fa fa&#45;chevron&#45;right" ng&#45;show="ctrl.row.collapse"></i> --> <i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
<!-- </span> --> </span>
<!-- <span ng&#45;class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span> --> <span ng-class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span>
<!-- </a> --> </a>
<!-- </div> --> </div>
<!-- -->
<!-- <dash&#45;grid ng&#45;if="!ctrl.row.collapse" row="ctrl.row" dashboard="ctrl.dashboard"></dash&#45;grid> -->
<!-- -->
<h2>Row</h2>
public/sass/components/_row.scss
.dash-row { .dashboard-row {
display: block;
display: flex; display: flex;
flex-direction: column; height: 30px;
position: relative; align-items: center;
&--collapse { &--collapse {
.dash-row-header { background: $panel-bg;
background: $panel-bg; border: $panel-border;
border: $panel-border; margin-bottom: $panel-margin*2;
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; position: relative;
flex-grow: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-right: $panel-margin; margin-right: $panel-margin;
margin-left: 0; margin-left: 0;
font-size: $font-size-lg;
.h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem; font-weight: 300; } font-weight: $font-weight-semi-bold;
.h2 { font-size: 2.4rem; line-height: 3.5rem; font-weight: 300; } //text-align: center;
.h3 { font-size: 2.0rem; line-height: 3rem; font-weight: 300;} display: block;
.h4 { font-size: 1.7rem; font-weight: 300;}
.h5 { font-size: 1.4rem; font-weight: 300;}
.h6 { font-size: 1rem; font-weight: 300; }
} }
.dash-row-header-title { .dashboard-row__chevron {
padding: 0.6rem; padding: 0 2px;
flex-grow: 1; font-size: $font-size-xs;
color: $text-muted;
position: relative;
left: -3px;
top: -1px;
}
.dash-row-collapse-toggle { .dashboard-row__settings {
padding: 0 2px; display: none;
font-size: $font-size-xs; }
color: $text-muted;
position: relative;
left: -3px;
top: -1px;
}
&:hover { .dashboard-row__title-text {
.dash-row-collapse-toggle { padding-left: 0.6rem;
color: $link-color; color: $text-color;
}
}
} }
.panels-wrapper { .panels-wrapper {
......
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