Skip to content

N
nexpie-grafana-theme
Commit 77b42220 by Torkel Ödegaard
Options

feat: new grid fixes

parent d25dae9b
Showing with 46 additions and 92 deletions
public/app/features/dashboard/dashgrid/dashgrid.ts
...@@ -53,10 +53,8 @@ export class GridCtrl { ...@@ -53,10 +53,8 @@ export class GridCtrl {
panel.y = item.y; panel.y = item.y;
panel.width = item.width; panel.width = item.width;
panel.height = item.height; panel.height = item.height;
console.log('update panel', panel.id, panel.height);
} }
this.$rootScope.$broadcast('render'); this.$rootScope.$broadcast('render');
console.log('broadcast render');
} }
bindItem(element) { bindItem(element) {
...@@ -77,7 +75,6 @@ export function dashGrid($timeout) { ...@@ -77,7 +75,6 @@ export function dashGrid($timeout) {
}, },
link: function(scope, elem, attrs, ctrl) { link: function(scope, elem, attrs, ctrl) {
$timeout(function() { $timeout(function() {
console.log(elem.html());
ctrl.init(); ctrl.init();
}); });
} }
...@@ -85,7 +82,7 @@ export function dashGrid($timeout) { ...@@ -85,7 +82,7 @@ export function dashGrid($timeout) {
} }
/** @ngInject **/ /** @ngInject **/
export function dashGridItem($timeout) { export function dashGridItem($timeout, $rootScope) {
return { return {
restrict: "E", restrict: "E",
scope: { scope: {
...@@ -104,6 +101,21 @@ export function dashGridItem($timeout) { ...@@ -104,6 +101,21 @@ export function dashGridItem($timeout) {
'data-gs-height': panel.height, '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'); //var item = element.data('_gridstack_node');
//console.log('link item', item); //console.log('link item', item);
//gridCtrl.bindItem(element); //gridCtrl.bindItem(element);
......
public/app/features/panel/panel_ctrl.ts
...@@ -169,21 +169,15 @@ export class PanelCtrl { ...@@ -169,21 +169,15 @@ export class PanelCtrl {
} }
calculatePanelHeight() { calculatePanelHeight() {
// if (this.fullscreen) { if (this.fullscreen) {
// var docHeight = $(window).height(); var docHeight = $(window).height();
// var editHeight = Math.floor(docHeight * 0.4); var editHeight = Math.floor(docHeight * 0.4);
// var fullscreenHeight = Math.floor(docHeight * 0.8); var fullscreenHeight = Math.floor(docHeight * 0.8);
// this.containerHeight = this.editMode ? editHeight : fullscreenHeight; this.containerHeight = this.editMode ? editHeight : fullscreenHeight;
// } else { } else {
// this.containerHeight = this.panel.height || this.row.height; this.containerHeight = this.panel.height * CELL_HEIGHT + ((this.panel.height-1) * CELL_VMARGIN);
// 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);
} }
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)); this.height = this.containerHeight - (PANEL_BORDER + PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT));
} }
......
public/app/features/panel/panel_directive.ts
...@@ -20,7 +20,7 @@ var panelTemplate = ` ...@@ -20,7 +20,7 @@ var panelTemplate = `
<i class="fa fa-spinner fa-spin"></i> <i class="fa fa-spinner fa-spin"></i>
</span> </span>
<panel-header class="panel-title-container drag-handle" panel-ctrl="ctrl"></panel-header> <panel-header class="panel-title-container" panel-ctrl="ctrl"></panel-header>
</div> </div>
<div class="panel-content"> <div class="panel-content">
...@@ -134,14 +134,6 @@ module.directive('grafanaPanel', function($rootScope, $document) { ...@@ -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() { function updatePanelCornerInfo() {
var cornerMode = ctrl.getInfoMode(); var cornerMode = ctrl.getInfoMode();
cornerInfoElem[0].className = 'panel-info-corner panel-info-corner--' + cornerMode; cornerInfoElem[0].className = 'panel-info-corner panel-info-corner--' + cornerMode;
......
public/app/features/panel/panel_header.ts
...@@ -5,9 +5,9 @@ import angular from 'angular'; ...@@ -5,9 +5,9 @@ import angular from 'angular';
import {coreModule} from 'app/core/core'; import {coreModule} from 'app/core/core';
var template = ` var template = `
<span class="panel-title drag-handle"> <span class="panel-title">
<span class="icon-gf panel-alert-icon"></span> <span class="icon-gf panel-alert-icon"></span>
<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span> <span class="panel-title-text">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>
<span class="panel-menu-container dropdown"> <span class="panel-menu-container dropdown">
<span class="fa fa-caret-down panel-menu-toggle" data-toggle="dropdown"></span> <span class="fa fa-caret-down panel-menu-toggle" data-toggle="dropdown"></span>
<ul class="dropdown-menu dropdown-menu--menu panel-menu" role="menu"> <ul class="dropdown-menu dropdown-menu--menu panel-menu" role="menu">
...@@ -92,6 +92,12 @@ function panelHeader($compile) { ...@@ -92,6 +92,12 @@ function panelHeader($compile) {
elem.click(function(evt) { elem.click(function(evt) {
const targetClass = evt.target.className; const targetClass = evt.target.className;
console.log(elem.closest('.ui-draggable-dragging'));
// ignore click if we are dragging
if (elem.closest('.ui-draggable-dragging').length > 0) {
return;
}
// remove existing scope // remove existing scope
if (menuScope) { if (menuScope) {
menuScope.$destroy(); menuScope.$destroy();
...@@ -99,11 +105,10 @@ function panelHeader($compile) { ...@@ -99,11 +105,10 @@ function panelHeader($compile) {
menuScope = scope.$new(); menuScope = scope.$new();
let menuHtml = createMenuTemplate(scope.ctrl); let menuHtml = createMenuTemplate(scope.ctrl);
console.log(menuHtml);
menuElem.html(menuHtml); menuElem.html(menuHtml);
$compile(menuElem)(menuScope); $compile(menuElem)(menuScope);
if (targetClass === 'panel-title-text drag-handle' || targetClass === 'panel-title drag-handle') { if (targetClass === 'panel-title-text' || targetClass === 'panel-title') {
evt.stopPropagation(); evt.stopPropagation();
elem.find('[data-toggle=dropdown]').dropdown('toggle'); elem.find('[data-toggle=dropdown]').dropdown('toggle');
} }
......
public/sass/components/_gridstack.scss
...@@ -15,7 +15,8 @@ ...@@ -15,7 +15,8 @@
} }
.grid-stack .grid-stack-placeholder > .placeholder-content { .grid-stack .grid-stack-placeholder > .placeholder-content {
border: 1px dashed lightgray; background: $input-label-bg;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8);
margin: 0; margin: 0;
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -41,8 +42,6 @@ ...@@ -41,8 +42,6 @@
right: 7px; right: 7px;
bottom: 0; bottom: 0;
width: auto; width: auto;
overflow-x: hidden;
overflow-y: auto;
} }
.grid-stack > .grid-stack-item > .ui-resizable-handle { .grid-stack > .grid-stack-item > .ui-resizable-handle {
...@@ -89,38 +88,6 @@ ...@@ -89,38 +88,6 @@
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.grid-stack > .grid-stack-item > .ui-resizable-nw {
cursor: nw-resize;
width: 16px;
height: 16px;
left: 10px;
top: 0;
}
.grid-stack > .grid-stack-item > .ui-resizable-n {
cursor: n-resize;
height: 10px;
top: 0;
left: 25px;
right: 25px;
}
.grid-stack > .grid-stack-item > .ui-resizable-ne {
cursor: ne-resize;
width: 16px;
height: 16px;
right: 10px;
top: 0;
}
.grid-stack > .grid-stack-item > .ui-resizable-e {
cursor: e-resize;
width: 10px;
right: 10px;
top: 15px;
bottom: 15px;
}
.grid-stack > .grid-stack-item > .ui-resizable-se { .grid-stack > .grid-stack-item > .ui-resizable-se {
cursor: se-resize; cursor: se-resize;
width: 16px; width: 16px;
...@@ -129,30 +96,6 @@ ...@@ -129,30 +96,6 @@
bottom: 0; bottom: 0;
} }
.grid-stack > .grid-stack-item > .ui-resizable-s {
cursor: s-resize;
height: 10px;
left: 25px;
bottom: 0;
right: 25px;
}
.grid-stack > .grid-stack-item > .ui-resizable-sw {
cursor: sw-resize;
width: 16px;
height: 16px;
left: 10px;
bottom: 0;
}
.grid-stack > .grid-stack-item > .ui-resizable-w {
cursor: w-resize;
width: 10px;
left: 10px;
top: 15px;
bottom: 15px;
}
.grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle { .grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
display: none !important; display: none !important;
} }
......
public/sass/pages/_dashboard.scss
...@@ -35,7 +35,6 @@ div.flot-text { ...@@ -35,7 +35,6 @@ div.flot-text {
.panel-margin { .panel-margin {
margin: 0 0.4rem 0.8rem 0.4rem; margin: 0 0.4rem 0.8rem 0.4rem;
//display: block;
} }
.panel-container { .panel-container {
...@@ -234,6 +233,15 @@ div.flot-text { ...@@ -234,6 +233,15 @@ div.flot-text {
.panel-drop-zone { .panel-drop-zone {
display: none !important; display: none !important;
} }
.grid-stack > .grid-stack-item {
position: unset;
display: none;
}
.panel-fullscreen {
display: block !important;
}
} }
.panel-time-info { .panel-time-info {
...@@ -243,7 +251,7 @@ div.flot-text { ...@@ -243,7 +251,7 @@ div.flot-text {
color: $blue; color: $blue;
font-size: 85%; font-size: 85%;
position: absolute; position: absolute;
top: 0; top: 4px;
right: 0; right: 0;
} }
......
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