Skip to content

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

ux: nav fixes & polish

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