IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-15 01:53:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(ux): minor tweaks and fixes, added hover submenu dropdowns

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-12 11:21:42 +01:00
parent e7a202fe4d
commit 6cdc1e4d37
7 changed files with 32 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pkg/api/index.go
View File

@ -53,6 +53,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
Icon: "icon-gf icon-gf-dashboard",
Url: setting.AppSubUrl + "/",
Children: []*dtos.NavLink{
{Text: "Home dashboard", Icon: "fa fa-fw fa-list", Url: setting.AppSubUrl + "/"},
{Text: "Playlists", Icon: "fa fa-fw fa-list", Url: setting.AppSubUrl + "/playlists"},
{Text: "Snapshots", Icon: "fa-fw icon-gf icon-gf-snapshot", Url: setting.AppSubUrl + "/dashboard/snapshots"},
},

11
public/app/core/components/sidemenu/sidemenu.html
View File

@ -1,7 +1,7 @@
<ul class="sidemenu sidemenu-main">
<ul class="sidemenu">
<li class="sidemenu-org-section" ng-if="ctrl.isSignedIn">
<div class="sidemenu-org" data-toggle="dropdown" ng-click="ctrl.openUserDropdown()">
<li class="sidemenu-org-section" ng-if="ctrl.isSignedIn" class="dropdown">
<div class="sidemenu-org">
<div class="sidemenu-org-avatar">
<img ng-src="{{ctrl.user.gravatarUrl}}">
</div>
@ -9,8 +9,8 @@
<span class="sidemenu-org-user sidemenu-item-text">{{ctrl.user.name}}</span>
<span class="sidemenu-org-name sidemenu-item-text">{{ctrl.user.orgName}}</span>
</div>
<i class="fa fa-caret-right small"></i>
</div>
<i class="fa fa-caret-right"></i>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="menuItem.cssClass">
<span ng-if="menuItem.section">{{menuItem.section}}</span>
@ -36,13 +36,14 @@
</div>
</li>
<li ng-repeat="item in ctrl.mainLinks">
<li ng-repeat="item in ctrl.mainLinks" class="dropdown">
<a href="{{item.url}}" class="sidemenu-item sidemenu-main-link" target="{{item.target}}">
<span class="icon-circle sidemenu-icon">
<i class="{{item.icon}}" ng-show="item.icon"></i>
<img ng-src="{{item.img}}" ng-show="item.img">
</span>
<span class="sidemenu-item-text">{{item.text}}</span>
<span class="fa fa-caret-right" ng-if="item.children"></span>
</a>
<ul class="dropdown-menu" role="menu" ng-if="item.children">
<li ng-repeat="child in item.children">

2
public/app/core/components/sidemenu/sidemenu.ts
View File

@ -22,6 +22,7 @@ export class SideMenuCtrl {
this.appSubUrl = config.appSubUrl;
this.showSignout = this.contextSrv.isSignedIn && !config['authProxyEnabled'];
this.updateMenu();
this.openUserDropdown();
this.$scope.$on('$routeChangeSuccess', () => {
this.updateMenu();
@ -133,7 +134,6 @@ export class SideMenuCtrl {
updateMenu() {
this.systemSection = false;
this.mainLinks = [];
this.orgMenu = [];
var currentPath = this.$location.path();
if (currentPath.indexOf('/admin') === 0) {

4
public/less/search.less
View File

@ -1,7 +1,7 @@
.search-container {
left: 59px;
left: 72px;
top: 39px;
margin: 15px;
margin: 16px 0 0 2px;
z-index: 1000;
position: absolute;
width: 700px;

49
public/less/sidemenu.less
View File

@ -1,3 +1,5 @@
@sideMenuWidth: 220px;
.sidemenu-canvas {
position: relative;
}
@ -6,13 +8,11 @@
position: absolute;
top: 52px;
left: 0;
width: 220px;
width: @sideMenuWidth;
background-color: @bodyBackground;
border: @sideMenuBorder;
z-index: 101;
transform: translate3d(0, -100%, 0);
visibility: hidden;
// box-shadow: @sideMenuShadow;
a:focus {
text-decoration: none;
@ -32,7 +32,7 @@
min-height: 100%;
}
.main-view-container {
padding-left: 210px;
padding-left: @sideMenuWidth;
}
.page-container {
margin-left: 195px;
@ -42,7 +42,7 @@
a {
background-color: @pageBackground;
padding-right: 67px;
padding-left: 24px;
padding-left: 22px;
}
.icon-gf-grafana_wordmark {
display: inline-block;
@ -54,6 +54,9 @@
.sidemenu-org {
box-shadow: none;
}
.search-container {
left: auto;
}
}
.sidemenu {
@ -62,18 +65,16 @@
margin: 0;
padding: 0;
.fa-caret-down {
li {
position: relative;
top: 2px;
font-size: 90%;
}
.dropdown-menu {
top: 0px;
left: 200px;
margin: 0;
>li>a {
color: @linkColor;
&:hover {
.dropdown-menu {
display: block;
top: 0px;
left: @sideMenuWidth;
background-color: @bodyBackground;
}
}
}
}
@ -146,13 +147,6 @@
padding: 4px;
overflow: hidden;
}
.fa {
float: left;
font-size: 120%;
line-height: 41px;
padding: 0 15px;
}
}
.sidemenu-section-tagline {
@ -191,24 +185,22 @@
}
.sidemenu-org {
border-bottom: @sideMenuBorder;
border-top: @sideMenuBorder;
padding: 17px 10px 15px 14px;
box-sizing: border-box;
cursor: pointer;
&:hover {
background-color: @grafanaTargetFuncBackground;
background-color: @sideMenuBackgroundHighlight;
}
display: table;
position: relative;
width: 100%;
}
.sidemenu-org .fa-caret-right {
.sidemenu .fa-caret-right {
position: absolute;
top: 50%;
top: 38%;
right: 25px;
font-size: 80%;
font-size: 14px;
color: @linkColor;
}
@ -240,7 +232,6 @@
color: @linkColorDisabled;
}
.sidemenu-org-user {
display: block;
}

3
public/less/variables.dark.less
View File

@ -79,7 +79,7 @@
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: 200; // instead of browser default, bold
@headingsFontStyle: normal;
@headingsFontStyle: normal;
@headingsColor: darken(@white,11%); // empty to use BS default, @textColor
@inputText: @black;
@ -167,7 +167,6 @@
// Sidemenu
// -------------------------
@sideMenuTopShadow: @navbarDropdownShadow;
@sideMenuBorder: 1px solid @bodyBackground;
@sideMenuBackground: @grayDark;
@sideMenuBackgroundHighlight: lighten(@grayDark, 4%);
@sideMenuShadow: 0 0 35px 0 @bodyBackground;

5
public/less/variables.light.less
View File

@ -92,7 +92,7 @@
@headingsFontFamily: inherit; // inherit. empty to use BS default, @baseFontFamily
@headingsFontWeight: normal; // instead of browser default, bold
@headingsFontStyle: italic;
@headingsFontStyle: italic;
@headingsColor: @textColor; // empty to use BS default, @textColor
@ -180,11 +180,8 @@
// Sidemenu
// -------------------------
@sideMenuTopShadow: @navbarDropdownShadow;
@sideMenuBorder: 1px solid @grafanaTargetBorder;
@sideMenuBackground: @grafanaPanelBackground;
@sideMenuBackgroundHighlight: darken(@sideMenuBackground, 4%);
@sideMenuShadow: 0 5px 30px 0 lighten(@grayLight, 30%);
// search
@searchShadow: 0 5px 30px 0 lighten(@grayLight, 30%);