Skip to content

N
nexpie-grafana-theme
Commit 6609dbff by Torkel Ödegaard
Options

ux: sidenav fixes and dashboard search changes

parent a4da0adf
Showing with 49 additions and 178 deletions
' deleted 100644 → 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;
}
}
package.json
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
"dependencies": { "dependencies": {
"eventemitter3": "^2.0.2", "eventemitter3": "^2.0.2",
"gaze": "^1.1.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-jscs": "3.0.1",
"grunt-sass-lint": "^0.2.2", "grunt-sass-lint": "^0.2.2",
"grunt-sync": "^0.6.2", "grunt-sync": "^0.6.2",
......
public/app/core/components/scroll/scroll.ts
...@@ -12,6 +12,10 @@ export function geminiScrollbar() { ...@@ -12,6 +12,10 @@ export function geminiScrollbar() {
autoshow: false, autoshow: false,
element: elem[0] element: elem[0]
}).create(); }).create();
scope.$on('$destroy', () => {
myScrollbar.destroy();
});
} }
}; };
} }
......
public/app/core/components/search/search.html
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
</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 }"
...@@ -70,5 +71,7 @@ ...@@ -70,5 +71,7 @@
</a> </a>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
public/app/features/dashboard/partials/settings.html
...@@ -83,33 +83,6 @@ ...@@ -83,33 +83,6 @@
</div> </div>
</div> </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>
<div ng-if="editor.index == 2"> <div ng-if="editor.index == 2">
......
public/app/features/org/org_users_ctrl.ts
...@@ -47,7 +47,7 @@ export class OrgUsersCtrl { ...@@ -47,7 +47,7 @@ export class OrgUsersCtrl {
} else if (config.disableLoginForm) { } else if (config.disableLoginForm) {
return "Add Users"; return "Add Users";
} else { } else {
return "Add or Invite"; return "Add";
} }
} }
......
public/app/features/org/partials/orgUsers.html
...@@ -26,12 +26,12 @@ ...@@ -26,12 +26,12 @@
</a> </a>
</li> </li>
<li class="gf-tabs-item"> <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) Groups (0)
</a> </a>
</li> </li>
<li class="gf-tabs-item" ng-show="ctrl.showInviteUI"> <li class="gf-tabs-item" ng-show="ctrl.pendingInvites.length">
<a class="gf-tabs-link" ng-click="ctrl.editor.index = 1" ng-class="{active: ctrl.editor.index === 2}"> <a class="gf-tabs-link" ng-click="ctrl.editor.index = 2" ng-class="{active: ctrl.editor.index === 2}">
Pending Invitations ({{ctrl.pendingInvites.length}}) Pending Invitations ({{ctrl.pendingInvites.length}})
</a> </a>
</li> </li>
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
</table> </table>
</div> </div>
<div ng-if="ctrl.editor.index === 1 && ctrl.showInviteUI"> <div ng-if="ctrl.editor.index === 2">
<table class="filter-table form-inline"> <table class="filter-table form-inline">
<thead> <thead>
<tr> <tr>
......
public/app/features/panel/panel_header.ts
...@@ -99,7 +99,6 @@ function panelHeader($compile) { ...@@ -99,7 +99,6 @@ function panelHeader($compile) {
menuScope = scope.$new(); menuScope = scope.$new();
let menuHtml = createMenuTemplate(scope.ctrl); let menuHtml = createMenuTemplate(scope.ctrl);
console.log(menuHtml);
menuElem.html(menuHtml); menuElem.html(menuHtml);
$compile(menuElem)(menuScope); $compile(menuElem)(menuScope);
......
public/app/features/plugins/partials/ds_edit.html
<div class="scroll-canvas"> <div class="scroll-canvas">
<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">
...@@ -81,5 +82,6 @@ ...@@ -81,5 +82,6 @@
</div> </div>
</div> </div>
</div>
</div> </div>
public/app/features/plugins/partials/ds_list.html
<div class="scroll-canvas"> <div class="scroll-canvas">
<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">
...@@ -46,5 +47,6 @@ ...@@ -46,5 +47,6 @@
<em>No data sources defined</em> <em>No data sources defined</em>
</div> </div>
</div> </div>
</div>
</div> </div>
public/app/partials/dashboard.html
<div dash-class ng-if="dashboard"> <div dash-class ng-if="dashboard">
<dashnav dashboard="dashboard"></dashnav> <dashnav dashboard="dashboard"></dashnav>
<div class="dashboard-container scroll-canvas"> <div class="scroll-canvas scroll-canvas--dashboard">
<div gemini-scrollbar>
<div class="dashboard-container">
<div dash-editor-view class="dash-edit-view"></div> <div dash-editor-view class="dash-edit-view"></div>
<div class="clearfix"></div> <div class="clearfix"></div>
...@@ -20,4 +22,6 @@ ...@@ -20,4 +22,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
public/app/partials/signup_invited.html
<div class="container"> <div class="login-container container">
<div class="signup-page-background"> <div class="signup-page-background">
</div> </div>
......
public/sass/base/_type.scss
...@@ -48,6 +48,10 @@ a.text-success:hover, ...@@ -48,6 +48,10 @@ a.text-success:hover,
a.text-success:focus { color: darken($successText, 10%); } a.text-success:focus { color: darken($successText, 10%); }
a { cursor: pointer; } a { cursor: pointer; }
a:focus {
outline:0 none !important;
}
a[disabled] { a[disabled] {
cursor: default; cursor: default;
pointer-events: none !important; pointer-events: none !important;
......
public/sass/components/_scrollbar.scss
...@@ -37,6 +37,13 @@ ...@@ -37,6 +37,13 @@
bottom: 2px; bottom: 2px;
z-index: 1; z-index: 1;
border-radius: 3px; border-radius: 3px;
&:hover {
.thumb {
opacity: 1;
transition: opacity 100ms ease-in-out;
}
}
} }
.gm-scrollbar.-vertical { .gm-scrollbar.-vertical {
...@@ -56,13 +63,21 @@ ...@@ -56,13 +63,21 @@
height: 0; height: 0;
cursor: pointer; cursor: pointer;
border-radius: inherit; border-radius: inherit;
background-color: lighten($body-bg, 10%); background-color: $dark-5;
transform: translate3d(0,0,0); 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:hover,
.gm-scrollbar .thumb:active { .gm-scrollbar .thumb:active {
background-color: lighten($body-bg, 20%); background-color: $blue;
} }
.gm-scrollbar.-vertical .thumb { .gm-scrollbar.-vertical .thumb {
......
public/sass/components/_search.scss
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
max-width: 1100px; max-width: 1100px;
visibility: none; visibility: none;
opacity: 0; opacity: 0;
background: $panel-bg;
height: 65%; height: 65%;
&--fade-in { &--fade-in {
...@@ -76,11 +77,9 @@ ...@@ -76,11 +77,9 @@
.search-results-container { .search-results-container {
height: 100%; height: 100%;
overflow: auto;
display: block; display: block;
line-height: 28px; line-height: 28px;
padding: $spacer; padding: $spacer;
background: $panel-bg;
flex-grow: 10; flex-grow: 10;
.selected { .selected {
......
public/sass/layout/_page.scss
...@@ -11,7 +11,6 @@ ...@@ -11,7 +11,6 @@
.main-view { .main-view {
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
// background: linear-gradient(180deg, #251f1f 0, #17181b);
$gradient-opacity: 0.03; $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 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 @@ ...@@ -28,7 +27,7 @@
overflow: auto; overflow: auto;
height: 100%; height: 100%;
&.dashboard-container { &--dashboard {
height: calc(100% - 54px); height: calc(100% - 54px);
} }
} }
......
yarn.lock
...@@ -1601,9 +1601,10 @@ gaze@^1.0.0, gaze@^1.1.2: ...@@ -1601,9 +1601,10 @@ gaze@^1.0.0, gaze@^1.1.2:
dependencies: dependencies:
globule "^1.0.0" 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" 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: generate-function@^2.0.0:
version "2.0.0" version "2.0.0"
......
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