From 77b42220f459e987657f0817f96e512f344a9804 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 9 Aug 2017 15:33:19 +0200 Subject: [PATCH] feat: new grid fixes --- .../features/dashboard/dashgrid/dashgrid.ts | 20 ++++-- public/app/features/panel/panel_ctrl.ts | 22 +++---- public/app/features/panel/panel_directive.ts | 10 +-- public/app/features/panel/panel_header.ts | 13 ++-- public/sass/components/_gridstack.scss | 61 +------------------ public/sass/pages/_dashboard.scss | 12 +++- 6 files changed, 46 insertions(+), 92 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/dashgrid.ts b/public/app/features/dashboard/dashgrid/dashgrid.ts index 747e73fd812..c596c916d43 100644 --- a/public/app/features/dashboard/dashgrid/dashgrid.ts +++ b/public/app/features/dashboard/dashgrid/dashgrid.ts @@ -53,10 +53,8 @@ export class GridCtrl { panel.y = item.y; panel.width = item.width; panel.height = item.height; - console.log('update panel', panel.id, panel.height); } this.$rootScope.$broadcast('render'); - console.log('broadcast render'); } bindItem(element) { @@ -77,7 +75,6 @@ export function dashGrid($timeout) { }, link: function(scope, elem, attrs, ctrl) { $timeout(function() { - console.log(elem.html()); ctrl.init(); }); } @@ -85,7 +82,7 @@ export function dashGrid($timeout) { } /** @ngInject **/ -export function dashGridItem($timeout) { +export function dashGridItem($timeout, $rootScope) { return { restrict: "E", scope: { @@ -104,6 +101,21 @@ export function dashGridItem($timeout) { 'data-gs-height': panel.height, }); + $rootScope.onAppEvent('panel-fullscreen-exit', (evt, payload) => { + if (panel.id !== payload.panelId) { + return; + } + element.removeClass('panel-fullscreen'); + }, scope); + + $rootScope.onAppEvent('panel-fullscreen-enter', (evt, payload) => { + if (panel.id !== payload.panelId) { + return; + } + element.addClass('panel-fullscreen'); + }, scope); + + //var item = element.data('_gridstack_node'); //console.log('link item', item); //gridCtrl.bindItem(element); diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index c75b4ca4150..61fe9c974e6 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -169,21 +169,15 @@ export class PanelCtrl { } calculatePanelHeight() { - // if (this.fullscreen) { - // var docHeight = $(window).height(); - // var editHeight = Math.floor(docHeight * 0.4); - // var fullscreenHeight = Math.floor(docHeight * 0.8); - // this.containerHeight = this.editMode ? editHeight : fullscreenHeight; - // } else { - // this.containerHeight = this.panel.height || this.row.height; - // if (_.isString(this.containerHeight)) { - // this.containerHeight = parseInt(this.containerHeight.replace('px', ''), 10); - // } - // } - if (this.panel.id === 4) { - console.log(this.panel.id, this.panel.height); + if (this.fullscreen) { + var docHeight = $(window).height(); + var editHeight = Math.floor(docHeight * 0.4); + var fullscreenHeight = Math.floor(docHeight * 0.8); + this.containerHeight = this.editMode ? editHeight : fullscreenHeight; + } else { + this.containerHeight = this.panel.height * CELL_HEIGHT + ((this.panel.height-1) * CELL_VMARGIN); } - this.containerHeight = this.panel.height * CELL_HEIGHT + ((this.panel.height-1) * CELL_VMARGIN); + this.height = this.containerHeight - (PANEL_BORDER + PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT)); } diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 95fcd6fd41b..59ecb6778b7 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -20,7 +20,7 @@ var panelTemplate = ` - +
@@ -134,14 +134,6 @@ module.directive('grafanaPanel', function($rootScope, $document) { } }); - var lastFullscreen; - $rootScope.onAppEvent('panel-change-view', function(evt, payload) { - if (lastFullscreen !== ctrl.fullscreen) { - elem.toggleClass('panel-fullscreen', ctrl.fullscreen ? true : false); - lastFullscreen = ctrl.fullscreen; - } - }, scope); - function updatePanelCornerInfo() { var cornerMode = ctrl.getInfoMode(); cornerInfoElem[0].className = 'panel-info-corner panel-info-corner--' + cornerMode; diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts index 2bca009604e..98944269412 100644 --- a/public/app/features/panel/panel_header.ts +++ b/public/app/features/panel/panel_header.ts @@ -5,9 +5,9 @@ import angular from 'angular'; import {coreModule} from 'app/core/core'; var template = ` - + - {{ctrl.panel.title | interpolateTemplateVars:this}} + {{ctrl.panel.title | interpolateTemplateVars:this}}