- drag
+
-
-
-
`;
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) {
+ if (this.panel.collapse) {
let panelIndex = _.indexOf(this.dashboard.panels, this.panel);
for (let child of this.panel.hiddenPanels) {
@@ -40,11 +36,11 @@ export class DashboardRowCtrl {
}
this.panel.hiddenPanels = [];
- this.isCollapsed = false;
+ this.panel.collapse = false;
return;
}
- this.isCollapsed = true;
+ this.panel.collapse = true;
let foundRow = false;
for (let i = 0; i < this.dashboard.panels.length; i++) {
@@ -76,8 +72,8 @@ export class DashboardRowCtrl {
link(scope, elem) {
elem.addClass('dashboard-row');
- scope.$watch('ctrl.isCollapsed', () => {
- elem.toggleClass('dashboard-row--collapse', this.isCollapsed);
+ scope.$watch('ctrl.panel.collapse', () => {
+ elem.toggleClass('dashboard-row--collapse', this.panel.collapse === true);
});
}
}
diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts
index df0b36e18d6..902e06fc086 100644
--- a/public/app/features/dashboard/dashboard_ctrl.ts
+++ b/public/app/features/dashboard/dashboard_ctrl.ts
@@ -113,10 +113,10 @@ export class DashboardCtrl {
};
$scope.registerWindowResizeEvent = function() {
- // angular.element(window).bind('resize', function() {
- // $timeout.cancel(resizeEventTimeout);
- // resizeEventTimeout = $timeout(function() { $scope.$broadcast('render'); }, 200);
- // });
+ angular.element(window).bind('resize', function() {
+ $timeout.cancel(resizeEventTimeout);
+ resizeEventTimeout = $timeout(function() { $scope.$broadcast('render'); }, 200);
+ });
$scope.$on('$destroy', function() {
angular.element(window).unbind('resize');
diff --git a/public/app/features/dashboard/dashgrid/dashgrid.ts b/public/app/features/dashboard/dashgrid/dashgrid.ts
index 9a6df7cadb0..417a17145eb 100644
--- a/public/app/features/dashboard/dashgrid/dashgrid.ts
+++ b/public/app/features/dashboard/dashgrid/dashgrid.ts
@@ -31,6 +31,7 @@ export class GridCtrl {
isInitialized: boolean;
isDestroyed: boolean;
index: number;
+ changeRenderPromise: any;
/** @ngInject */
constructor(private $scope, private $element, private $timeout) {
@@ -78,6 +79,8 @@ export class GridCtrl {
}
onGridStackItemsChanged(items) {
+ console.log('onGridStackItemsChanged');
+
for (let item of items) {
// find panel
var panel = this.dashboard.getPanelById(parseInt(item.id));
@@ -104,24 +107,14 @@ export class GridCtrl {
return 0;
});
- let lastPanel = null;
- for (let panel of this.dashboard.panels) {
- 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;
+ if (this.changeRenderPromise) {
+ this.$timeout.cancel(this.changeRenderPromise);
}
- this.$scope.$broadcast('render');
+ this.changeRenderPromise = this.$timeout(() => {
+ console.log('broadcasting render');
+ this.$scope.$broadcast('render');
+ });
}
destroy() {
@@ -210,20 +203,6 @@ export function dashGridItem($timeout, $rootScope) {
gridStackNode = element.data('_gridstack_node');
}, 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);
- // });
}
};
}
diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss
index 61a92acb37d..85c3dca4acc 100644
--- a/public/sass/components/_row.scss
+++ b/public/sass/components/_row.scss
@@ -15,8 +15,10 @@
.dashboard-row__chevron {
color: $link-color;
}
- .dashboard-row__settings {
- display: block;
+ .dashboard-row__actions {
+ visibility: visible;
+ opacity: 1;
+ transition: opacity 300ms ease-in-out 200ms;
}
}
}
@@ -36,12 +38,20 @@
font-size: $font-size-xs;
color: $text-muted;
position: relative;
- top: 6px;
+ top: 5px;
}
-.dashboard-row__settings {
- display: none;
- color: $text-color-weak;
+.dashboard-row__actions {
+ font-size: $font-size-sm;
+ visibility: hidden;
+ opacity: 0;
+ a {
+ color: $text-color-weak;
+ padding-left: 5px;
+ &:hover {
+ color: $link-hover-color;
+ }
+ }
}
.dashboard-row__title-text {