From 5405736321b8ab3c6a7cca696658ea36754c2dd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 15 Aug 2017 23:17:34 +0200 Subject: [PATCH] ux: nav fixes & polish --- pkg/api/avatar/avatar.go | 2 +- pkg/api/index.go | 21 +++- public/app/core/components/navbar/navbar.ts | 5 +- .../core/components/sidemenu/sidemenu.html | 114 +++++++++++------- .../app/core/components/sidemenu/sidemenu.ts | 6 +- public/sass/components/_query_editor.scss | 2 +- public/sass/components/_search.scss | 4 +- public/sass/layout/_page.scss | 11 +- 8 files changed, 105 insertions(+), 60 deletions(-) diff --git a/pkg/api/avatar/avatar.go b/pkg/api/avatar/avatar.go index 69926bce492..1b862a9bdae 100644 --- a/pkg/api/avatar/avatar.go +++ b/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(), } diff --git a/pkg/api/index.go b/pkg/api/index.go index 3e35cbcd01a..3f4e5032905 100644 --- a/pkg/api/index.go +++ b/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) } diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index 59d3af10cb1..1106cd13903 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -46,8 +46,9 @@ export function pageH1() { restrict: 'E', template: `

- - {{model.node.text}} + + + {{::model.node.text}}

`, scope: { diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html index 44271765f00..fd8d1e28da6 100644 --- a/public/app/core/components/sidemenu/sidemenu.html +++ b/public/app/core/components/sidemenu/sidemenu.html @@ -28,52 +28,74 @@
-
- - - - -
-
- - - - - - - - -
- -
- - - -
+
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/public/app/core/components/sidemenu/sidemenu.ts b/public/app/core/components/sidemenu/sidemenu.ts index 2e9b2fd14aa..83782d61d40 100644 --- a/public/app/core/components/sidemenu/sidemenu.ts +++ b/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', () => { diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss index 84e09976b32..5abe0d561c7 100644 --- a/public/sass/components/_query_editor.scss +++ b/public/sass/components/_query_editor.scss @@ -1,5 +1,5 @@ .query-keyword { - font-weight: bold; + font-weight: $font-weight-semi-bold; color: $blue; } diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 6ddd3f336ca..7f216922cdc 100644 --- a/public/sass/components/_search.scss +++ b/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; diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index b59c5ffb9ec..13a77dfe24c 100644 --- a/public/sass/layout/_page.scss +++ b/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 {