mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux: sidenav fixes and dashboard search changes
This commit is contained in:
Torkel Ödegaard
parent
a4da0adf38
commit
6609dbff90
134
'
134
'
@ -1,134 +0,0 @@
|
||||
|
||||
|
||||
.sidemenu {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-direction: column;
|
||||
width: $side-menu-width;
|
||||
background-color: $side-menu-bg;
|
||||
z-index: 1;
|
||||
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu__top {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.sidemenu__bottom {
|
||||
padding-bottom: $spacer;
|
||||
}
|
||||
|
||||
.sidemenu-item {
|
||||
position: relative;
|
||||
@include left-brand-border();
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: $side-menu-item-hover-bg;
|
||||
@include left-brand-border-gradient();
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
top: 0px;
|
||||
// important to overlap it otherwise it can be hidden
|
||||
// again by the mouse getting outside the hover space
|
||||
left: $side-menu-width - 2px;
|
||||
@include animation('dropdown-anim 100ms ease-in-out 100ms forwards');
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropup.sidemenu-item:hover .dropdown-menu {
|
||||
top: auto !important;
|
||||
}
|
||||
|
||||
.sidemenu-link {
|
||||
color: $link-color;
|
||||
line-height: 42px;
|
||||
padding: 0px 10px 0px 10px;
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
border: 1px solid transparent;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(dropdown-anim) {
|
||||
0% {
|
||||
opacity: 0;
|
||||
//transform: translate3d(-5%,0,0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
//transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-circle {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: inline-block;
|
||||
i {
|
||||
color: $link-color;
|
||||
opacity: .7;
|
||||
position: relative;
|
||||
left: 3px;
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
.fa {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.icon-gf {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
left: 3px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-header {
|
||||
padding: 10px 10px 10px 20px;
|
||||
white-space: nowrap;
|
||||
background-color: $side-menu-item-hover-bg;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
li.sidemenu-org-switcher {
|
||||
border-bottom: 1px solid $dropdownDividerBottom;
|
||||
}
|
||||
|
||||
.sidemenu-org-switcher__org-name {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.sidemenu-org-switcher__org-current {
|
||||
font-size: $font-size-xs;
|
||||
color: $text-color-weak;
|
||||
}
|
||||
|
||||
.sidemenu-org-switcher__switch {
|
||||
font-size: $font-size-sm;
|
||||
padding-left: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i.fa > {
|
||||
margin-right: 5px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
@ -65,7 +65,7 @@
|
||||
"dependencies": {
|
||||
"eventemitter3": "^2.0.2",
|
||||
"gaze": "^1.1.2",
|
||||
"gemini-scrollbar": "^1.5.2",
|
||||
"gemini-scrollbar": "https://github.com/grafana/gemini-scrollbar#grafana",
|
||||
"grunt-jscs": "3.0.1",
|
||||
"grunt-sass-lint": "^0.2.2",
|
||||
"grunt-sync": "^0.6.2",
|
||||
|
||||
@ -12,6 +12,10 @@ export function geminiScrollbar() {
|
||||
autoshow: false,
|
||||
element: elem[0]
|
||||
}).create();
|
||||
|
||||
scope.$on('$destroy', () => {
|
||||
myScrollbar.destroy();
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -40,35 +40,38 @@
|
||||
</div>
|
||||
|
||||
<div class="search-dropdown" ng-class="{'search-dropdown--fade-in': ctrl.openCompleted}">
|
||||
<div class="search-results-container" ng-if="ctrl.tagsMode">
|
||||
<div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
|
||||
ng-class="{'selected': $index === ctrl.selectedIndex }"
|
||||
ng-click="ctrl.filterByTag(tag.term, $event)">
|
||||
<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
|
||||
<i class="fa fa-tag"></i>
|
||||
<span>{{tag.term}} ({{tag.count}})</span>
|
||||
</a>
|
||||
<div gemini-scrollbar>
|
||||
<div class="search-results-container" ng-if="ctrl.tagsMode">
|
||||
<div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
|
||||
ng-class="{'selected': $index === ctrl.selectedIndex }"
|
||||
ng-click="ctrl.filterByTag(tag.term, $event)">
|
||||
<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
|
||||
<i class="fa fa-tag"></i>
|
||||
<span>{{tag.term}} ({{tag.count}})</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-results-container" ng-if="!ctrl.tagsMode">
|
||||
<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
|
||||
|
||||
<div ng-repeat="row in ctrl.results">
|
||||
<a class="search-item search-item--{{::row.type}}" ng-class="{'selected': $index == ctrl.selectedIndex}" ng-href="{{row.url}}">
|
||||
<span class="search-result-tags">
|
||||
<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name="tag" class="label label-tag">
|
||||
{{tag}}
|
||||
</span>
|
||||
<i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>
|
||||
</span>
|
||||
|
||||
<span class="search-result-link">
|
||||
<i class="fa search-result-icon"></i>
|
||||
{{::row.title}}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-results-container" ng-if="!ctrl.tagsMode">
|
||||
<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
|
||||
|
||||
<div ng-repeat="row in ctrl.results">
|
||||
<a class="search-item search-item--{{::row.type}}" ng-class="{'selected': $index == ctrl.selectedIndex}" ng-href="{{row.url}}">
|
||||
<span class="search-result-tags">
|
||||
<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name="tag" class="label label-tag">
|
||||
{{tag}}
|
||||
</span>
|
||||
<i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>
|
||||
</span>
|
||||
|
||||
<span class="search-result-link">
|
||||
<i class="fa search-result-icon"></i>
|
||||
{{::row.title}}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -83,33 +83,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div ng-if="editor.index == 1">
|
||||
<h5 class="section-heading">Rows settings</h5>
|
||||
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form-inline" ng-repeat="row in dashboard.rows">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label">Title</span>
|
||||
<input type="text" class="gf-form-input max-width-14" ng-model='row.title'></input>
|
||||
</div>
|
||||
<gf-form-switch class="gf-form" label="Show title" checked="row.showTitle" switch-class="max-width-6"></gf-form-switch>
|
||||
|
||||
<div class="gf-form">
|
||||
<button class="btn btn-inverse gf-form-btn" ng-click="_.move(dashboard.rows,$index,$index-1)">
|
||||
<i ng-class="{'invisible': $first}" class="fa fa-arrow-up"></i>
|
||||
</button>
|
||||
<button class="btn btn-inverse gf-from-btn" ng-click="_.move(dashboard.rows,$index,$index+1)">
|
||||
<i ng-class="{'invisible': $last}" class="fa fa-arrow-down"></i>
|
||||
</button>
|
||||
<button class="btn btn-inverse gf-form-btn" ng-click="dashboard.rows = _.without(dashboard.rows,row)">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="editor.index == 2">
|
||||
|
||||
@ -47,7 +47,7 @@ export class OrgUsersCtrl {
|
||||
} else if (config.disableLoginForm) {
|
||||
return "Add Users";
|
||||
} else {
|
||||
return "Add or Invite";
|
||||
return "Add";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -26,12 +26,12 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link" ng-click="ctrl.editor.index = 0" ng-class="{active: ctrl.editor.index === 1}">
|
||||
<a class="gf-tabs-link" ng-click="ctrl.editor.index = 1" ng-class="{active: ctrl.editor.index === 1}">
|
||||
Groups (0)
|
||||
</a>
|
||||
</li>
|
||||
<li class="gf-tabs-item" ng-show="ctrl.showInviteUI">
|
||||
<a class="gf-tabs-link" ng-click="ctrl.editor.index = 1" ng-class="{active: ctrl.editor.index === 2}">
|
||||
<li class="gf-tabs-item" ng-show="ctrl.pendingInvites.length">
|
||||
<a class="gf-tabs-link" ng-click="ctrl.editor.index = 2" ng-class="{active: ctrl.editor.index === 2}">
|
||||
Pending Invitations ({{ctrl.pendingInvites.length}})
|
||||
</a>
|
||||
</li>
|
||||
@ -76,7 +76,7 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div ng-if="ctrl.editor.index === 1 && ctrl.showInviteUI">
|
||||
<div ng-if="ctrl.editor.index === 2">
|
||||
<table class="filter-table form-inline">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@ -99,7 +99,6 @@ function panelHeader($compile) {
|
||||
|
||||
menuScope = scope.$new();
|
||||
let menuHtml = createMenuTemplate(scope.ctrl);
|
||||
console.log(menuHtml);
|
||||
menuElem.html(menuHtml);
|
||||
$compile(menuElem)(menuScope);
|
||||
|
||||
|
||||
@ -1,85 +1,87 @@
|
||||
<div class="scroll-canvas">
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
<div gemini-scrollbar>
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
|
||||
<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
|
||||
<ul class="gf-tabs">
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
|
||||
Config
|
||||
</a>
|
||||
</li>
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
|
||||
Dashboards
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
|
||||
<ul class="gf-tabs">
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
|
||||
Config
|
||||
</a>
|
||||
</li>
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
|
||||
Dashboards
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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">
|
||||
<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>
|
||||
<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>
|
||||
<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.typeChanged()"></select>
|
||||
<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.typeChanged()"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<rebuild-on-change property="ctrl.datasourceMeta.id">
|
||||
<plugin-component type="datasource-config-ctrl">
|
||||
</plugin-component>
|
||||
</rebuild-on-change>
|
||||
|
||||
<div ng-if="ctrl.testing" class="gf-form-group">
|
||||
<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
|
||||
<div class="alert-{{ctrl.testing.status}} alert">
|
||||
<div class="alert-title">{{ctrl.testing.title}}</div>
|
||||
<div ng-bind='ctrl.testing.message'></div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-button-row">
|
||||
<button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
|
||||
<button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save & Test</button>
|
||||
<button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
|
||||
Delete
|
||||
</button>
|
||||
<a class="btn btn-link" href="datasources">Cancel</a>
|
||||
</div>
|
||||
<rebuild-on-change property="ctrl.datasourceMeta.id">
|
||||
<plugin-component type="datasource-config-ctrl">
|
||||
</plugin-component>
|
||||
</rebuild-on-change>
|
||||
|
||||
<div ng-if="ctrl.testing" class="gf-form-group">
|
||||
<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
|
||||
<div class="alert-{{ctrl.testing.status}} alert">
|
||||
<div class="alert-title">{{ctrl.testing.title}}</div>
|
||||
<div ng-bind='ctrl.testing.message'></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-button-row">
|
||||
<button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
|
||||
<button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save & Test</button>
|
||||
<button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
|
||||
Delete
|
||||
</button>
|
||||
<a class="btn btn-link" href="datasources">Cancel</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div ng-if="ctrl.tabIndex === 1" class="tab-content">
|
||||
<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div ng-if="ctrl.tabIndex === 1" class="tab-content">
|
||||
<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,50 +1,52 @@
|
||||
<div class="scroll-canvas">
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
<div gemini-scrollbar>
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
|
||||
<a class="page-header__cta btn btn-success" href="datasources/new">
|
||||
<i class="fa fa-plus"></i>
|
||||
Add data source
|
||||
</a>
|
||||
</div>
|
||||
<a class="page-header__cta btn btn-success" href="datasources/new">
|
||||
<i class="fa fa-plus"></i>
|
||||
Add data source
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<section class="card-section" layout-mode>
|
||||
<layout-selector></layout-selector>
|
||||
<section class="card-section" layout-mode>
|
||||
<layout-selector></layout-selector>
|
||||
|
||||
<ol class="card-list" >
|
||||
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
|
||||
<a class="card-item" href="datasources/edit/{{ds.id}}/">
|
||||
<div class="card-item-header">
|
||||
<div class="card-item-type">
|
||||
{{ds.type}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-item-body">
|
||||
<figure class="card-item-figure">
|
||||
<img ng-src="{{ds.typeLogoUrl}}">
|
||||
</figure>
|
||||
<div class="card-item-details">
|
||||
<div class="card-item-name">
|
||||
{{ds.name}}
|
||||
<span ng-if="ds.isDefault">
|
||||
<span class="btn btn-secondary btn-mini">default</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-item-sub-name">
|
||||
{{ds.url}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
<ol class="card-list" >
|
||||
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
|
||||
<a class="card-item" href="datasources/edit/{{ds.id}}/">
|
||||
<div class="card-item-header">
|
||||
<div class="card-item-type">
|
||||
{{ds.type}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-item-body">
|
||||
<figure class="card-item-figure">
|
||||
<img ng-src="{{ds.typeLogoUrl}}">
|
||||
</figure>
|
||||
<div class="card-item-details">
|
||||
<div class="card-item-name">
|
||||
{{ds.name}}
|
||||
<span ng-if="ds.isDefault">
|
||||
<span class="btn btn-secondary btn-mini">default</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-item-sub-name">
|
||||
{{ds.url}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<div ng-if="ctrl.datasources.length === 0">
|
||||
<em>No data sources defined</em>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="ctrl.datasources.length === 0">
|
||||
<em>No data sources defined</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,23 +1,27 @@
|
||||
<div dash-class ng-if="dashboard">
|
||||
<dashnav dashboard="dashboard"></dashnav>
|
||||
|
||||
<div class="dashboard-container scroll-canvas">
|
||||
<div dash-editor-view class="dash-edit-view"></div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="scroll-canvas scroll-canvas--dashboard">
|
||||
<div gemini-scrollbar>
|
||||
<div class="dashboard-container">
|
||||
<div dash-editor-view class="dash-edit-view"></div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<dashboard-submenu ng-if="dashboard.meta.submenuEnabled" dashboard="dashboard"></dashboard-submenu>
|
||||
<dashboard-submenu ng-if="dashboard.meta.submenuEnabled" dashboard="dashboard"></dashboard-submenu>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<dash-row class="dash-row" ng-repeat="row in dashboard.rows" row="row" dashboard="dashboard">
|
||||
</dash-row>
|
||||
<dash-row class="dash-row" ng-repeat="row in dashboard.rows" row="row" dashboard="dashboard">
|
||||
</dash-row>
|
||||
|
||||
<div ng-show='dashboard.meta.canEdit && !dashboard.meta.fullscreen' class="add-row-panel-hint">
|
||||
<div class="span12" style="text-align:left;">
|
||||
<span style="margin-left: 12px;" ng-click="addRowDefault()" class="pointer btn btn-inverse btn-small">
|
||||
<span><i class="fa fa-plus"></i> ADD ROW</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-show='dashboard.meta.canEdit && !dashboard.meta.fullscreen' class="add-row-panel-hint">
|
||||
<div class="span12" style="text-align:left;">
|
||||
<span style="margin-left: 12px;" ng-click="addRowDefault()" class="pointer btn btn-inverse btn-small">
|
||||
<span><i class="fa fa-plus"></i> ADD ROW</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="container">
|
||||
<div class="login-container container">
|
||||
|
||||
<div class="signup-page-background">
|
||||
</div>
|
||||
|
||||
@ -48,6 +48,10 @@ a.text-success:hover,
|
||||
a.text-success:focus { color: darken($successText, 10%); }
|
||||
a { cursor: pointer; }
|
||||
|
||||
a:focus {
|
||||
outline:0 none !important;
|
||||
}
|
||||
|
||||
a[disabled] {
|
||||
cursor: default;
|
||||
pointer-events: none !important;
|
||||
|
||||
@ -37,6 +37,13 @@
|
||||
bottom: 2px;
|
||||
z-index: 1;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
.thumb {
|
||||
opacity: 1;
|
||||
transition: opacity 100ms ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gm-scrollbar.-vertical {
|
||||
@ -56,13 +63,21 @@
|
||||
height: 0;
|
||||
cursor: pointer;
|
||||
border-radius: inherit;
|
||||
background-color: lighten($body-bg, 10%);
|
||||
background-color: $dark-5;
|
||||
transform: translate3d(0,0,0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gemini-scrolling {
|
||||
.gm-scrollbar .thumb {
|
||||
opacity: 1;
|
||||
transition: opacity 100ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.gm-scrollbar .thumb:hover,
|
||||
.gm-scrollbar .thumb:active {
|
||||
background-color: lighten($body-bg, 20%);
|
||||
background-color: $blue;
|
||||
}
|
||||
|
||||
.gm-scrollbar.-vertical .thumb {
|
||||
|
||||
@ -65,6 +65,7 @@
|
||||
max-width: 1100px;
|
||||
visibility: none;
|
||||
opacity: 0;
|
||||
background: $panel-bg;
|
||||
height: 65%;
|
||||
|
||||
&--fade-in {
|
||||
@ -76,11 +77,9 @@
|
||||
|
||||
.search-results-container {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
line-height: 28px;
|
||||
padding: $spacer;
|
||||
background: $panel-bg;
|
||||
flex-grow: 10;
|
||||
|
||||
.selected {
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
.main-view {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
// background: linear-gradient(180deg, #251f1f 0, #17181b);
|
||||
|
||||
$gradient-opacity: 0.03;
|
||||
background: linear-gradient(135deg, rgba(26, 42, 108, $gradient-opacity), rgba(178, 31, 31, $gradient-opacity), rgba(253, 187, 45, $gradient-opacity)); //Matt experiement
|
||||
@ -28,7 +27,7 @@
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
|
||||
&.dashboard-container {
|
||||
&--dashboard {
|
||||
height: calc(100% - 54px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1601,9 +1601,10 @@ gaze@^1.0.0, gaze@^1.1.2:
|
||||
dependencies:
|
||||
globule "^1.0.0"
|
||||
|
||||
gemini-scrollbar@^1.5.2:
|
||||
gemini-scrollbar@^1.5.2, "gemini-scrollbar@https://github.com/grafana/gemini-scrollbar#grafana":
|
||||
version "1.5.2"
|
||||
resolved "https://registry.yarnpkg.com/gemini-scrollbar/-/gemini-scrollbar-1.5.2.tgz#06528e49afe155c45ce9f7c9ee754a9e6f4ed341"
|
||||
uid "98d8a696502c6226b21358b916e8bf3f8773ad2d"
|
||||
resolved "https://github.com/grafana/gemini-scrollbar#98d8a696502c6226b21358b916e8bf3f8773ad2d"
|
||||
|
||||
generate-function@^2.0.0:
|
||||
version "2.0.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user