Skip to content

N
nexpie-grafana-theme
Commit 47cf8e63 by Torkel Ödegaard
Options

grid: minor progres on new grid

parent 4639fe68
Showing with 38 additions and 53 deletions
public/app/core/components/row_ctrl.ts
...@@ -11,26 +11,22 @@ export class DashboardRowCtrl { ...@@ -11,26 +11,22 @@ export class DashboardRowCtrl {
</span> </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> </a>
<div class="dashboard-row__drag grid-drag-handle" ng-if="ctrl.isCollapsed"> <div class="dashboard-row__actions">
drag <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>
<a class="dashboard-row__settings pointer">
<i class="fa fa-cog"></i>
</a>
`; `;
dashboard: any; dashboard: any;
panel: any; panel: any;
isCollapsed: boolean;
constructor(private $rootScope) { constructor(private $rootScope) {
console.log(this);
this.panel.hiddenPanels = this.panel.hiddenPanels || []; this.panel.hiddenPanels = this.panel.hiddenPanels || [];
this.isCollapsed = this.panel.hiddenPanels.length > 0;
} }
toggle() { toggle() {
if (this.isCollapsed) { if (this.panel.collapse) {
let panelIndex = _.indexOf(this.dashboard.panels, this.panel); let panelIndex = _.indexOf(this.dashboard.panels, this.panel);
for (let child of this.panel.hiddenPanels) { for (let child of this.panel.hiddenPanels) {
...@@ -40,11 +36,11 @@ export class DashboardRowCtrl { ...@@ -40,11 +36,11 @@ export class DashboardRowCtrl {
} }
this.panel.hiddenPanels = []; this.panel.hiddenPanels = [];
this.isCollapsed = false; this.panel.collapse = false;
return; return;
} }
this.isCollapsed = true; this.panel.collapse = true;
let foundRow = false; let foundRow = false;
for (let i = 0; i < this.dashboard.panels.length; i++) { for (let i = 0; i < this.dashboard.panels.length; i++) {
...@@ -76,8 +72,8 @@ export class DashboardRowCtrl { ...@@ -76,8 +72,8 @@ export class DashboardRowCtrl {
link(scope, elem) { link(scope, elem) {
elem.addClass('dashboard-row'); elem.addClass('dashboard-row');
scope.$watch('ctrl.isCollapsed', () => { scope.$watch('ctrl.panel.collapse', () => {
elem.toggleClass('dashboard-row--collapse', this.isCollapsed); elem.toggleClass('dashboard-row--collapse', this.panel.collapse === true);
}); });
} }
} }
......
public/app/features/dashboard/dashboard_ctrl.ts
...@@ -113,10 +113,10 @@ export class DashboardCtrl { ...@@ -113,10 +113,10 @@ export class DashboardCtrl {
}; };
$scope.registerWindowResizeEvent = function() { $scope.registerWindowResizeEvent = function() {
// angular.element(window).bind('resize', function() { angular.element(window).bind('resize', function() {
// $timeout.cancel(resizeEventTimeout); $timeout.cancel(resizeEventTimeout);
// resizeEventTimeout = $timeout(function() { $scope.$broadcast('render'); }, 200); resizeEventTimeout = $timeout(function() { $scope.$broadcast('render'); }, 200);
// }); });
$scope.$on('$destroy', function() { $scope.$on('$destroy', function() {
angular.element(window).unbind('resize'); angular.element(window).unbind('resize');
......
public/app/features/dashboard/dashgrid/dashgrid.ts
...@@ -31,6 +31,7 @@ export class GridCtrl { ...@@ -31,6 +31,7 @@ export class GridCtrl {
isInitialized: boolean; isInitialized: boolean;
isDestroyed: boolean; isDestroyed: boolean;
index: number; index: number;
changeRenderPromise: any;
/** @ngInject */ /** @ngInject */
constructor(private $scope, private $element, private $timeout) { constructor(private $scope, private $element, private $timeout) {
...@@ -78,6 +79,8 @@ export class GridCtrl { ...@@ -78,6 +79,8 @@ export class GridCtrl {
} }
onGridStackItemsChanged(items) { onGridStackItemsChanged(items) {
console.log('onGridStackItemsChanged');
for (let item of items) { for (let item of items) {
// find panel // find panel
var panel = this.dashboard.getPanelById(parseInt(item.id)); var panel = this.dashboard.getPanelById(parseInt(item.id));
...@@ -104,24 +107,14 @@ export class GridCtrl { ...@@ -104,24 +107,14 @@ export class GridCtrl {
return 0; return 0;
}); });
let lastPanel = null; if (this.changeRenderPromise) {
for (let panel of this.dashboard.panels) { this.$timeout.cancel(this.changeRenderPromise);
if (lastPanel && lastPanel.type === 'row' && panel.type === 'row') {
if (panel.hiddenPanels.length === 0) {
continue;
}
for (let item of items) {
if (panel.id === parseInt(item.id)) {
this.gridstack.move(item.el, item.x, item.y-1, item.width, item.height, false);
}
}
}
lastPanel = panel;
} }
this.$scope.$broadcast('render'); this.changeRenderPromise = this.$timeout(() => {
console.log('broadcasting render');
this.$scope.$broadcast('render');
});
} }
destroy() { destroy() {
...@@ -210,20 +203,6 @@ export function dashGridItem($timeout, $rootScope) { ...@@ -210,20 +203,6 @@ export function dashGridItem($timeout, $rootScope) {
gridStackNode = element.data('_gridstack_node'); gridStackNode = element.data('_gridstack_node');
}, 500); }, 500);
} }
// scope.onItemRemoved({item: item});
// ctrl.removeItem(element);
//var item = element.data('_gridstack_node');
//console.log('link item', item);
//gridCtrl.bindItem(element);
// element.bind('$destroy', function() {
// var item = element.data('_gridstack_node');
// scope.onItemRemoved({item: item});
// ctrl.removeItem(element);
// });
} }
}; };
} }
......
public/sass/components/_row.scss
...@@ -15,8 +15,10 @@ ...@@ -15,8 +15,10 @@
.dashboard-row__chevron { .dashboard-row__chevron {
color: $link-color; color: $link-color;
} }
.dashboard-row__settings { .dashboard-row__actions {
display: block; visibility: visible;
opacity: 1;
transition: opacity 300ms ease-in-out 200ms;
} }
} }
} }
...@@ -36,12 +38,20 @@ ...@@ -36,12 +38,20 @@
font-size: $font-size-xs; font-size: $font-size-xs;
color: $text-muted; color: $text-muted;
position: relative; position: relative;
top: 6px; top: 5px;
} }
.dashboard-row__settings { .dashboard-row__actions {
display: none; font-size: $font-size-sm;
color: $text-color-weak; visibility: hidden;
opacity: 0;
a {
color: $text-color-weak;
padding-left: 5px;
&:hover {
color: $link-hover-color;
}
}
} }
.dashboard-row__title-text { .dashboard-row__title-text {
......
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