Skip to content

N
nexpie-grafana-theme
Commit 61459b28 by Torkel Ödegaard
Options

grid: new grid fixes

parent 7cb6093d
Showing with 16 additions and 132 deletions
public/app/features/panel/panel_directive.ts
...@@ -189,90 +189,6 @@ module.directive('grafanaPanel', function($rootScope, $document) { ...@@ -189,90 +189,6 @@ module.directive('grafanaPanel', function($rootScope, $document) {
}; };
}); });
module.directive('panelResizer', function($rootScope) {
return {
restrict: 'E',
template: '<span class="resize-panel-handle icon-gf icon-gf-grabber"></span>',
link: function(scope, elem) {
var resizing = false;
var lastPanel;
var ctrl = scope.ctrl;
var handleOffset;
var originalHeight;
var originalWidth;
var maxWidth;
function dragStartHandler(e) {
e.preventDefault();
resizing = true;
handleOffset = $(e.target).offset();
originalHeight = parseInt(ctrl.row.height);
originalWidth = ctrl.panel.span;
maxWidth = $(document).width();
lastPanel = ctrl.row.panels[ctrl.row.panels.length - 1];
$('body').on('mousemove', moveHandler);
$('body').on('mouseup', dragEndHandler);
}
function moveHandler(e) {
ctrl.row.height = Math.round(originalHeight + (e.pageY - handleOffset.top));
ctrl.panel.span = originalWidth + (((e.pageX - handleOffset.left) / maxWidth) * 12);
ctrl.panel.span = Math.min(Math.max(ctrl.panel.span, 1), 12);
ctrl.row.updateRowSpan();
var rowSpan = ctrl.row.span;
// auto adjust other panels
if (Math.floor(rowSpan) < 14) {
// last panel should not push row down
if (lastPanel === ctrl.panel && rowSpan > 12) {
lastPanel.span -= rowSpan - 12;
} else if (lastPanel !== ctrl.panel) {
// reduce width of last panel so total in row is 12
lastPanel.span = lastPanel.span - (rowSpan - 12);
lastPanel.span = Math.min(Math.max(lastPanel.span, 1), 12);
}
}
ctrl.row.panelSpanChanged(true);
scope.$apply(function() {
ctrl.render();
});
}
function dragEndHandler() {
ctrl.panel.span = Math.round(ctrl.panel.span);
if (lastPanel) {
lastPanel.span = Math.round(lastPanel.span);
}
// first digest to propagate panel width change
// then render
$rootScope.$apply(function() {
ctrl.row.panelSpanChanged();
setTimeout(function() {
$rootScope.$broadcast('render');
});
});
$('body').off('mousemove', moveHandler);
$('body').off('mouseup', dragEndHandler);
}
elem.on('mousedown', dragStartHandler);
var unbind = scope.$on("$destroy", function() {
elem.off('mousedown', dragStartHandler);
unbind();
});
}
};
});
module.directive('panelHelpCorner', function($rootScope) { module.directive('panelHelpCorner', function($rootScope) {
return { return {
restrict: 'E', restrict: 'E',
......
public/sass/components/_gridstack.scss
...@@ -45,10 +45,11 @@ ...@@ -45,10 +45,11 @@
.grid-stack > .grid-stack-item > .ui-resizable-handle { .grid-stack > .grid-stack-item > .ui-resizable-handle {
position: absolute; position: absolute;
font-size: 0.1px;
display: block; display: block;
-ms-touch-action: none; -ms-touch-action: none;
touch-action: none; touch-action: none;
font-size: 10px;
color: $text-color-weak;
} }
.grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, .grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,
...@@ -69,30 +70,25 @@ ...@@ -69,30 +70,25 @@
.grid-stack > .grid-stack-item > .ui-resizable-se, .grid-stack > .grid-stack-item > .ui-resizable-se,
.grid-stack > .grid-stack-item > .ui-resizable-sw { .grid-stack > .grid-stack-item > .ui-resizable-sw {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K); font-family: 'grafana-icons' !important;
background-repeat: no-repeat; speak: none;
background-position: center; font-style: normal;
-webkit-transform: rotate(45deg); font-weight: normal;
-moz-transform: rotate(45deg); font-variant: normal;
-ms-transform: rotate(45deg); text-transform: none;
-o-transform: rotate(45deg); line-height: 1;
transform: rotate(45deg); -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&::before {
content: "\e90b";
}
} }
.grid-stack > .grid-stack-item > .ui-resizable-se {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.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;
height: 16px; height: 16px;
right: 10px; right: 6px;
bottom: 0; bottom: -2px;
} }
.grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle { .grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
......
public/sass/components/_view_states.scss
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
.dash-row-menu-container { .dash-row-menu-container {
display: none; display: none;
} }
.resize-panel-handle,
.panel-drop-zone { .panel-drop-zone {
visibility: hidden; visibility: hidden;
} }
...@@ -24,7 +23,6 @@ ...@@ -24,7 +23,6 @@
.user-activity-low { .user-activity-low {
.add-row-panel-hint, .add-row-panel-hint,
.dash-row-menu-container, .dash-row-menu-container,
.resize-panel-handle,
.panel-drop-zone .panel-drop-zone
.dashnav-refresh-action, .dashnav-refresh-action,
.dashnav-zoom-out, .dashnav-zoom-out,
......
public/sass/pages/_dashboard.scss
...@@ -20,13 +20,7 @@ div.flot-text { ...@@ -20,13 +20,7 @@ div.flot-text {
} }
.panel { .panel {
//display: inline-block;
//float: left;
&--solo { &--solo {
.resize-panel-handle {
display: none;
}
.panel-container { .panel-container {
border: none; border: none;
} }
...@@ -251,26 +245,6 @@ div.flot-text { ...@@ -251,26 +245,6 @@ div.flot-text {
right: 0; right: 0;
} }
.resize-panel-handle {
cursor: nwse-resize;
position: absolute;
font-size: 10px;
bottom: 0;
right: 0;
width: 15px;
height: 15px;
visibility: hidden;
opacity: 0;
color: $text-color-faint;
&:before {
left: initial;
right: -1px;
bottom: 0px;
position: absolute;
}
}
.dashboard-header { .dashboard-header {
font-family: $headings-font-family; font-family: $headings-font-family;
font-size: $font-size-h3; font-size: $font-size-h3;
......
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