mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge branch 'utkarshcmu-help-text'
This commit is contained in:
Torkel Ödegaard
commit
c04590784b
@ -78,7 +78,7 @@
|
||||
"sinon": "1.17.6",
|
||||
"systemjs-builder": "^0.15.34",
|
||||
"tether": "^1.4.0",
|
||||
"tether-drop": "^1.4.2",
|
||||
"tether-drop": "git://github.com/torkelo/drop",
|
||||
"tslint": "^4.0.2",
|
||||
"typescript": "^2.1.4",
|
||||
"virtual-scroll": "^1.1.1"
|
||||
|
||||
@ -51,7 +51,7 @@ export class DashboardModel {
|
||||
this.style = data.style || "dark";
|
||||
this.timezone = data.timezone || '';
|
||||
this.editable = data.editable !== false;
|
||||
this.graphTooltip = data.graphTooltip || false;
|
||||
this.graphTooltip = data.graphTooltip || 0;
|
||||
this.hideControls = data.hideControls || false;
|
||||
this.time = data.time || { from: 'now-6h', to: 'now' };
|
||||
this.timepicker = data.timepicker || {};
|
||||
@ -272,7 +272,7 @@ export class DashboardModel {
|
||||
}
|
||||
|
||||
sharedTooltipModeEnabled() {
|
||||
return this.graphTooltip !== 0;
|
||||
return this.graphTooltip > 0;
|
||||
}
|
||||
|
||||
sharedCrosshairModeOnly() {
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<div class="modal-body" ng-controller="InspectCtrl" ng-init="init()">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-header-title">
|
||||
Inspector
|
||||
<i class="fa fa-frown-o"></i>
|
||||
<span class="p-l-1">Inspector</span>
|
||||
</h2>
|
||||
|
||||
<ul class="gf-tabs">
|
||||
17
public/app/features/dashboard/partials/panel_info.html
Normal file
17
public/app/features/dashboard/partials/panel_info.html
Normal file
@ -0,0 +1,17 @@
|
||||
<div class="modal-body">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-header-title">
|
||||
<i class="fa fa-info-circle"></i>
|
||||
<span class="p-l-1">Panel Description</span>
|
||||
</h2>
|
||||
|
||||
<a class="modal-header-close" ng-click="dismiss();">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="modal-content markdown-html" ng-bind-html="html">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -12,7 +12,6 @@ import * as dateMath from 'app/core/utils/datemath';
|
||||
import {Subject} from 'vendor/npm/rxjs/Subject';
|
||||
|
||||
class MetricsPanelCtrl extends PanelCtrl {
|
||||
error: any;
|
||||
loading: boolean;
|
||||
datasource: any;
|
||||
datasourceName: any;
|
||||
|
||||
@ -5,6 +5,7 @@ import _ from 'lodash';
|
||||
import angular from 'angular';
|
||||
import $ from 'jquery';
|
||||
import {profiler} from 'app/core/profiler';
|
||||
import Remarkable from 'remarkable';
|
||||
|
||||
const TITLE_HEIGHT = 25;
|
||||
const EMPTY_TITLE_HEIGHT = 9;
|
||||
@ -15,6 +16,7 @@ import {Emitter} from 'app/core/core';
|
||||
|
||||
export class PanelCtrl {
|
||||
panel: any;
|
||||
error: any;
|
||||
row: any;
|
||||
dashboard: any;
|
||||
editorTabIndex: number;
|
||||
@ -243,15 +245,57 @@ export class PanelCtrl {
|
||||
});
|
||||
}
|
||||
|
||||
openInspector() {
|
||||
getInfoMode() {
|
||||
if (this.error) {
|
||||
return 'error';
|
||||
}
|
||||
if (!!this.panel.description) {
|
||||
return 'info';
|
||||
}
|
||||
if (this.panel.links.length > 0) {
|
||||
return 'links';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
getInfoContent() {
|
||||
var markdown = this.error || this.panel.description;
|
||||
var linkSrv = this.$injector.get('linkSrv');
|
||||
var templateSrv = this.$injector.get('templateSrv');
|
||||
var interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars);
|
||||
var html = '<div class="markdown-html">';
|
||||
|
||||
html += new Remarkable().render(interpolatedMarkdown);
|
||||
|
||||
if (this.panel.links && this.panel.links.length > 0) {
|
||||
html += '<ul>';
|
||||
for (let link of this.panel.links) {
|
||||
var info = linkSrv.getPanelLinkAnchorInfo(link, this.panel.scopedVars);
|
||||
html += '<li><a class="panel-menu-link" href="' + info.href + '" target="' + info.target + '">' + info.title + '</a></li>';
|
||||
}
|
||||
html += '</ul>';
|
||||
}
|
||||
|
||||
return html + '</div>';
|
||||
}
|
||||
|
||||
openInfo() {
|
||||
var modalScope = this.$scope.$new();
|
||||
modalScope.panel = this.panel;
|
||||
modalScope.dashboard = this.dashboard;
|
||||
modalScope.inspector = $.extend(true, {}, this.inspector);
|
||||
|
||||
this.publishAppEvent('show-modal', {
|
||||
src: 'public/app/partials/inspector.html',
|
||||
scope: modalScope
|
||||
});
|
||||
if (this.error) {
|
||||
modalScope.inspector = $.extend(true, {}, this.inspector);
|
||||
this.publishAppEvent('show-modal', {
|
||||
src: 'public/app/features/dashboard/partials/inspector.html',
|
||||
scope: modalScope
|
||||
});
|
||||
} else {
|
||||
modalScope.html = this.getInfoContent();
|
||||
this.publishAppEvent('show-modal', {
|
||||
src: 'public/app/features/dashboard/partials/panel_info.html',
|
||||
scope: modalScope
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,16 +2,17 @@
|
||||
|
||||
import angular from 'angular';
|
||||
import $ from 'jquery';
|
||||
import _ from 'lodash';
|
||||
import Drop from 'tether-drop';
|
||||
|
||||
var module = angular.module('grafana.directives');
|
||||
|
||||
var panelTemplate = `
|
||||
<div class="panel-container">
|
||||
<div class="panel-header">
|
||||
<span class="alert-error panel-error small pointer" ng-if="ctrl.error" ng-click="ctrl.openInspector()">
|
||||
<span data-placement="top" bs-tooltip="ctrl.error">
|
||||
<i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
|
||||
</span>
|
||||
<span class="panel-info-corner" ng-click="ctrl.openInfo()">
|
||||
<i class="fa"></i>
|
||||
<span class="panel-info-corner-inner"></span>
|
||||
</span>
|
||||
|
||||
<span class="panel-loading" ng-show="ctrl.loading">
|
||||
@ -64,7 +65,9 @@ module.directive('grafanaPanel', function($rootScope) {
|
||||
scope: { ctrl: "=" },
|
||||
link: function(scope, elem) {
|
||||
var panelContainer = elem.find('.panel-container');
|
||||
var cornerInfoElem = elem.find('.panel-info-corner')[0];
|
||||
var ctrl = scope.ctrl;
|
||||
var infoDrop;
|
||||
|
||||
// the reason for handling these classes this way is for performance
|
||||
// limit the watchers on panels etc
|
||||
@ -139,11 +142,38 @@ module.directive('grafanaPanel', function($rootScope) {
|
||||
}
|
||||
}, scope);
|
||||
|
||||
function updatePanelCornerInfo() {
|
||||
var cornerMode = ctrl.getInfoMode();
|
||||
cornerInfoElem.className = 'panel-info-corner + panel-info-corner--' + cornerMode;
|
||||
|
||||
if (cornerMode) {
|
||||
if (infoDrop) {
|
||||
infoDrop.destroy();
|
||||
}
|
||||
|
||||
infoDrop = new Drop({
|
||||
target: cornerInfoElem,
|
||||
content: ctrl.getInfoContent.bind(ctrl),
|
||||
position: 'right middle',
|
||||
classes: ctrl.error ? 'drop-error' : 'drop-help',
|
||||
openOn: 'hover',
|
||||
hoverOpenDelay: 400,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], updatePanelCornerInfo);
|
||||
scope.$watchCollection('ctrl.panel.links', updatePanelCornerInfo);
|
||||
|
||||
elem.on('mouseenter', mouseEnter);
|
||||
elem.on('mouseleave', mouseLeave);
|
||||
|
||||
scope.$on('$destroy', function() {
|
||||
elem.off();
|
||||
|
||||
if (infoDrop) {
|
||||
infoDrop.destroy();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -233,4 +263,19 @@ module.directive('panelResizer', function($rootScope) {
|
||||
};
|
||||
});
|
||||
|
||||
module.directive('panelHelpCorner', function($rootScope) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
template: `
|
||||
<span class="alert-error panel-error small pointer" ng-if="ctrl.error" ng-click="ctrl.openInspector()">
|
||||
<span data-placement="top" bs-tooltip="ctrl.error">
|
||||
<i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
|
||||
</span>
|
||||
</span>
|
||||
`,
|
||||
link: function(scope, elem) {
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -9,28 +9,14 @@ function (angular, $, _, Tether) {
|
||||
|
||||
angular
|
||||
.module('grafana.directives')
|
||||
.directive('panelMenu', function($compile, linkSrv) {
|
||||
.directive('panelMenu', function($compile) {
|
||||
var linkTemplate =
|
||||
'<span class="panel-title drag-handle pointer">' +
|
||||
'<span class="icon-gf panel-alert-icon"></span>' +
|
||||
'<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>' +
|
||||
'<span class="panel-links-btn"><i class="fa fa-external-link"></i></span>' +
|
||||
'<span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>' +
|
||||
'</span>';
|
||||
|
||||
function createExternalLinkMenu(ctrl) {
|
||||
var template = '<div class="panel-menu small">';
|
||||
template += '<div class="panel-menu-row">';
|
||||
|
||||
if (ctrl.panel.links) {
|
||||
_.each(ctrl.panel.links, function(link) {
|
||||
var info = linkSrv.getPanelLinkAnchorInfo(link, ctrl.panel.scopedVars);
|
||||
template += '<a class="panel-menu-link" href="' + info.href + '" target="' + info.target + '">' + info.title + '</a>';
|
||||
});
|
||||
}
|
||||
return template;
|
||||
}
|
||||
|
||||
function createMenuTemplate(ctrl) {
|
||||
var template = '<div class="panel-menu small">';
|
||||
|
||||
@ -76,7 +62,6 @@ function (angular, $, _, Tether) {
|
||||
restrict: 'A',
|
||||
link: function($scope, elem) {
|
||||
var $link = $(linkTemplate);
|
||||
var $panelLinksBtn = $link.find(".panel-links-btn");
|
||||
var $panelContainer = elem.parents(".panel-container");
|
||||
var menuScope = null;
|
||||
var ctrl = $scope.ctrl;
|
||||
@ -86,12 +71,6 @@ function (angular, $, _, Tether) {
|
||||
|
||||
elem.append($link);
|
||||
|
||||
$scope.$watchCollection('ctrl.panel.links', function(newValue) {
|
||||
var showIcon = (newValue ? newValue.length > 0 : false) && ctrl.panel.title !== '';
|
||||
// cannot use toggle here, only works for attached elements
|
||||
$panelLinksBtn.css({display: showIcon ? 'inline' : 'none'});
|
||||
});
|
||||
|
||||
function dismiss(time, force) {
|
||||
clearTimeout(timeout);
|
||||
timeout = null;
|
||||
@ -132,11 +111,7 @@ function (angular, $, _, Tether) {
|
||||
}
|
||||
|
||||
var menuTemplate;
|
||||
if ($(e.target).hasClass('fa-external-link')) {
|
||||
menuTemplate = createExternalLinkMenu(ctrl);
|
||||
} else {
|
||||
menuTemplate = createMenuTemplate(ctrl);
|
||||
}
|
||||
menuTemplate = createMenuTemplate(ctrl);
|
||||
|
||||
$menu = $(menuTemplate);
|
||||
$menu.mouseleave(function() {
|
||||
|
||||
@ -3,60 +3,44 @@
|
||||
Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
|
||||
</h5>
|
||||
|
||||
<div ng-repeat="link in panel.links" style="margin-top: 20px;">
|
||||
<div class="gf-form-group">
|
||||
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form width-2">
|
||||
<i class="fa fa-fw fa-unlink"></i>
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7">Type</span>
|
||||
<div class="gf-form-select-wrapper width-14">
|
||||
<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7" ng-show="link.type === 'dashboard'">Dashboard</span>
|
||||
<input ng-show="link.type === 'dashboard'" type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="gf-form-input max-width-14" ng-blur="dashboardChanged(link)">
|
||||
|
||||
<span class="gf-form-label width-7" ng-show="link.type === 'absolute'">Url</span>
|
||||
<input ng-show="link.type === 'absolute'" type="text" ng-model="link.url" class="gf-form-input max-width-14">
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<button class="btn-inverse gf-form-btn btn-small" ng-click="deleteLink(link)"><i class="fa fa-trash"></i></button>
|
||||
<div class="gf-form-group" ng-repeat="link in panel.links">
|
||||
<div class="section">
|
||||
<div class="gf-form max-width-25">
|
||||
<span class="gf-form-label width-7">Type</span>
|
||||
<div class="gf-form-select-wrapper gf-form--grow">
|
||||
<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form width-2">
|
||||
<i class="fa fa-fw fa-unlink invisible"></i>
|
||||
</div>
|
||||
<div class="gf-form max-width-25">
|
||||
<span class="gf-form-label width-7" ng-show="link.type === 'dashboard'">Dashboard</span>
|
||||
<input ng-show="link.type === 'dashboard'" type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="gf-form-input" ng-blur="dashboardChanged(link)">
|
||||
|
||||
<div class="gf-form">
|
||||
<div class="gf-form-label width-7">Title</div>
|
||||
<input type="text" ng-model="link.title" class="gf-form-input">
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7">Url params</span>
|
||||
<input type="text" ng-model="link.params" class="gf-form-input">
|
||||
</div>
|
||||
<span class="gf-form-label width-7" ng-show="link.type === 'absolute'">Url</span>
|
||||
<input ng-show="link.type === 'absolute'" type="text" ng-model="link.url" class="gf-form-input max-width-14">
|
||||
</div>
|
||||
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form width-2">
|
||||
<i class="fa fa-fw fa-unlink invisible"></i>
|
||||
</div>
|
||||
<div class="gf-form max-width-25">
|
||||
<div class="gf-form-label width-7">Title</div>
|
||||
<input type="text" ng-model="link.title" class="gf-form-input">
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<editor-checkbox text="Keep current time range" model="link.keepTime"></editor-checkbox>
|
||||
<editor-checkbox text="Add current variable values" model="link.includeVars"></editor-checkbox>
|
||||
<editor-checkbox text="Open in new tab " model="link.targetBlank"></editor-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-10">Url params</span>
|
||||
<input type="text" ng-model="link.params" class="gf-form-input width-10">
|
||||
</div>
|
||||
|
||||
<gf-form-switch class="gf-form" label-class="width-10" label="Include time range" checked="link.keepTime"></gf-form-switch>
|
||||
<gf-form-switch class="gf-form" label-class="width-10" label="Include variables" checked="link.includeVars"></gf-form-switch>
|
||||
<gf-form-switch class="gf-form" label-class="width-10" label="Open in new tab " checked="link.targetBlank"></gf-form-switch>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="gf-form">
|
||||
<button class="btn btn-inverse gf-form-btn" ng-click="deleteLink(link)"><i class="fa fa-trash"></i> Remove Link</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
<div class="page-body">
|
||||
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
|
||||
<div ng-bind-html="ctrl.readmeHtml" class="plugin-markdown-readme">
|
||||
<div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
5
public/app/headers/common.d.ts
vendored
5
public/app/headers/common.d.ts
vendored
@ -62,3 +62,8 @@ declare module 'mousetrap' {
|
||||
var config: any;
|
||||
export default config;
|
||||
}
|
||||
|
||||
declare module 'remarkable' {
|
||||
var config: any;
|
||||
export default config;
|
||||
}
|
||||
|
||||
@ -1,34 +1,44 @@
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form max-width-21">
|
||||
<span class="gf-form-label width-8">Title</span>
|
||||
<input type="text" class="gf-form-input" ng-model='ctrl.panel.title'></input>
|
||||
</div>
|
||||
<div class="editor-row">
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Info</h5>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-6">Span</span>
|
||||
<select class="gf-form-input gf-size-auto" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
|
||||
<span class="gf-form-label width-7">Title</span>
|
||||
<input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title'></input>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8">Height</span>
|
||||
<input type="text" class="gf-form-input max-width-6" ng-model='ctrl.panel.height' placeholder="100px"></input>
|
||||
<div class="gf-form gf-form--v-stretch">
|
||||
<span class="gf-form-label width-7">Description</span>
|
||||
<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.panel.description" placeholder="Panel description, supports markdown & links"></textarea>
|
||||
</div>
|
||||
<gf-form-switch class="gf-form" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form max-width-21">
|
||||
<span class="gf-form-label width-8">Repeat Panel</span>
|
||||
<dash-repeat-option model="ctrl.panel"></dash-repeat-option>
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Dimensions</h5>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7">Span</span>
|
||||
<select class="gf-form-input width-6" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-6">Min span</span>
|
||||
<span class="gf-form-label width-7">Height</span>
|
||||
<input type="text" class="gf-form-input width-6" ng-model='ctrl.panel.height' placeholder="100px"></input>
|
||||
</div>
|
||||
<gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Templating</h5>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8">Repeat Panel</span>
|
||||
<dash-repeat-option model="ctrl.panel"></dash-repeat-option>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8">Min span</span>
|
||||
<select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]">
|
||||
<option value=""></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<panel-links-editor panel="ctrl.panel"></panel-links-editor>
|
||||
<panel-links-editor panel="ctrl.panel"></panel-links-editor>
|
||||
|
||||
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<p class="panel-text-content" ng-bind-html="ctrl.content" ng-show="ctrl.content">
|
||||
<p class="markdown-html panel-text-content" ng-bind-html="ctrl.content" ng-show="ctrl.content">
|
||||
</p>
|
||||
|
||||
@ -290,3 +290,46 @@ a.external-link {
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.markdown-html {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: $spacer*1.5;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
table {
|
||||
td, th {
|
||||
padding: $spacer*.5 $spacer;
|
||||
}
|
||||
th {
|
||||
font-weight: normal;
|
||||
background: $table-bg-accent;
|
||||
}
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid $table-border;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: $external-link-color;
|
||||
&:hover {
|
||||
color: lighten($external-link-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,8 +6,6 @@
|
||||
// Base styles
|
||||
// -------------------------
|
||||
|
||||
|
||||
|
||||
.alert {
|
||||
padding: 0.5rem 2rem 0.5rem 1rem;
|
||||
margin-bottom: $line-height-base;
|
||||
@ -30,9 +28,11 @@
|
||||
.alert-error {
|
||||
background-color: $errorBackground;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: $infoBackground;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: $state-warning-bg;
|
||||
}
|
||||
|
||||
@ -15,7 +15,6 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
|
||||
&.drop-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.drop-element, .drop-element * {
|
||||
@ -30,8 +29,11 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
|
||||
}
|
||||
|
||||
.drop-help {
|
||||
ul {
|
||||
padding-left: $spacer;
|
||||
a {
|
||||
color: $white;
|
||||
&:hover {
|
||||
color: darken($white, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,9 +43,12 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include drop-theme("help", $popover-help-bg, $popover-help-color);
|
||||
@include drop-theme("error", $errorBackground, $popover-color);
|
||||
@include drop-theme("popover", $popover-bg, $popover-color);
|
||||
|
||||
@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
|
||||
@include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing);
|
||||
@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);
|
||||
|
||||
|
||||
@ -244,6 +244,11 @@ $gf-form-margin: 0.25rem;
|
||||
padding-left: $spacer;
|
||||
color: $text-color-weak;
|
||||
|
||||
&--bold {
|
||||
color: $text-color-emphasis;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&--right-absolute {
|
||||
position: absolute;
|
||||
right: $spacer;
|
||||
|
||||
@ -1,8 +1 @@
|
||||
|
||||
.panel-text-content {
|
||||
ul {
|
||||
margin: 0 0 $spacer $spacer * 1.5;
|
||||
}
|
||||
li {line-height: 2;}
|
||||
a { color: $external-link-color; }
|
||||
}
|
||||
|
||||
@ -29,6 +29,8 @@
|
||||
.dashnav-refresh-action,
|
||||
.dashnav-zoom-out,
|
||||
.dashnav-action-icons,
|
||||
.panel-info-corner--info,
|
||||
.panel-info-corner--links,
|
||||
.dashnav-move-timeframe {
|
||||
opacity: 0;
|
||||
transition: all 1.5s ease-in-out 1s;
|
||||
|
||||
@ -73,6 +73,11 @@ div.flot-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel-help-text {
|
||||
margin-left: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel-loading {
|
||||
position:absolute;
|
||||
top: -3px;
|
||||
@ -84,26 +89,59 @@ div.flot-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.panel-error {
|
||||
color: $white;
|
||||
.panel-info-corner {
|
||||
color: $text-color;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0;
|
||||
padding: 0px 17px 6px 5px;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
i {
|
||||
|
||||
.fa {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: -5px;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
&--info {
|
||||
display: block;
|
||||
background: $blue-dark;
|
||||
.fa:before {
|
||||
content: "\f129";
|
||||
}
|
||||
}
|
||||
|
||||
&--links {
|
||||
display: block;
|
||||
background: $blue-dark;
|
||||
.fa {
|
||||
left: -3px;
|
||||
}
|
||||
.fa:before {
|
||||
content: "\f08e";
|
||||
}
|
||||
}
|
||||
|
||||
&--error {
|
||||
display: block;
|
||||
background: $errorBackground !important;
|
||||
.fa:before {
|
||||
content: "\f12a";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-error-arrow {
|
||||
.panel-info-corner-inner {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 31px solid transparent;
|
||||
border-right: 30px solid transparent;
|
||||
border-bottom: 27px solid $panel-bg;
|
||||
border-left: 27px solid transparent;
|
||||
border-right: 0px solid transparent;
|
||||
border-bottom: 26px solid $panel-bg;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@ -37,32 +37,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.plugin-markdown-readme {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: $spacer*1.5;
|
||||
margin-bottom: $spacer*2;
|
||||
}
|
||||
|
||||
table {
|
||||
td, th {
|
||||
padding: $spacer*.5 $spacer;
|
||||
}
|
||||
th {
|
||||
font-weight: normal;
|
||||
background: $table-bg-accent;
|
||||
}
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid $table-border;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
.get-more-plugins-link {
|
||||
color: $text-muted;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
paths: {
|
||||
'mousetrap': 'vendor/npm/mousetrap/mousetrap.js',
|
||||
'eventemitter3': 'vendor/npm/eventemitter3/index.js',
|
||||
'remarkable': 'vendor/npm/remarkable/dist/remarkable.js',
|
||||
'tether': 'vendor/npm/tether/dist/js/tether.js',
|
||||
'tether-drop': 'vendor/npm/tether-drop/dist/js/drop.js',
|
||||
'moment': 'vendor/moment.js',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user