From 96e91b5a0f39e82faa25a094669453c087e70555 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Fri, 24 Mar 2017 15:15:01 +0300 Subject: [PATCH] Move css styles to public/sass/components/_panel_heatmap.scss --- .../panel/heatmap/css/heatmap.dark.css | 70 ------------------- .../panel/heatmap/css/heatmap.light.css | 58 --------------- .../plugins/panel/heatmap/heatmap_tooltip.ts | 4 +- public/app/plugins/panel/heatmap/module.ts | 5 -- public/sass/_grafana.scss | 1 + public/sass/components/_panel_heatmap.scss | 37 ++++++++++ 6 files changed, 40 insertions(+), 135 deletions(-) delete mode 100644 public/app/plugins/panel/heatmap/css/heatmap.dark.css delete mode 100644 public/app/plugins/panel/heatmap/css/heatmap.light.css create mode 100644 public/sass/components/_panel_heatmap.scss diff --git a/public/app/plugins/panel/heatmap/css/heatmap.dark.css b/public/app/plugins/panel/heatmap/css/heatmap.dark.css deleted file mode 100644 index 1a2ba8b7eb0..00000000000 --- a/public/app/plugins/panel/heatmap/css/heatmap.dark.css +++ /dev/null @@ -1,70 +0,0 @@ -.axis text { -} - -.axis { - font-family: "Open Sans", Helvetica, Arial, sans-serif; - font-size: smaller; - fill: #D8D9DA; -} - -.axis path, -.axis line { - fill: none; - stroke: #7B7B7B; - /*shape-rendering: crispEdges;*/ -} - -.axis .domain { - /*opacity: 0;*/ -} - -.tick line { - opacity: 0.4; - stroke: #7B7B7B; -} - -.tick text { - fill: #D8D9DA; -} - -.heatmap-panel { - cursor: crosshair; - padding: 0; -} - -div.heatmap-tooltip { - position: absolute; - text-align: left; - min-width: 160px; - padding: 12px; - font-family: "Open Sans", Helvetica, Arial, sans-serif; - font-size: 13px; - background: #141414; - border: 0px; - border-radius: 8px; - pointer-events: none; -} - -.card-highlighted:hover { - stroke: #D8D9DA; -} - -rect.heatmap-card { - pointer-events: all; -} - -.heatmap-histogram rect { - fill: #828282; -} - -.heatmap-crosshair line { - stroke: #9a1010; - stroke-width: 1; -} - -.heatmap-selection { - stroke-width: 1; - opacity: 0.3; - fill: #828282; - stroke: #D8D9DA; -} diff --git a/public/app/plugins/panel/heatmap/css/heatmap.light.css b/public/app/plugins/panel/heatmap/css/heatmap.light.css deleted file mode 100644 index bf9504fc411..00000000000 --- a/public/app/plugins/panel/heatmap/css/heatmap.light.css +++ /dev/null @@ -1,58 +0,0 @@ -.axis { - font-family: "Open Sans", Helvetica, Arial, sans-serif; - font-size: smaller; - fill: #555555; -} - -.axis path, -.axis line { - fill: none; - stroke: #D8D9DA; - /*shape-rendering: crispEdges;*/ -} - -.tick line { - opacity: 0.4; - stroke: #D8D9DA; -} - -.tick text { - fill: #555555; -} - -.heatmap-panel { - cursor: crosshair; -} - -div.heatmap-tooltip { - position: absolute; - text-align: left; - min-width: 160px; - padding: 12px; - font-family: "Open Sans", Helvetica, Arial, sans-serif; - font-size: 13px; - background: #ECECEC; - border: 0px; - border-radius: 8px; - pointer-events: none; -} - -.card-highlighted:hover { - stroke: #D8D9DA; -} - -.heatmap-histogram rect { - fill: #555555; -} - -.heatmap-crosshair line { - stroke: #a25959; - stroke-width: 1; -} - -.heatmap-selection { - stroke-width: 1; - opacity: 0.3; - fill: #555555; - stroke: #000; -} diff --git a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts index 62d03a503c3..54cede5c4ab 100644 --- a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts +++ b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts @@ -52,7 +52,7 @@ export class HeatmapTooltip { add() { this.tooltip = d3.select("body") .append("div") - .attr("class", "heatmap-tooltip"); + .attr("class", "heatmap-tooltip graph-tooltip grafana-tooltip"); } destroy() { @@ -82,7 +82,7 @@ export class HeatmapTooltip { let decimals = this.panel.tooltipDecimals || 5; let valueFormatter = this.valueFormatter(decimals); - let tooltipHtml = `
${time}
+ let tooltipHtml = `
${time}
`; if (yData) { diff --git a/public/app/plugins/panel/heatmap/module.ts b/public/app/plugins/panel/heatmap/module.ts index 2715b95f916..3144e335a39 100644 --- a/public/app/plugins/panel/heatmap/module.ts +++ b/public/app/plugins/panel/heatmap/module.ts @@ -3,11 +3,6 @@ import {loadPluginCss} from 'app/plugins/sdk'; import {HeatmapCtrl} from './heatmap_ctrl'; -// loadPluginCss({ -// dark: 'public/app/plugins/panel/heatmap/css/heatmap.dark.css', -// light: 'public/app/plugins/panel/heatmap/css/heatmap.light.css' -// }); - export { HeatmapCtrl as PanelCtrl }; diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 370a5db943a..6266bd9c98f 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -48,6 +48,7 @@ @import "components/panel_singlestat"; @import "components/panel_table"; @import "components/panel_text"; +@import "components/panel_heatmap"; @import "components/tagsinput"; @import "components/tables_lists"; @import "components/search"; diff --git a/public/sass/components/_panel_heatmap.scss b/public/sass/components/_panel_heatmap.scss new file mode 100644 index 00000000000..ad27c094fea --- /dev/null +++ b/public/sass/components/_panel_heatmap.scss @@ -0,0 +1,37 @@ +.heatmap-canvas-wrapper { + position: relative; + cursor: crosshair; +} + +.heatmap-panel { + .axis .tick { + text { + fill: $text-color; + color: $text-color; + font-size: $font-size-sm; + } + + line { + opacity: 0.4; + stroke: $text-color-weak; + } + } +} + +.heatmap-tooltip { + white-space: nowrap; + font-size: $font-size-sm; + background-color: $graph-tooltip-bg; + color: $text-color; +} + +.heatmap-histogram rect { + fill: $text-color-weak; +} + +.heatmap-crosshair { + line { + stroke: darken($red,15%); + stroke-width: 1; + } +}