client/nav: add user avatar

4 files changed, 22 insertions, 3 deletions

diff --git a/client/css/main.css b/client/css/main.css
index 0b33966..f508251 100644
--- a/client/css/main.css
+++ b/client/css/main.css
@@ -97,9 +97,11 @@ nav.plain-nav ul li a {
 
 nav.text-nav {
     margin: 1em 0;
+    line-height: 2.3em;
+    vertical-align: middle;
 }
 nav.text-nav ul li a {
-    padding: 0.3em 1.2em;
+    padding: 0 1.2em;
 }
 nav.text-nav ul li:not(.active) a {
     color: var(--inactive-tab-text-color);
@@ -120,6 +122,7 @@ nav.text-nav ul li.active a {
 #top-nav ul li {
     float: left;
 }
+#top-nav ul li[data-name=account],
 #top-nav ul li[data-name=register],
 #top-nav ul li[data-name=login],
 #top-nav ul li[data-name=logout],
@@ -129,6 +132,17 @@ nav.text-nav ul li.active a {
 #top-nav .access-key {
     text-decoration: underline;
 }
+#top-nav .thumbnail, #top-nav span {
+    vertical-align: middle;
+}
+#top-nav .thumbnail {
+    width: 1.5em;
+    height: 1.5em;
+    margin: calc((2.3em - 1.5em) / 2);
+    margin-right: 0.6em;
+    margin-left: calc(0.6em - 1.2em);
+    float: left;
+}
 
 .messages {
     margin: 0 auto;
diff --git a/client/html/top_nav.hbs b/client/html/top_nav.hbs
index fb693c2..750e524 100644
--- a/client/html/top_nav.hbs
+++ b/client/html/top_nav.hbs
@@ -3,7 +3,10 @@
         -->{{#each items}}<!--
             -->{{#if this.available}}<!--
                 --><li data-name='{{@key}}'><!--
-                    --><a href='{{this.url}}' accesskey='{{this.accessKey}}'>{{this.name}}</a><!--
+                    --><a href='{{this.url}}' accesskey='{{this.accessKey}}'><!--
+                        -->{{#if this.imageUrl}}{{thumbnail this.imageUrl}}{{/if}}<!--
+                        --><span class='text'>{{this.name}}</span><!--
+                    --></a><!--
                 --></li><!--
             -->{{/if}}<!--
         -->{{/each}}<!--
diff --git a/client/js/controllers/top_nav_controller.js b/client/js/controllers/top_nav_controller.js
index 4e27395..a9c15ea 100644
--- a/client/js/controllers/top_nav_controller.js
+++ b/client/js/controllers/top_nav_controller.js
@@ -10,6 +10,7 @@ class NavigationItem {
         this.name = name;
         this.url = url;
         this.available = true;
+        this.imageUrl = null;
     }
 }
 
@@ -46,6 +47,7 @@ class TopNavController {
 
     updateVisibility() {
         this.items.account.url =  '/user/' + api.userName;
+        this.items.account.imageUrl = api.user ? api.user.avatarUrl : null;
 
         const b = Object.keys(this.items);
         for (let key of b) {
diff --git a/client/js/views/top_nav_view.js b/client/js/views/top_nav_view.js
index 2c6cdf6..2369553 100644
--- a/client/js/views/top_nav_view.js
+++ b/client/js/views/top_nav_view.js
@@ -13,7 +13,7 @@ class TopNavView {
         const target = this.navHolder;
         const source = this.template(ctx);
 
-        for (let link of source.querySelectorAll('a')) {
+        for (let link of source.querySelectorAll('a span.text')) {
             const regex = new RegExp(
                 '(' + link.getAttribute('accesskey') + ')', 'i');
             link.innerHTML = link.textContent.replace(