Commit f18f1a10 by Torkel Ödegaard

removing gemini scrollbar and replacing with perfect scrollbar, muuuch better

parent 856a0393
...@@ -121,7 +121,6 @@ ...@@ -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",
......
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 @@ ...@@ -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}} &nbsp;({{tag.count}})</span>
<span>{{tag.term}} &nbsp;({{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> </a>
<div ng-if="section.expanded"> <div ng-if="section.expanded">
<a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}"> <a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}">
<span class="search-item__icon"> <span class="search-item__icon">
<i class="fa fa-th-large"></i> <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__body"> </span>
<div class="search-item__body-title">{{::item.title}}</div> <span class="search-item__actions">
<div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader"> <i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
<i class="fa fa-folder-o"></i> </span>
{{::item.folderTitle}} </a>
</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 @@ ...@@ -95,4 +93,5 @@
</a> </a>
</div> </div>
</div> </div>
</div>
<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) { ...@@ -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) { ...@@ -191,6 +189,10 @@ module.directive('grafanaPanel', function($rootScope, $document) {
if (infoDrop) { if (infoDrop) {
infoDrop.destroy(); infoDrop.destroy();
} }
if (panelScrollbar) {
panelScrollbar.update();
}
}); });
} }
}; };
......
<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>
</div>
<div ng-if="ctrl.tabIndex === 0" class="tab-content"> <div ng-if="ctrl.tabIndex === 0" class="tab-content">
<form name="ctrl.editForm" ng-if="ctrl.current"> <form name="ctrl.editForm" ng-if="ctrl.current">
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form max-width-30"> <div class="gf-form max-width-30">
<span class="gf-form-label width-7">Name</span> <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> <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"> <info-popover offset="0px -135px" mode="right-absolute">
The name is used when you select the data source in panels. The name is used when you select the data source in panels.
The <em>Default</em> data source is preselected in new The <em>Default</em> data source is preselected in new
panels. panels.
</info-popover> </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>
<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"> <div class="gf-form">
<span class="gf-form-label width-7">Type</span> <span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper max-width-23"> <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> <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="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 This plugin is marked as being in alpha state, which means it is in early development phase and
updates will include breaking changes. updates will include breaking changes.
</div> </div>
<rebuild-on-change property="ctrl.datasourceMeta.id"> <rebuild-on-change property="ctrl.datasourceMeta.id">
<plugin-component type="datasource-config-ctrl"> <plugin-component type="datasource-config-ctrl">
</plugin-component> </plugin-component>
</rebuild-on-change> </rebuild-on-change>
<div ng-if="ctrl.testing" class="gf-form-group section"> <div ng-if="ctrl.testing" class="gf-form-group section">
<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5> <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-{{ctrl.testing.status}} alert" ng-show="ctrl.testing.done">
<div class="alert-icon"> <div class="alert-icon">
<i class="fa fa-exclamation-triangle" ng-show="ctrl.testing.status === 'error'"></i> <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> <i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
</div> </div>
<div class="alert-body"> <div class="alert-body">
<div class="alert-title">{{ctrl.testing.message}}</div> <div class="alert-title">{{ctrl.testing.message}}</div>
</div>
</div> </div>
</div> </div>
</div>
<div class="gf-form-button-row"> <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-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()"> <button type="submit" class="btn btn-danger" ng-disabled="ctrl.current.readOnly" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
Delete Delete
</button> </button>
<a class="btn btn-link" href="datasources">Cancel</a> <a class="btn btn-link" href="datasources">Cancel</a>
</div> </div>
<br /> <br />
<br /> <br />
<br /> <br />
</form> </form>
</div>
</div> </div>
</div> </div>
</div> </div>
<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>
<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>
<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>
@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 @@ ...@@ -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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment