mirror of
https://github.com/grafana/grafana.git
synced 2025-02-11 08:05:43 -06:00
More progress on new design
This commit is contained in:
Torkel Ödegaard
parent
2f7770b165
commit
fcba5a6eeb
@ -16,5 +16,4 @@ define([
|
||||
'./graphiteSegment',
|
||||
'./grafanaVersionCheck',
|
||||
'./dropdown.typeahead',
|
||||
'./navHeader',
|
||||
], function () {});
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,21 +1,11 @@
|
||||
<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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -1,98 +1,3 @@
|
||||
.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%;
|
||||
|
||||
114
src/css/less/sidemenu.less
Normal file
114
src/css/less/sidemenu.less
Normal file
@ -0,0 +1,114 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user