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

grid: minor progres on new grid

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-08-24 16:37:00 +02:00
parent 47cf8e6337
commit 160d8cec92
3 changed files with 70 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/app/core/components/row_ctrl.ts
View File

@ -6,16 +6,21 @@ export class DashboardRowCtrl {
static template = `
<a class="dashboard-row__title pointer" ng-click="ctrl.toggle()">
<span class="dashboard-row__chevron">
<i class="fa fa-chevron-down" ng-hide="ctrl.isCollapsed"></i>
<i class="fa fa-chevron-right" ng-show="ctrl.isCollapsed"></i>
<i class="fa fa-chevron-down" ng-hide="ctrl.panel.collapse"></i>
<i class="fa fa-chevron-right" ng-show="ctrl.panel.collapse"></i>
</span>
<span class="dashboard-row__title-text">
{{ctrl.panel.title | interpolateTemplateVars:this}}
</span>
<span class="dashboard-row__title-text">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>
</a>
<div class="dashboard-row__panel_count">
({{ctrl.panel.hiddenPanels.length}} hidden panels)
</div>
<div class="dashboard-row__actions">
<a class="pointer" ng-click="ctrl.moveUp()"><span class="fa fa-arrow-up"></i></a>
<a class="pointer" ng-click="ctrl.moveDown()"><span class="fa fa-arrow-down"></i></a>
<a class="pointer" ng-click="ctrl.openSettings()"><span class="fa fa-cog"></i></a>
</div>
<div class="dashboard-row__drag grid-drag-handle">
</div>
`;
dashboard: any;
@ -69,6 +74,21 @@ export class DashboardRowCtrl {
}
}
moveUp() {
// let panelIndex = _.indexOf(this.dashboard.panels, this.panel);
// let rowAbove = null;
// for (let index = panelIndex-1; index > 0; index--) {
// panel = this.dashboard.panels[index];
// if (panel.type === 'row') {
// rowAbove = panel;
// }
// }
//
// if (rowAbove) {
// this.panel.y = rowAbove.y;
// }
}
link(scope, elem) {
elem.addClass('dashboard-row');

10
public/app/features/dashboard/dashgrid/dashgrid.ts
View File

@ -1,6 +1,7 @@
///<reference path="../../../headers/common.d.ts" />
import $ from 'jquery';
import _ from 'lodash';
import coreModule from 'app/core/core_module';
import {DashboardModel, CELL_HEIGHT, CELL_VMARGIN} from '../model';
@ -169,6 +170,15 @@ export function dashGridItem($timeout, $rootScope) {
'data-gs-no-resize': panel.type === 'row',
});
// listen for row moments
scope.$watch("panel.y", function(newModelY) {
let elementY = parseInt(element.attr('data-gs-y'));
console.log('new panel y', newModelY, elementY);
if (_.isNumber(newModelY) && elementY !== newModelY) {
gridCtrl.gridstack.move(element, panel.x, panel.y);
}
});
$rootScope.onAppEvent('panel-fullscreen-exit', (evt, payload) => {
if (panel.id !== payload.panelId) {
return;

41
public/sass/components/_row.scss
View File

@ -1,24 +1,35 @@
$dashboard-row-height: 30px;
.dashboard-row {
display: flex;
height: 30px;
height: $dashboard-row-height;
line-height: $dashboard-row-height;
align-items: center;
padding: 0 0.5rem;
&--collapse {
background: $panel-bg;
border: $panel-border;
margin-bottom: $panel-margin*2;
.dashboard-row__panel_count {
display: block;
}
.dashboard-row__drag,
.dashboard-row__actions {
visibility: visible;
opacity: 1;
}
}
&:hover {
.dashboard-row__chevron {
color: $link-color;
}
.dashboard-row__actions {
visibility: visible;
opacity: 1;
transition: opacity 300ms ease-in-out 200ms;
transition: opacity 200ms ease-in-out 100ms;
}
}
}
@ -38,16 +49,17 @@
font-size: $font-size-xs;
color: $text-muted;
position: relative;
top: 5px;
top: 1px;
}
.dashboard-row__actions {
padding-right: 1rem;
font-size: $font-size-sm;
visibility: hidden;
opacity: 0;
a {
color: $text-color-weak;
padding-left: 5px;
padding-left: $spacer;
&:hover {
color: $link-hover-color;
}
@ -59,6 +71,23 @@
color: $text-color;
}
.dashboard-row__panel_count {
color: $text-color-weak;
font-style: italic;
font-size: $font-size-sm;
font-weight: normal;
display: none;
}
.dashboard-row__drag {
cursor: move;
width: 1rem;
height: $dashboard-row-height;
background: url("../img/grab_dark.svg") no-repeat 50% 50%;
background-size: 8px;
visibility: hidden;
}
.panels-wrapper {
flex-grow: 1;
position: relative;