mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
removing gemini scrollbar and replacing with perfect scrollbar, muuuch better
This commit is contained in:
parent
856a0393ab
commit
f18f1a1093
@ -121,7 +121,6 @@
|
|||||||
"d3-scale-chromatic": "^1.1.1",
|
"d3-scale-chromatic": "^1.1.1",
|
||||||
"eventemitter3": "^2.0.2",
|
"eventemitter3": "^2.0.2",
|
||||||
"file-saver": "^1.3.3",
|
"file-saver": "^1.3.3",
|
||||||
"gemini-scrollbar": "https://github.com/grafana/gemini-scrollbar#grafana",
|
|
||||||
"jquery": "^3.2.1",
|
"jquery": "^3.2.1",
|
||||||
"lodash": "^4.17.4",
|
"lodash": "^4.17.4",
|
||||||
"moment": "^2.18.1",
|
"moment": "^2.18.1",
|
||||||
|
@ -1,20 +1,20 @@
|
|||||||
import GeminiScrollbar from 'gemini-scrollbar';
|
import PerfectScrollbar from 'perfect-scrollbar';
|
||||||
import coreModule from 'app/core/core_module';
|
import coreModule from 'app/core/core_module';
|
||||||
|
|
||||||
export function geminiScrollbar() {
|
export function geminiScrollbar() {
|
||||||
return {
|
return {
|
||||||
restrict: 'A',
|
restrict: 'A',
|
||||||
link: function(scope, elem, attrs) {
|
link: function(scope, elem, attrs) {
|
||||||
var myScrollbar = new GeminiScrollbar({
|
|
||||||
autoshow: false,
|
let scrollbar = new PerfectScrollbar(elem[0]);
|
||||||
element: elem[0]
|
console.log('scrllbar!');
|
||||||
}).create();
|
|
||||||
|
|
||||||
scope.$on('$destroy', () => {
|
scope.$on('$destroy', () => {
|
||||||
myScrollbar.destroy();
|
scrollbar.destroy();
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
coreModule.directive('geminiScrollbar', geminiScrollbar);
|
coreModule.directive('grafanaScrollbar', geminiScrollbar);
|
||||||
|
@ -40,51 +40,49 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="search-dropdown" ng-class="{'search-dropdown--fade-in': ctrl.openCompleted}">
|
<div class="search-dropdown" ng-class="{'search-dropdown--fade-in': ctrl.openCompleted}">
|
||||||
<div gemini-scrollbar>
|
<div class="search-results-container" ng-if="ctrl.tagsMode">
|
||||||
<div class="search-results-container" ng-if="ctrl.tagsMode">
|
<div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
|
||||||
<div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
|
ng-class="{'selected': $index === ctrl.selectedIndex }"
|
||||||
ng-class="{'selected': $index === ctrl.selectedIndex }"
|
ng-click="ctrl.filterByTag(tag.term, $event)">
|
||||||
ng-click="ctrl.filterByTag(tag.term, $event)">
|
<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
|
||||||
<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
|
<i class="fa fa-tag"></i>
|
||||||
<i class="fa fa-tag"></i>
|
<span>{{tag.term}} ({{tag.count}})</span>
|
||||||
<span>{{tag.term}} ({{tag.count}})</span>
|
</a>
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="search-results-container" ng-if="!ctrl.tagsMode">
|
<div class="search-results-container" ng-if="!ctrl.tagsMode" grafana-scrollbar>
|
||||||
<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
|
<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
|
||||||
|
|
||||||
<div ng-repeat="section in ctrl.results" class="search-section">
|
<div ng-repeat="section in ctrl.results" class="search-section">
|
||||||
<a class="search-section__header pointer" ng-hide="section.hideHeader" ng-click="ctrl.toggleFolder(section)">
|
<a class="search-section__header pointer" ng-hide="section.hideHeader" ng-click="ctrl.toggleFolder(section)">
|
||||||
<i class="search-section__header__icon" ng-class="section.icon"></i>
|
<i class="search-section__header__icon" ng-class="section.icon"></i>
|
||||||
<span class="search-section__header__text">{{::section.title}}</span>
|
<span class="search-section__header__text">{{::section.title}}</span>
|
||||||
<i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
|
<i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
|
||||||
<i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
|
<i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div ng-if="section.expanded">
|
||||||
|
<a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}">
|
||||||
|
<span class="search-item__icon">
|
||||||
|
<i class="fa fa-th-large"></i>
|
||||||
|
</span>
|
||||||
|
<span class="search-item__body">
|
||||||
|
<div class="search-item__body-title">{{::item.title}}</div>
|
||||||
|
<div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader">
|
||||||
|
<i class="fa fa-folder-o"></i>
|
||||||
|
{{::item.folderTitle}}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span class="search-item__tags">
|
||||||
|
<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag" class="label label-tag">
|
||||||
|
{{tag}}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span class="search-item__actions">
|
||||||
|
<i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
|
||||||
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div ng-if="section.expanded">
|
|
||||||
<a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}">
|
|
||||||
<span class="search-item__icon">
|
|
||||||
<i class="fa fa-th-large"></i>
|
|
||||||
</span>
|
|
||||||
<span class="search-item__body">
|
|
||||||
<div class="search-item__body-title">{{::item.title}}</div>
|
|
||||||
<div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader">
|
|
||||||
<i class="fa fa-folder-o"></i>
|
|
||||||
{{::item.folderTitle}}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span class="search-item__tags">
|
|
||||||
<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag" class="label label-tag">
|
|
||||||
{{tag}}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="search-item__actions">
|
|
||||||
<i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -95,4 +93,5 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@ -1,35 +1,33 @@
|
|||||||
<div class="scroll-canvas">
|
<div class="scroll-canvas" grafana-scrollbar>
|
||||||
<div gemini-scrollbar>
|
<navbar model="ctrl.navModel"></navbar>
|
||||||
<navbar model="ctrl.navModel"></navbar>
|
<div class="page-container">
|
||||||
<div class="page-container">
|
<div class="page-header">
|
||||||
<div class="page-header">
|
<page-h1 model="ctrl.navModel"></page-h1>
|
||||||
<page-h1 model="ctrl.navModel"></page-h1>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<section class="card-section card-list-layout-grid">
|
<section class="card-section card-list-layout-grid">
|
||||||
<ol class="card-list" >
|
<ol class="card-list" >
|
||||||
<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
|
<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
|
||||||
<a class="card-item" ng-href="{{::navItem.url}}">
|
<a class="card-item" ng-href="{{::navItem.url}}">
|
||||||
<div class="card-item-header">
|
<div class="card-item-header">
|
||||||
<div class="card-item-type">
|
<div class="card-item-type">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-item-body">
|
<div class="card-item-body">
|
||||||
<figure class="card-item-figure">
|
<figure class="card-item-figure">
|
||||||
<i class="{{navItem.icon}}"></i>
|
<i class="{{navItem.icon}}"></i>
|
||||||
</figure>
|
</figure>
|
||||||
<div class="card-item-details">
|
<div class="card-item-details">
|
||||||
<div class="card-item-name">
|
<div class="card-item-name">
|
||||||
{{navItem.text}}
|
{{navItem.text}}
|
||||||
</div>
|
</div>
|
||||||
<div class="card-item-sub-name">
|
<div class="card-item-sub-name">
|
||||||
{{navItem.description}}
|
{{navItem.description}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
@ -102,9 +102,7 @@ module.directive('grafanaPanel', function($rootScope, $document) {
|
|||||||
// update scrollbar after mounting
|
// update scrollbar after mounting
|
||||||
ctrl.events.on('component-did-mount', () => {
|
ctrl.events.on('component-did-mount', () => {
|
||||||
if (ctrl.__proto__.constructor.scrollable) {
|
if (ctrl.__proto__.constructor.scrollable) {
|
||||||
panelScrollbar = new PerfectScrollbar(panelContent[0], {
|
panelScrollbar = new PerfectScrollbar(panelContent[0]);
|
||||||
minScrollbarLength: 20
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -191,6 +189,10 @@ module.directive('grafanaPanel', function($rootScope, $document) {
|
|||||||
if (infoDrop) {
|
if (infoDrop) {
|
||||||
infoDrop.destroy();
|
infoDrop.destroy();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (panelScrollbar) {
|
||||||
|
panelScrollbar.update();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -1,90 +1,88 @@
|
|||||||
<div class="scroll-canvas">
|
<div class="scroll-canvas" grafana-scrollbar>
|
||||||
<div gemini-scrollbar>
|
<navbar model="ctrl.navModel"></navbar>
|
||||||
<navbar model="ctrl.navModel"></navbar>
|
<div class="page-container">
|
||||||
<div class="page-container">
|
<div class="page-header">
|
||||||
<div class="page-header">
|
<page-h1 model="ctrl.navModel"></page-h1>
|
||||||
<page-h1 model="ctrl.navModel"></page-h1>
|
|
||||||
|
|
||||||
<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>
|
<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>
|
||||||
|
|
||||||
<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
|
<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
|
||||||
<ul class="gf-tabs">
|
<ul class="gf-tabs">
|
||||||
<li class="gf-tabs-item">
|
<li class="gf-tabs-item">
|
||||||
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
|
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
|
||||||
Config
|
Config
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="gf-tabs-item">
|
<li class="gf-tabs-item">
|
||||||
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
|
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
|
||||||
Dashboards
|
Dashboards
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div ng-if="ctrl.tabIndex === 0" class="tab-content">
|
||||||
|
|
||||||
|
<form name="ctrl.editForm" ng-if="ctrl.current">
|
||||||
|
<div class="gf-form-group">
|
||||||
|
<div class="gf-form-inline">
|
||||||
|
<div class="gf-form max-width-30">
|
||||||
|
<span class="gf-form-label width-7">Name</span>
|
||||||
|
<input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
|
||||||
|
<info-popover offset="0px -135px" mode="right-absolute">
|
||||||
|
The name is used when you select the data source in panels.
|
||||||
|
The <em>Default</em> data source is preselected in new
|
||||||
|
panels.
|
||||||
|
</info-popover>
|
||||||
|
</div>
|
||||||
|
<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gf-form">
|
||||||
|
<span class="gf-form-label width-7">Type</span>
|
||||||
|
<div class="gf-form-select-wrapper max-width-23">
|
||||||
|
<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.userChangedType()"></select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div ng-if="ctrl.tabIndex === 0" class="tab-content">
|
<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
|
||||||
|
This plugin is marked as being in alpha state, which means it is in early development phase and
|
||||||
|
updates will include breaking changes.
|
||||||
|
</div>
|
||||||
|
|
||||||
<form name="ctrl.editForm" ng-if="ctrl.current">
|
<rebuild-on-change property="ctrl.datasourceMeta.id">
|
||||||
<div class="gf-form-group">
|
<plugin-component type="datasource-config-ctrl">
|
||||||
<div class="gf-form-inline">
|
</plugin-component>
|
||||||
<div class="gf-form max-width-30">
|
</rebuild-on-change>
|
||||||
<span class="gf-form-label width-7">Name</span>
|
|
||||||
<input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
|
<div ng-if="ctrl.testing" class="gf-form-group section">
|
||||||
<info-popover offset="0px -135px" mode="right-absolute">
|
<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
|
||||||
The name is used when you select the data source in panels.
|
<div class="alert-{{ctrl.testing.status}} alert" ng-show="ctrl.testing.done">
|
||||||
The <em>Default</em> data source is preselected in new
|
<div class="alert-icon">
|
||||||
panels.
|
<i class="fa fa-exclamation-triangle" ng-show="ctrl.testing.status === 'error'"></i>
|
||||||
</info-popover>
|
<i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
|
||||||
</div>
|
|
||||||
<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="alert-body">
|
||||||
<div class="gf-form">
|
<div class="alert-title">{{ctrl.testing.message}}</div>
|
||||||
<span class="gf-form-label width-7">Type</span>
|
|
||||||
<div class="gf-form-select-wrapper max-width-23">
|
|
||||||
<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.userChangedType()"></select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
|
<div class="gf-form-button-row">
|
||||||
This plugin is marked as being in alpha state, which means it is in early development phase and
|
<button type="submit" class="btn btn-success" ng-disabled="ctrl.current.readOnly" ng-click="ctrl.saveChanges()">Save</button>
|
||||||
updates will include breaking changes.
|
<button type="submit" class="btn btn-danger" ng-disabled="ctrl.current.readOnly" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
|
||||||
</div>
|
Delete
|
||||||
|
</button>
|
||||||
|
<a class="btn btn-link" href="datasources">Cancel</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<rebuild-on-change property="ctrl.datasourceMeta.id">
|
<br />
|
||||||
<plugin-component type="datasource-config-ctrl">
|
<br />
|
||||||
</plugin-component>
|
<br />
|
||||||
</rebuild-on-change>
|
|
||||||
|
|
||||||
<div ng-if="ctrl.testing" class="gf-form-group section">
|
</form>
|
||||||
<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
|
|
||||||
<div class="alert-{{ctrl.testing.status}} alert" ng-show="ctrl.testing.done">
|
|
||||||
<div class="alert-icon">
|
|
||||||
<i class="fa fa-exclamation-triangle" ng-show="ctrl.testing.status === 'error'"></i>
|
|
||||||
<i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
|
|
||||||
</div>
|
|
||||||
<div class="alert-body">
|
|
||||||
<div class="alert-title">{{ctrl.testing.message}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gf-form-button-row">
|
|
||||||
<button type="submit" class="btn btn-success" ng-disabled="ctrl.current.readOnly" ng-click="ctrl.saveChanges()">Save</button>
|
|
||||||
<button type="submit" class="btn btn-danger" ng-disabled="ctrl.current.readOnly" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
<a class="btn btn-link" href="datasources">Cancel</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,51 +1,49 @@
|
|||||||
<div class="scroll-canvas">
|
<div class="scroll-canvas" grafana-scrollbar>
|
||||||
<div gemini-scrollbar>
|
<navbar model="ctrl.navModel"></navbar>
|
||||||
<navbar model="ctrl.navModel"></navbar>
|
<div class="page-container">
|
||||||
<div class="page-container">
|
<div class="page-header">
|
||||||
<div class="page-header">
|
<page-h1 model="ctrl.navModel"></page-h1>
|
||||||
<page-h1 model="ctrl.navModel"></page-h1>
|
|
||||||
|
|
||||||
<a class="page-header__cta btn btn-success" href="datasources/new">
|
<a class="page-header__cta btn btn-success" href="datasources/new">
|
||||||
Add data source
|
Add data source
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="card-section" layout-mode>
|
<section class="card-section" layout-mode>
|
||||||
<layout-selector></layout-selector>
|
<layout-selector></layout-selector>
|
||||||
|
|
||||||
<ol class="card-list" >
|
<ol class="card-list" >
|
||||||
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
|
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
|
||||||
<a class="card-item" href="datasources/edit/{{ds.id}}/">
|
<a class="card-item" href="datasources/edit/{{ds.id}}/">
|
||||||
<div class="card-item-header">
|
<div class="card-item-header">
|
||||||
<div class="card-item-type">
|
<div class="card-item-type">
|
||||||
{{ds.type}}
|
{{ds.type}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-item-body">
|
<div class="card-item-body">
|
||||||
<figure class="card-item-figure">
|
<figure class="card-item-figure">
|
||||||
<img ng-src="{{ds.typeLogoUrl}}">
|
<img ng-src="{{ds.typeLogoUrl}}">
|
||||||
</figure>
|
</figure>
|
||||||
<div class="card-item-details">
|
<div class="card-item-details">
|
||||||
<div class="card-item-name">
|
<div class="card-item-name">
|
||||||
{{ds.name}}
|
{{ds.name}}
|
||||||
<span ng-if="ds.isDefault">
|
<span ng-if="ds.isDefault">
|
||||||
<span class="btn btn-secondary btn-mini">default</span>
|
<span class="btn btn-secondary btn-mini">default</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-item-sub-name">
|
<div class="card-item-sub-name">
|
||||||
{{ds.url}}
|
{{ds.url}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div ng-if="ctrl.datasources.length === 0">
|
<div ng-if="ctrl.datasources.length === 0">
|
||||||
<em>No data sources defined</em>
|
<em>No data sources defined</em>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -1,68 +1,65 @@
|
|||||||
<div class="scroll-canvas">
|
<div class="scroll-canvas" grafana-scrollbar>
|
||||||
<div gemini-scrollbar>
|
<navbar model="ctrl.navModel"></navbar>
|
||||||
|
|
||||||
<navbar model="ctrl.navModel"></navbar>
|
<div class="page-container">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>
|
||||||
|
<i class="icon-gf icon-gf-apps"></i>
|
||||||
|
Plugins <span class="muted small">(currently installed)</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
<div class="page-container">
|
<div class="page-header-tabs">
|
||||||
<div class="page-header">
|
<ul class="gf-tabs">
|
||||||
<h1>
|
<li class="gf-tabs-item">
|
||||||
<i class="icon-gf icon-gf-apps"></i>
|
<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
|
||||||
Plugins <span class="muted small">(currently installed)</span>
|
Panels
|
||||||
</h1>
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="gf-tabs-item">
|
||||||
|
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
|
||||||
|
Data sources
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="gf-tabs-item">
|
||||||
|
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
|
||||||
|
Apps
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<div class="page-header-tabs">
|
<a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
|
||||||
<ul class="gf-tabs">
|
Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
|
||||||
<li class="gf-tabs-item">
|
</a>
|
||||||
<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
|
</div>
|
||||||
Panels
|
</div>
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="gf-tabs-item">
|
|
||||||
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
|
|
||||||
Data sources
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="gf-tabs-item">
|
|
||||||
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
|
|
||||||
Apps
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
|
<section class="card-section" layout-mode>
|
||||||
Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
|
<layout-selector></layout-selector>
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section class="card-section" layout-mode>
|
<ol class="card-list" >
|
||||||
<layout-selector></layout-selector>
|
<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
|
||||||
|
<a class="card-item" href="plugins/{{plugin.id}}/edit">
|
||||||
<ol class="card-list" >
|
<div class="card-item-header">
|
||||||
<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
|
<div class="card-item-type">
|
||||||
<a class="card-item" href="plugins/{{plugin.id}}/edit">
|
<i class="icon-gf icon-gf-{{plugin.type}}"></i>
|
||||||
<div class="card-item-header">
|
{{plugin.type}}
|
||||||
<div class="card-item-type">
|
</div>
|
||||||
<i class="icon-gf icon-gf-{{plugin.type}}"></i>
|
<div class="card-item-notice" ng-show="plugin.hasUpdate">
|
||||||
{{plugin.type}}
|
<span bs-tooltip="plugin.latestVersion">Update available!</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-item-notice" ng-show="plugin.hasUpdate">
|
</div>
|
||||||
<span bs-tooltip="plugin.latestVersion">Update available!</span>
|
<div class="card-item-body">
|
||||||
</div>
|
<figure class="card-item-figure">
|
||||||
</div>
|
<img ng-src="{{plugin.info.logos.small}}">
|
||||||
<div class="card-item-body">
|
</figure>
|
||||||
<figure class="card-item-figure">
|
<div class="card-item-details">
|
||||||
<img ng-src="{{plugin.info.logos.small}}">
|
<div class="card-item-name">{{plugin.name}}</div>
|
||||||
</figure>
|
<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
|
||||||
<div class="card-item-details">
|
</div>
|
||||||
<div class="card-item-name">{{plugin.name}}</div>
|
</div>
|
||||||
<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
|
</a>
|
||||||
</div>
|
</li>
|
||||||
</div>
|
</ol>
|
||||||
</a>
|
</section>
|
||||||
</li>
|
</div>
|
||||||
</ol>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,18 +1,16 @@
|
|||||||
<div dash-class ng-if="ctrl.dashboard">
|
<div dash-class ng-if="ctrl.dashboard">
|
||||||
<dashnav dashboard="ctrl.dashboard"></dashnav>
|
<dashnav dashboard="ctrl.dashboard"></dashnav>
|
||||||
|
|
||||||
<div class="scroll-canvas scroll-canvas--dashboard">
|
<div class="scroll-canvas scroll-canvas--dashboard" grafana-scrollbar>
|
||||||
<div gemini-scrollbar>
|
<div dash-editor-view class="dash-edit-view"></div>
|
||||||
<div dash-editor-view class="dash-edit-view"></div>
|
<div class="dashboard-container">
|
||||||
<div class="dashboard-container">
|
|
||||||
|
|
||||||
<dashboard-submenu ng-if="ctrl.dashboard.meta.submenuEnabled" dashboard="ctrl.dashboard">
|
<dashboard-submenu ng-if="ctrl.dashboard.meta.submenuEnabled" dashboard="ctrl.dashboard">
|
||||||
</dashboard-submenu>
|
</dashboard-submenu>
|
||||||
|
|
||||||
<dashboard-grid get-panel-container="ctrl.getPanelContainer">
|
<dashboard-grid get-panel-container="ctrl.getPanelContainer">
|
||||||
</dashboard-grid>
|
</dashboard-grid>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,5 +1,23 @@
|
|||||||
@import "~perfect-scrollbar/css/perfect-scrollbar.css";
|
@import "~perfect-scrollbar/css/perfect-scrollbar.css";
|
||||||
|
|
||||||
|
.ps__rail-x:hover,
|
||||||
|
.ps__rail-y:hover,
|
||||||
|
.ps__rail-x:focus,
|
||||||
|
.ps__rail-y:focus {
|
||||||
|
background-color: transparent;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__thumb-y {
|
||||||
|
@include gradient-vertical($blue, lighten($blue, 20%));
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__rail-y:hover > .ps__thumb-y,
|
||||||
|
.ps__rail-y:focus > .ps__thumb-y {
|
||||||
|
background-color: #999;
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* gemini-scrollbar
|
* gemini-scrollbar
|
||||||
* @version 1.5.2
|
* @version 1.5.2
|
||||||
|
@ -79,6 +79,7 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
padding: $spacer;
|
padding: $spacer;
|
||||||
|
position: relative;
|
||||||
flex-grow: 10;
|
flex-grow: 10;
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
|
Loading…
Reference in New Issue
Block a user