From 61459b287cb325430b3580c791e83201ebce2e47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 10 Aug 2017 15:29:40 +0200 Subject: [PATCH] grid: new grid fixes --- public/app/features/panel/panel_directive.ts | 84 -------------------- public/sass/components/_gridstack.scss | 36 ++++----- public/sass/components/_view_states.scss | 2 - public/sass/pages/_dashboard.scss | 26 ------ 4 files changed, 16 insertions(+), 132 deletions(-) diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 59ecb6778b7..83fb32a34c6 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -189,90 +189,6 @@ module.directive('grafanaPanel', function($rootScope, $document) { }; }); -module.directive('panelResizer', function($rootScope) { - return { - restrict: 'E', - template: '', - 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) { return { restrict: 'E', diff --git a/public/sass/components/_gridstack.scss b/public/sass/components/_gridstack.scss index cb2ceb8b995..019f077f0b1 100644 --- a/public/sass/components/_gridstack.scss +++ b/public/sass/components/_gridstack.scss @@ -45,10 +45,11 @@ .grid-stack > .grid-stack-item > .ui-resizable-handle { position: absolute; - font-size: 0.1px; display: block; -ms-touch-action: none; touch-action: none; + font-size: 10px; + color: $text-color-weak; } .grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, @@ -69,30 +70,25 @@ .grid-stack > .grid-stack-item > .ui-resizable-se, .grid-stack > .grid-stack-item > .ui-resizable-sw { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K); - background-repeat: no-repeat; - background-position: center; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); + font-family: 'grafana-icons' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -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 { cursor: se-resize; width: 16px; height: 16px; - right: 10px; - bottom: 0; + right: 6px; + bottom: -2px; } .grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle { diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index e9698be64b2..2a7d28297eb 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -3,7 +3,6 @@ .dash-row-menu-container { display: none; } - .resize-panel-handle, .panel-drop-zone { visibility: hidden; } @@ -24,7 +23,6 @@ .user-activity-low { .add-row-panel-hint, .dash-row-menu-container, - .resize-panel-handle, .panel-drop-zone .dashnav-refresh-action, .dashnav-zoom-out, diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index badba830fbf..0151f679aaa 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -20,13 +20,7 @@ div.flot-text { } .panel { - //display: inline-block; - //float: left; - &--solo { - .resize-panel-handle { - display: none; - } .panel-container { border: none; } @@ -251,26 +245,6 @@ div.flot-text { 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 { font-family: $headings-font-family; font-size: $font-size-h3;