Skip to content

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

ux: nav fixes & polish

parent d659a5d7
Showing with 105 additions and 60 deletions
pkg/api/avatar/avatar.go
......@@ -65,7 +65,7 @@ func New(hash string) *Avatar {
return &Avatar{
hash: hash,
reqParams: url.Values{
"d": {"404"},
"d": {"retro"},
"size": {"200"},
"r": {"pg"}}.Encode(),
}
......
pkg/api/index.go
......@@ -113,10 +113,11 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
if c.IsSignedIn {
data.NavTree = append(data.NavTree, &dtos.NavLink{
Text: "Your Profile",
Id: "profile",
Icon: "fa fa-fw fa-user",
Url: setting.AppSubUrl + "/profile",
Text: c.SignedInUser.Login,
Id: "profile",
Img: data.User.GravatarUrl,
Url: setting.AppSubUrl + "/profile",
HideFromMenu: true,
Children: []*dtos.NavLink{
{Text: "Signout", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self"},
{Text: "Your profile", Url: setting.AppSubUrl + "/profile", Icon: "fa fa-fw fa-sliders"},
......@@ -256,6 +257,18 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
})
}
data.NavTree = append(data.NavTree, &dtos.NavLink{
Text: "Help",
Id: "help",
Url: "/help",
Icon: "fa fa-fw fa-question",
HideFromMenu: true,
Children: []*dtos.NavLink{
{Text: "Shortcuts", Url: "/shortcuts", Icon: "fa fa-fw fa-keyboard-o", Target: "_self"},
{Text: "Community site", Url: "http://community.grafana.com", Icon: "fa fa-fw fa-comment", Target: "_blank"},
{Text: "Documentation", Url: "http://docs.grafana.org", Icon: "fa fa-fw fa-file", Target: "_blank"},
},
})
data.NavTree = append(data.NavTree, cfgNode)
}
......
public/app/core/components/navbar/navbar.ts
......@@ -46,8 +46,9 @@ export function pageH1() {
restrict: 'E',
template: `
<h1>
<i class="{{model.node.icon}}"></i>
{{model.node.text}}
<i class="{{::model.node.icon}}" ng-if="::model.node.icon"></i>
<img ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i>
{{::model.node.text}}
</h1>
`,
scope: {
......
public/app/core/components/sidemenu/sidemenu.html
......@@ -28,52 +28,74 @@
</div>
<div class="sidemenu__bottom">
<div ng-show="::!ctrl.isSignedIn" class="sidemenu-item">
<a href="{{ctrl.loginUrl}}" class="sidemenu-link" target="_self">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu">
<li class="side-menu-header">
<span class="sidemenu-item-text">Sign in</span>
</li>
</ul>
</div>
<div class="sidemenu-item dropup dropdown" ng-if="::ctrl.isSignedIn">
<a class="sidemenu-link" href="profile">
<span class="icon-circle sidemenu-icon sidemenu-org-avatar">
<img ng-src="{{::ctrl.user.gravatarUrl}}">
<span class="sidemenu-org-avatar--missing">
<i class="fa fa-fw fa-user"></i>
</span>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
<li ng-show="ctrl.orgs.length > ctrl.maxshownorgs" style="margin-left: 10px;width: 90%">
<span class="sidemenu-item-text">max shown : {{::ctrl.maxshownorgs}}</span>
<input ng-model="::ctrl.orgfilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadorgsitems();" class="gf-input-small width-12" placeholder="filter">
</li>
<li ng-repeat="orgitem in ctrl.orgitems" ng-class="::orgitem.cssclass">
<a href="{{::orgitem.url}}" ng-show="::orgitem.url" target="{{::orgitem.target}}">
<i class="{{::orgitem.icon}}" ng-show="::orgitem.icon"></i>
{{::orgitem.text}}
</a>
</li>
<li ng-repeat="menuItem in ctrl.profileNav.children" ng-class="::menuItem.cssClass" ng-hide="menuItem.hideFromMenu">
<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
{{::menuItem.text}}
</a>
</li>
<li class="side-menu-header">
<span class="sidemenu-item-text">{{::ctrl.user.name}}</span>
</li>
</ul>
</div>
<div class="sidemenu-item">
<a href="http://docs.grafana.org" class="sidemenu-link" target="_blank">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-question"></i></span>
</a>
</div>
<div ng-repeat="item in ::ctrl.bottomNav" class="sidemenu-item dropdown dropup">
<a href="{{::item.url}}" class="sidemenu-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>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu" ng-if="::item.children">
<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}" ng-hide="::child.hideFromMenu">
<a href="{{::child.url}}" target="{{::child.target}}">
<i class="{{::child.icon}}" ng-show="::child.icon"></i>
{{::child.text}}
</a>
</li>
<li class="side-menu-header">
<span class="sidemenu-item-text">{{::item.text}}</span>
</li>
</ul>
</div>
<!-- <div ng&#45;show="::!ctrl.isSignedIn" class="sidemenu&#45;item"> -->
<!-- <a href="{{ctrl.loginUrl}}" class="sidemenu&#45;link" target="_self"> -->
<!-- <span class="icon&#45;circle sidemenu&#45;icon"><i class="fa fa&#45;fw fa&#45;sign&#45;in"></i></span> -->
<!-- </a> -->
<!-- <ul class="dropdown&#45;menu dropdown&#45;menu&#45;&#45;sidemenu" role="menu"> -->
<!-- <li class="side&#45;menu&#45;header"> -->
<!-- <span class="sidemenu&#45;item&#45;text">Sign in</span> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- -->
<!-- <div class="sidemenu&#45;item dropup dropdown" ng&#45;if="::ctrl.isSignedIn"> -->
<!-- <a class="sidemenu&#45;link" href="profile"> -->
<!-- <span class="icon&#45;circle sidemenu&#45;icon sidemenu&#45;org&#45;avatar"> -->
<!-- <img ng&#45;src="{{::ctrl.user.gravatarUrl}}"> -->
<!-- <span class="sidemenu&#45;org&#45;avatar&#45;&#45;missing"> -->
<!-- <i class="fa fa&#45;fw fa&#45;user"></i> -->
<!-- </span> -->
<!-- </span> -->
<!-- </a> -->
<!-- <ul class="dropdown&#45;menu dropdown&#45;menu&#45;&#45;sidemenu dropup" role="menu"> -->
<!-- <li ng&#45;repeat="menuItem in ctrl.profileNav.children" ng&#45;class="::menuItem.cssClass" ng&#45;hide="menuItem.hideFromMenu"> -->
<!-- <a href="{{::menuItem.url}}" ng&#45;show="::menuItem.url" target="{{::menuItem.target}}"> -->
<!-- <i class="{{::menuItem.icon}}" ng&#45;show="::menuItem.icon"></i> -->
<!-- {{::menuItem.text}} -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="side&#45;menu&#45;header"> -->
<!-- <span class="sidemenu&#45;item&#45;text">{{::ctrl.user.name}}</span> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- -->
<!-- <div class="sidemenu&#45;item dropdown dropup"> -->
<!-- <a href="http://docs.grafana.org" class="sidemenu&#45;link" target="_blank"> -->
<!-- <span class="icon&#45;circle sidemenu&#45;icon"><i class="fa fa&#45;fw fa&#45;question"></i></span> -->
<!-- </a> -->
<!-- <ul class="dropdown&#45;menu dropdown&#45;menu&#45;&#45;sidemenu" role="menu"> -->
<!-- <li ng&#45;repeat="menuItem in ctrl.helpNav.children" ng&#45;class="::menuItem.cssClass" ng&#45;hide="menuItem.hideFromMenu"> -->
<!-- <a href="{{::menuItem.url}}" ng&#45;show="::menuItem.url" target="{{::menuItem.target}}"> -->
<!-- <i class="{{::menuItem.icon}}" ng&#45;show="::menuItem.icon"></i> -->
<!-- {{::menuItem.text}} -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="side&#45;menu&#45;header"> -->
<!-- <span class="sidemenu&#45;item&#45;text">Help</span> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
</div>
public/app/core/components/sidemenu/sidemenu.ts
......@@ -9,7 +9,7 @@ export class SideMenuCtrl {
isSignedIn: boolean;
user: any;
mainLinks: any;
profileNav: any;
bottomNav: any;
appSubUrl: string;
loginUrl: string;
orgFilter: string;
......@@ -23,8 +23,8 @@ export class SideMenuCtrl {
this.user = contextSrv.user;
this.appSubUrl = config.appSubUrl;
this.maxShownOrgs = 10;
this.mainLinks = _.filter(config.bootData.navTree, item => item.id !== 'profile');
this.profileNav = _.find(config.bootData.navTree, {id: 'profile'});
this.mainLinks = _.filter(config.bootData.navTree, item => !item.hideFromMenu);
this.bottomNav = _.filter(config.bootData.navTree, item => item.hideFromMenu);
this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path());
this.$scope.$on('$routeChangeSuccess', () => {
......
public/sass/components/_query_editor.scss
.query-keyword {
font-weight: bold;
font-weight: $font-weight-semi-bold;
color: $blue;
}
......
public/sass/components/_search.scss
......@@ -65,7 +65,7 @@
max-width: 1100px;
visibility: none;
opacity: 0;
height: 100%;
height: 65%;
&--fade-in {
visibility: visible;
......@@ -75,7 +75,7 @@
}
.search-results-container {
height: 90%;
height: 100%;
overflow: auto;
display: block;
line-height: 28px;
......
public/sass/layout/_page.scss
......@@ -58,7 +58,16 @@
font-size: $font-size-h2;
flex-grow: 1;
display: inline-block;
margin-bottom: 2rem;
margin-bottom: 1rem;
img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 0.5rem;
position: relative;
top: -3px;
}
}
a, button {
......
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