diff --git a/public/app/plugins/panel/graph/graph_tooltip.js b/public/app/plugins/panel/graph/graph_tooltip.js index f10e57ef21a..bdf5f91ac3c 100644 --- a/public/app/plugins/panel/graph/graph_tooltip.js +++ b/public/app/plugins/panel/graph/graph_tooltip.js @@ -34,7 +34,8 @@ function ($) { }; this.showTooltip = function(absoluteTime, relativeTime, innerHtml, pos) { - var body = '
'+ absoluteTime + '
(' + relativeTime + ')
' ; + var body = '
'+ absoluteTime + + ' (' + relativeTime + ')
'; body += innerHtml + '
'; $tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY); }; diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 7a3e9edc842..4c9f974bf2a 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -30,10 +30,6 @@ // Components: Nav @import "navs.less"; -// Components: Popovers -@import "tooltip.less"; - -// Components: Misc @import "labels-badges.less"; // Utility classes diff --git a/public/less/components/color_picker.less b/public/less/components/color_picker.less new file mode 100644 index 00000000000..a9e599ef2b5 --- /dev/null +++ b/public/less/components/color_picker.less @@ -0,0 +1,37 @@ + +.sp-replacer { + background: inherit; + border: none; + color: inherit; + padding: 0; +} + +.sp-replacer:hover, .sp-replacer.sp-active { + border-color: inherit; + color: inherit; +} + +.sp-container { + border-radius: 0; + background-color: @heroUnitBackground; + border: none; + padding: 0; +} + +.sp-palette-container, .sp-picker-container { + border: none; +} + +.sp-dd { + display: none; +} + +.sp-preview { + position: relative; + width: 15px; + height: 15px; + border: none; + margin-right: 5px; + float: left; + z-index: 0; +} diff --git a/public/less/components/dashboard.less b/public/less/components/dashboard.less index 024c3954ba0..38172d89044 100644 --- a/public/less/components/dashboard.less +++ b/public/less/components/dashboard.less @@ -24,7 +24,7 @@ } .row-button { - width: 30px; + width: 24px; float: left; cursor: pointer; line-height: 31px; @@ -66,6 +66,36 @@ } } + +.row-control-inner { + padding:0px; + margin:0px; + position:relative; +} + +.hide-controls { + padding: 0; + .row-tab { + display: none; + } + .add-row-panel-hint { + display: none; + } +} + +.playlist-active { + .add-row-panel-hint, + .dashnav-refresh-action, + .dashnav-zoom-out, + .dashnav-action-icons { + display: none; + } + + .grafana-menu-stop-playlist { + display: list-item; + } +} + div.flot-text { color: @textColor !important; } @@ -110,7 +140,7 @@ div.flot-text { .panel-title { border: 0px; - font-weight: bold; + font-weight: @fontWeightSemi; position: relative; cursor: pointer; width: 100%; diff --git a/public/less/components/panel_graph.less b/public/less/components/panel_graph.less index 36e96d67441..dfef812811c 100644 --- a/public/less/components/panel_graph.less +++ b/public/less/components/panel_graph.less @@ -3,6 +3,24 @@ cursor: crosshair; } +.histogram-chart { + position: relative; +} + +.datapoints-warning { + pointer: none; + position: absolute; + top: 50%; + left: 50%; + z-index: 10; + margin-top: -50px; + margin-left: -100px; + width: 200px; + text-align: center; + cursor: auto; + padding: 10px; +} + .graph-legend { margin: 0 20px; text-align: center; @@ -206,11 +224,15 @@ .graph-tooltip-time { text-align: center; - font-weight: bold; + font-weight: @fontWeightSemi; position: relative; top: -3px; } + .tone-down { + opacity: 0.7; + } + .label-tag { margin-right: 4px; margin-top: 8px; diff --git a/public/less/bootstrap/tooltip.less b/public/less/components/tooltip.less similarity index 76% rename from public/less/bootstrap/tooltip.less rename to public/less/components/tooltip.less index 83d5f2bd765..1922128d4d3 100644 --- a/public/less/bootstrap/tooltip.less +++ b/public/less/components/tooltip.less @@ -12,7 +12,7 @@ font-size: 11px; line-height: 1.4; .opacity(0); - &.in { .opacity(80); } + &.in { .opacity(100); } &.top { margin-top: -3px; padding: 5px 0; } &.right { margin-left: 3px; padding: 0 5px; } &.bottom { margin-top: 3px; padding: 5px 0; } @@ -21,7 +21,7 @@ // Wrapper for the tooltip content .tooltip-inner { - max-width: 200px; + max-width: 400px; padding: 8px; color: @tooltipColor; text-align: center; @@ -68,3 +68,31 @@ border-bottom-color: @tooltipArrowColor; } } + +.grafana-tooltip { + position : absolute; + top: -1000; + left: 0; + color: @tooltipColor; + padding: 10px; + font-size: 11pt; + font-weight : 200; + background-color: @tooltipBackground; + border-radius: 5px; + z-index: 9999; + max-width: 800px; + max-height: 600px; + overflow: hidden; + line-height: 14px; + a { + color: @tooltipLinkColor; + } +} + +.grafana-tooltip hr { + padding: 2px; + color: #c8c8c8; + margin: 0px; + border-bottom: 0px solid #c8c8c8; +} + diff --git a/public/less/grafana.less b/public/less/grafana.less index bd557bcde83..813ba26b312 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -43,6 +43,8 @@ @import "./components/tags.less"; @import "./components/modals.less"; @import "./components/dropdown.less"; +@import "./components/color_picker.less"; +@import "./components/tooltip.less"; // PAGES @import "./pages/login.less"; @@ -51,144 +53,6 @@ @import "./pages/alerting.less"; @import "./pages/apps.less"; - -.row-control-inner { - padding:0px; - margin:0px; - position:relative; -} - -.hide-controls { - padding: 0; - .row-tab { - display: none; - } - .add-row-panel-hint { - display: none; - } -} - -.playlist-active { - .add-row-panel-hint, - .dashnav-refresh-action, - .dashnav-zoom-out, - .dashnav-action-icons { - display: none; - } - - .grafana-menu-stop-playlist { - display: list-item; - } -} - -.row-button { - width: 24px; -} - -.histogram-chart { - position:relative; -} - -.scrollable { - max-height: 300px; - overflow: auto; -} - - - -// SPECTRUM CSS overrides - -.sp-replacer { - background: inherit; - border: none; - color: inherit; - padding: 0; -} - -.sp-replacer:hover, .sp-replacer.sp-active { - border-color: inherit; - color: inherit; -} - -.sp-container { - border-radius: 0; - background-color: @heroUnitBackground; - border: none; - padding: 0; -} - -.sp-palette-container, .sp-picker-container { - border: none; -} - -.sp-dd { - display: none; -} - -.sp-preview { - position: relative; - width: 15px; - height: 15px; - border: none; - margin-right: 5px; - float: left; - z-index: 0; -} - -.datapoints-warning { - pointer: none; - position: absolute; - top: 50%; - left: 50%; - z-index: 10; - margin-top: -50px; - margin-left: -100px; - width: 200px; - text-align: center; - cursor: auto; - padding: 10px; -} - -.metrics-editor-help:hover { - .hide { - display: block; - } -} - -.grafana-tooltip { - position : absolute; - top: -1000; - left: 0; - color: @tooltipColor; - padding: 10px; - font-size: 11pt; - font-weight : 200; - background-color: @tooltipBackground; - border-radius: 5px; - z-index: 9999; - max-width: 800px; - max-height: 600px; - overflow: hidden; - line-height: 14px; - a { - color: @tooltipLinkColor; - } -} - -.grafana-tooltip hr { - padding: 2px; - color: #c8c8c8; - margin: 0px; - border-bottom:0px solid #c8c8c8; -} - -.tooltip.in { - .opacity(100); -} -.tooltip-inner { - max-width: 400px; -} - .grafana-version-info { position: absolute; bottom: 2px; diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 2be071bc151..6d5434ac479 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -286,7 +286,7 @@ // Tooltips and popovers // ------------------------- -@tooltipColor: #fff; +@tooltipColor: @white; @tooltipBackground: rgb(58, 57, 57); @tooltipArrowWidth: 5px; @tooltipArrowColor: @tooltipBackground; diff --git a/public/less/variables.light.less b/public/less/variables.light.less index bae029698b0..ae8fcef2df3 100644 --- a/public/less/variables.light.less +++ b/public/less/variables.light.less @@ -79,7 +79,7 @@ // Typography // ------------------------- -@sansFontFamily: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +@sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;