Skip to content

N
nexpie-grafana-theme
Commit fcba5a6e by Torkel Ödegaard
Options

More progress on new design

parent 2f7770b1
Showing with 133 additions and 113 deletions
src/app/directives/all.js
......@@ -16,5 +16,4 @@ define([
'./graphiteSegment',
'./grafanaVersionCheck',
'./dropdown.typeahead',
'./navHeader',
], function () {});
src/app/partials/dashboard_topnav.html
......@@ -5,7 +5,7 @@
<div class="top-nav">
<span class="top-nav-menu-btn" ng-if="!grafana.sidemenu">
<a class="pointer" ng-click="toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
<img class="logo-icon" src="img/fav32.png"></img>
<span>menu</span>
</a>
</span>
......
src/app/partials/sidemenu.html
<div ng-controller="SideMenuCtrl" ng-init="init()">
<ul class="sidemenu">
<li class="sidemenu-logo-container">
<img ng-src="{{appSubUrl}}/img/logo_transparent_200x.png" style="width: 80px">
<a ng-click="toggleSideMenu()" class="pull-right pointer">
<i class="fa fa-chevron-right"></i>
<img ng-src="{{appSubUrl}}/img/logo_transparent_200x.png">
<a ng-click="toggleSideMenu()" class="pointer sidemenu-toggle">
<i class="fa fa-angle-right"></i>
</a>
</li>
<li class="dropdown" ng-if="grafana.user.isSignedIn">
<a class="sidemenu-user pointer" data-toggle="dropdown" title="{{grafana.user.email}}">
<span class="gravatar-missing">f</span>
<img ng-src="{{grafana.user.gravatarUrl}}" width="35">
<span class="gravatar-email small">{{grafana.user.login}}</span>
</a>
<ul class="dropdown-menu">
<li><a href="{{appSubUrl}}/login?logout">Logout</a></li>
</ul>
</li>
<li ng-if="!grafana.user.isSignedIn">
<a href="login" class="sidemenu-item"><i class="fa fa-sign-in"></i>Sign in</a>
</li>
......@@ -29,5 +19,16 @@
</li>
</ul>
</li>
<li class="dropdown" ng-if="grafana.user.isSignedIn">
<a class="sidemenu-user pointer" data-toggle="dropdown" title="{{grafana.user.email}}">
<span class="gravatar-missing">f</span>
<img ng-src="{{grafana.user.gravatarUrl}}" width="35">
<span class="gravatar-email small">{{grafana.user.login}}</span>
</a>
<ul class="dropdown-menu">
<li><a href="{{appSubUrl}}/login?logout">Logout</a></li>
</ul>
</li>
</ul>
</div>
src/css/less/grafana.less
......@@ -9,6 +9,7 @@
@import "forms.less";
@import "singlestat.less";
@import "tightform.less";
@import "sidemenu.less";
.row-control-inner {
padding:0px;
......@@ -62,7 +63,7 @@
float: left;
padding: 15px 13px 13px 14px;;
position: relative;
background: @black;
border-right: 2px solid black;
font-weight: bold;
font-size: 90%;
span {
......
src/css/less/p_pro.less
.pro-sidemenu {
display: none;
a:focus {
text-decoration: none;
}
}
.pro-sidemenu-open {
.pro-sidemenu {
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
background: @bodyBackground;
border-right: 2px solid black;
min-height: 100%;
z-index: 101;
}
.dashboard-notice {
margin-left: 200px;
width: auto;
}
.pro-main-view {
padding-left: 200px;
}
.panel-fullscreen {
left: 200px;
}
}
.sidemenu {
list-style: none;
background: @grafanaPanelBackground;
margin: 0;
padding: 0;
}
.sidemenu-links {
margin: 0;
padding: 5px 0;
list-style: none;
background: @grafanaTargetFuncBackground;
li {
display: block;
}
}
.sidemenu-link {
display: block;
padding: 6px 0 6px 30px;
font-size: 15px;
color: @gray;
i {
padding-right: 15px;
}
&.active {
color: white;
font-weight: bold;
}
}
.sidemenu-user {
padding: 8px 10px 7px 15px;
display: block;
width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.gravatar-missing {
display: none;
}
.gravatar-email {
padding-left: 4px;
}
img {
width: 35px;
padding-right: 10px;
}
border-bottom: 1px solid black;
}
.sidemenu-item {
font-size: 17px;
padding: 14px 10px 14px 20px;
display: block;
i {
padding-right: 15px;
}
border-bottom: 1px solid black;
}
.login-form {
width: 50%;
......
src/css/less/sidemenu.less 0 → 100644
.sidemenu-container {
display: none;
a:focus {
text-decoration: none;
}
}
.sidemenu-open {
.sidemenu-container {
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
background: @bodyBackground;
border-right: 2px solid black;
min-height: 100%;
z-index: 101;
}
.dashboard-notice {
margin-left: 200px;
width: auto;
}
.pro-main-view {
padding-left: 200px;
}
.panel-fullscreen {
left: 200px;
}
}
.sidemenu {
list-style: none;
background: @grafanaPanelBackground;
margin: 0;
padding: 0;
}
.sidemenu-links {
margin: 0;
padding: 5px 0;
list-style: none;
background: @grafanaTargetFuncBackground;
li {
display: block;
}
}
.sidemenu-link {
display: block;
padding: 6px 0 6px 30px;
font-size: 15px;
color: @gray;
i {
padding-right: 15px;
}
&.active {
color: white;
font-weight: bold;
}
}
.sidemenu-user {
padding: 8px 10px 7px 15px;
display: block;
width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.gravatar-missing {
display: none;
}
.gravatar-email {
padding-left: 4px;
}
img {
width: 35px;
padding-right: 10px;
}
border-bottom: 1px solid black;
}
.sidemenu-item {
font-size: 17px;
padding: 14px 10px 14px 20px;
display: block;
i {
padding-right: 15px;
}
border-bottom: 1px solid black;
}
.sidemenu-logo-container {
background: @grafanaPanelBackground;
text-align: center;
border-bottom: 2px solid black;
img {
display: inline-block;
width: 102px;
padding: 6px 0px 7px 11px;
}
}
.sidemenu-toggle {
float: right;
display: block;
font-size: 200%;
padding: 11px 8px 11px 8px;
background: @grafanaTargetFuncBackground;
}
src/views/index.html
......@@ -27,9 +27,9 @@
<body ng-cloak ng-controller="GrafanaCtrl">
<link rel="stylesheet" href="[[.AppSubUrl]]/css/grafana.light.min.css" ng-if="grafana.style === 'light'">
<div class="pro-container" ng-class="{'pro-sidemenu-open': grafana.sidemenu}">
<div class="pro-container" ng-class="{'sidemenu-open': grafana.sidemenu}">
<aside class="pro-sidemenu" ng-if="grafana.sidemenu">
<aside class="sidemenu-container" ng-if="grafana.sidemenu">
<div ng-include="'app/partials/sidemenu.html'"></div>
</aside>
......
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